Enlarge panel to the window size

General
1

I have created inbox page which shows message list using “Panel” in an “Each” component. I want to enlarge individual panels to view messages in full screen as a user clicks relevant panel. I have used set width method to enlarge the height and width but it is not working to resize the panel to the window size.
This is my code

<ScrollView>
	<StackPanel Background="{backgroundColor}">
		<Each Items="{messages}">
		   <Panel ux:Name="msgPanel">
                       <Clicked>
                            <Toggle Target="messageView" />
                        </Clicked>
          
                        <WhileTrue ux:Name="messageView">                           
                            <Set msgPanel.Width="300"/> 
                            <Set msgPanel.Height="400"/>    
                        </WhileTrue>
				<SwipeGesture ux:Name="swipeRight" Direction="Right" Type="Active" />	
                        		<!-- Right swipe events -->
						<SwipingAnimation Source="swipeRight">				
							<Set doneText.Opacity="1" />
							<Change background.Color="{swipeBackgroundColor}" Easing="ExponentialOut" />
						</SwipingAnimation>
						<Swiped Source="swipeRight">
							<Callback Handler="{removeItem}" />
						</Swiped>					
						<Panel Background="{backgroundColor}" ux:Name="contents">
							<SwipingAnimation Source="swipeRight">
								<Move X="1" RelativeTo="Size"/>
							</SwipingAnimation>			
							<DockPanel Margin="7,1,7,0">	
								<StackPanel Margin="7,3,7,7">
									<vx.Text Font="Regular" Value="{subject}" FontSize="16" />
									<!-- <Text Font="Regular" Value="{sender}" FontSize="16" Color="#999" /> -->
									<vx.Text Font="Light" Value="{summary}" FontSize="13" />
								</StackPanel>
							</DockPanel>
						</Panel>

						<Text ux:Class="Operation" Font="Regular" TextAlignment="Center" Alignment="Center" Color="{swipeTextColor}" FontSize="22" />
						<Operation ux:Name="doneText" >Remove</Operation>
					
						<Rectangle>
							<SolidColor ux:Name="background" Color="#fff" />
						</Rectangle>
						<RemovingAnimation>
							<Move RelativeTo="Size" Y="-1" Duration="0.4" Easing="CircularInOut" />
						</RemovingAnimation>

						<LayoutAnimation>
							<Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="CircularInOut" />
						</LayoutAnimation>
					</Panel>
                                    <Rectangle Height="1px" Color="{seperator}" />
				</Each>
			</StackPanel>
		</ScrollView>

file
aXwMchAtgJMe-image-1503991495207.PNG324×558

2

To achieve what you’re after, one way would be using LayoutMaster. Here’s an example of that.

Alternatively, you could have the “message view” as a separate page that you push when the list item is clicked.

Hope this helps!

3

Thank you.!