Layout Problems

How-to Discussions
1

Hello Community,

I am fuse beginner and need help.

I have build a testpage see screenshot 1 but when i turn these page in Landscape mode all items overlay each other Screenshot 2.

Any Tipps how i can build this better?

Screenshot 1
wiQvxBK.jpg710×1226

Screenshot 2
m2mWHpe.jpg1244×728 

<App>
	<DockPanel>
		<StatusBarBackground Dock="Top" Background="White"/>

		<Image ux:Name="rect3Img" Url="http://app.iauftrag.de/res/images/mobile/loginBackground.jpg" Layer="Background" StretchMode="UniformToFill" />
		<Panel ux:Name="rect3" Background="#0008">
			<Panel Alignment="TopCenter" Margin=" 0, 115, 0, 0" Width="15%" MaxWidth="116">
			    <Image Width="100%">
			        <MultiDensityImageSource>
			            <FileImageSource Density="1" File="logo.png" />
			            <FileImageSource Density="2" File="logo@2x.png" />
			            <FileImageSource Density="3" File="logo@4x.png" />
			        </MultiDensityImageSource>
			    </Image>
			</Panel>

			<StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
				<Panel Margin="0, 0, 0, 35">
					<TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
				        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
					</TextInput>
				</Panel>

				<Panel Margin="0, 0, 0, 35">
					<TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
						 <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
					</TextInput>
				</Panel>

				<Panel Background="Green">
					<Text>Panel</Text>
				</Panel>
			</StackPanel>

			<StackPanel Alignment="Bottom">
				<Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
				<Rectangle Width="100%" Height="50" Color="Green">
					<Text Alignment="Center" Color="White">Anmelden</Text>
				</Rectangle>
			</StackPanel>
		</Panel>
	</DockPanel>

	<WhileKeyboardVisible>
		<Move Target="rect3" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
		<Move Target="rect3Img" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut" />
	</WhileKeyboardVisible>
</App>
2

Hi Scotty,

you could use WhileWindowLandscape trigger to alter the layout, or build a completely different layout for landscape. Note that there alse is a WhileWindowPortrait trigger, and most of the triggers have an Invert property.

These are the tools that allow to build a decent layout on both portrait and landscape. Exactly what to make is up to you.

3

Hey Uldis,

thanks for this reply.

Can i differ between smartphone Landscape View and tablet Landscape View?

4

Yes, in a way. There is a WhileWindowSize trigger that you can use.

5

Hey Uldis,

thanks for this super fast reply.

Now is works great. But i have a question: how can improve my demo code i have nearly three times the same code?

<App>
    <DockPanel>
        <StatusBarBackground Dock="Top" Background="White"/>
		<Image ux:Name="rect3Img" Url="http://app.iauftrag.de/res/images/mobile/loginBackground.jpg" Layer="Background" StretchMode="UniformToFill" />

		<Panel ux:Name="rect3" Background="#0008">
			<WhileWindowPortrait>
	            <Panel Alignment="TopCenter" Margin=" 0, 115, 0, 0" Width="15%" MaxWidth="116">
	                <Image Width="100%">
	                    <MultiDensityImageSource>
	                        <FileImageSource Density="1" File="logo.png" />
	                        <FileImageSource Density="2" File="logo@2x.png" />
	                        <FileImageSource Density="3" File="logo@4x.png" />
	                    </MultiDensityImageSource>
	                </Image>
	            </Panel>

	            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
	                <Panel Margin="0, 0, 0, 35">
	                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
	                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
	                    </TextInput>
	                </Panel>

	                <Panel Margin="0, 0, 0, 35">
	                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
	                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
	                    </TextInput>
	                </Panel>

	                <Panel Background="Green">
	                    <Text>Panel</Text>
	                </Panel>
	            </StackPanel>

	            <StackPanel Alignment="Bottom">
	                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
	                <Rectangle Width="100%" Height="50" Color="Green">
	                    <Text Alignment="Center" Color="White">Anmelden</Text>
	                </Rectangle>
	            </StackPanel>
   			</WhileWindowPortrait>

   			<WhileWindowLandscape>
   				<!-- Tablet Landscape View -->
   				<WhileWindowSize GreaterThan="1024,1">
	   				<Panel Alignment="TopCenter" Margin=" 0, 115, 0, 0" Width="15%" MaxWidth="116">
		                <Image Width="100%">
		                    <MultiDensityImageSource>
		                        <FileImageSource Density="1" File="logo.png" />
		                        <FileImageSource Density="2" File="logo@2x.png" />
		                        <FileImageSource Density="3" File="logo@4x.png" />
		                    </MultiDensityImageSource>
		                </Image>
		            </Panel>

		            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
		                <Panel Margin="0, 0, 0, 35">
		                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
		                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
		                    </TextInput>
		                </Panel>

		                <Panel Margin="0, 0, 0, 35">
		                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
		                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
		                    </TextInput>
		                </Panel>

		                <Panel Background="Green">
		                    <Text>Panel</Text>
		                </Panel>
		            </StackPanel>

		            <StackPanel Alignment="Bottom">
		                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
		                <Rectangle Width="100%" Height="50" Color="Green">
		                    <Text Alignment="Center" Color="White">Anmelden</Text>
		                </Rectangle>
		            </StackPanel>
	        	</WhileWindowSize>

	            <!-- Smartphone Landscape View -->
			    <WhileWindowSize LessThan="1023,99999">
			    	<ScrollView>
			    		<Grid Rows="auto, auto, auto">
							<Panel Alignment="TopCenter" Margin=" 0, 50, 0, 50" Width="15%" MaxWidth="116">
				                <Image Width="100%">
				                    <MultiDensityImageSource>
				                        <FileImageSource Density="1" File="logo.png" />
				                        <FileImageSource Density="2" File="logo@2x.png" />
				                        <FileImageSource Density="3" File="logo@4x.png" />
				                    </MultiDensityImageSource>
				                </Image>
				            </Panel>

				            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
				                <Panel Margin="0, 0, 0, 35">
				                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
				                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
				                    </TextInput>
				                </Panel>

				                <Panel Margin="0, 0, 0, 35">
				                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
				                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
				                    </TextInput>
				                </Panel>

				                <Panel Background="Green">
				                    <Text>Panel</Text>
				                </Panel>
				            </StackPanel>

				            <StackPanel Alignment="Bottom">
				                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
				                <Rectangle Width="100%" Height="50" Color="Green">
				                    <Text Alignment="Center" Color="White">Anmelden</Text>
				                </Rectangle>
				            </StackPanel>
				    	</Grid>
				    </ScrollView>
				</WhileWindowSize>
			</WhileWindowLandscape>
        </Panel>
    </DockPanel>

    <WhileKeyboardVisible>
        <Move Target="rect3" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="rect3Img" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut" />
    </WhileKeyboardVisible>
</App>
6

The general best practice is to define the default state, and only describe deviations from it. Think of it this way:

<App>
    <!-- the default layout, in this case it describes what phones in portrait mode see -->
    <Panel ux:Name="rect" Width="120" Height="120" Color="#18f">
        <Text ux:Name="label" Value="phone, portrait" Color="#fff" Alignment="Center" />
    </Panel>

    <!-- for phones -->
    <WhileWindowSize LessThan="667,667">
        <WhileWindowLandscape>
            <Change rect.Width="160" />
            <Change label.Value="phone, landscape" />
        </WhileWindowLandscape>
    </WhileWindowSize>

    <!-- for tablets -->
    <WhileWindowSize GreaterThan="667,667">
        <WhileWindowPortrait>
            <Change rect.Width="160" />
            <Change rect.Height="240" />
            <Change label.Value="tablet, portrait" />
        </WhileWindowPortrait>
        <WhileWindowLandscape>
            <Change rect.Width="240" />
            <Change rect.Height="160" />
            <Change label.Value="tablet, landscape" />
        </WhileWindowLandscape>
    </WhileWindowSize>

</App>
7

Hey Uldis,

i changed my code to the following.
But in the Landscape View i have an extra Scrollview and a Grid Tag the rest is the same.
Can i add these two tags to the default view when WhileWindowLandscape is active?

Or can i make a container e.g. with the name content and include the content container in the default view and the landscape view?

<App Background="Green">
    <DockPanel>
        <StatusBarBackground Dock="Top" Background="White"/>
		<Image ux:Name="rect3Img" Url="http://app.iauftrag.de/res/images/mobile/loginBackground.jpg" Layer="Background" StretchMode="UniformToFill" />

		<!-- Default View -->
		<Panel ux:Name="PortraitContentPanel" Background="#0008">
            <Panel Alignment="TopCenter" Margin=" 0, 100, 0, 0" Width="15%" MaxWidth="116" ux:Name="LogoPanel">
                <Image Width="100%">
                    <MultiDensityImageSource>
                        <FileImageSource Density="1" File="logo.png" />
                        <FileImageSource Density="2" File="logo@2x.png" />
                        <FileImageSource Density="3" File="logo@4x.png" />
                    </MultiDensityImageSource>
                </Image>
            </Panel>

            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
                <Panel Margin="0, 0, 0, 35">
                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
                    </TextInput>
                </Panel>

                <Panel Margin="0, 0, 0, 35">
                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
                    </TextInput>
                </Panel>

                <Panel Background="Green">
                    <Text>Panel</Text>
                </Panel>
            </StackPanel>

            <StackPanel Alignment="Bottom">
                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
                <Rectangle Width="100%" Height="50" Color="Green">
                    <Text Alignment="Center" Color="White">Anmelden</Text>
                </Rectangle>
            </StackPanel>
        </Panel>

        <!-- Smartphone Landscape View -->
		<WhileWindowLandscape>
		    <WhileWindowSize LessThan="1023,99999">
		    	<Change PortraitContentPanel.Visibility="Collapsed"/>
		    	<Panel ux:Name="LandscapeContentPanel" Background="#0008">
			    	<ScrollView>
			    		<Grid Rows="auto, auto, auto">
							<Panel Alignment="TopCenter" Margin=" 0, 50, 0, 50" Width="15%" MaxWidth="116" ux:Name="TestName">
				                <Image Width="100%">
				                    <MultiDensityImageSource>
				                        <FileImageSource Density="1" File="logo.png" />
				                        <FileImageSource Density="2" File="logo@2x.png" />
				                        <FileImageSource Density="3" File="logo@4x.png" />
				                    </MultiDensityImageSource>
				                </Image>
				            </Panel>

				            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0">
				                <Panel Margin="0, 0, 0, 35">
				                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
				                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
				                    </TextInput>
				                </Panel>

				                <Panel Margin="0, 0, 0, 35">
				                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
				                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
				                    </TextInput>
				                </Panel>

				                <Panel Background="Green">
				                    <Text>Panel</Text>
				                </Panel>
				            </StackPanel>

				            <StackPanel Alignment="Bottom">
				                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
				                <Rectangle Width="100%" Height="50" Color="Green">
				                    <Text Alignment="Center" Color="White">Anmelden</Text>
				                </Rectangle>
				            </StackPanel>
				    	</Grid>
				    </ScrollView>
				</Panel>
			</WhileWindowSize>
		</WhileWindowLandscape>
    </DockPanel>

    <!-- Extra Small Smartphone View e.g. iPhone 4, 3 und 2 -->
    <WhileWindowSize LessThan="320,480">
    	<Change LogoPanel.Margin="0, 50, 0, 0"/>
	</WhileWindowSize>

    <WhileKeyboardVisible>
        <Move Target="PortraitContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="LandscapeContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="rect3Img" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut" />
    </WhileKeyboardVisible>
</App>
8

As I see, you’ve already figured that you can toggle Visibility of things, like so: <Change PortraitContentPanel.Visibility="Collapsed"/>

What’s holding you back from putting the ScrollView where you need it with a Collapsed visibility, and only make it visible when you need it?

9

Hey Uldis,

okay i have added the scrollview to the default view end set it to collapsed (for the case i don’t neeed it) but now the problem how can i make the child elements visible when the scrollview (Parent) is collapsed?

The childs elements also collapsed and not visible.
But the child elements need i in all cases.

10

Ah, now I understand what you mean.

In this case, you could change the LayoutMaster on an element that contains the “child elements” you’re referring to.

Although I honestly don’t see why they couldn’t reside in a ScrollView in all cases.

11

Hey Uldis,

i think the scrollview ist not the problem but in one case i need a surrounding grid tag and the content in grid tag is the same as without grid tag.

Okay i try it with the layout Master.

12

Hey Uldis,

i tried it with Layout Master see the following Code but now the Landscape Version smaller than 1023 shows only the background image and not the layout Master what do i wrong?

<App Background="Green">
    <DockPanel>
        <StatusBarBackground Dock="Top" Background="White"/>
		<Image ux:Name="rect3Img" Url="http://app.iauftrag.de/res/images/mobile/loginBackground.jpg" Layer="Background" StretchMode="UniformToFill" />

		<!-- Default View -->
		<Panel ux:Name="PortraitContentPanel" Background="#0008">
            <Panel Alignment="TopCenter" Margin=" 0, 100, 0, 0" Width="15%" MaxWidth="116" ux:Name="LogoPanel">
                <Image Width="100%">
                    <MultiDensityImageSource>
                        <FileImageSource Density="1" File="logo.png" />
                        <FileImageSource Density="2" File="logo@2x.png" />
                        <FileImageSource Density="3" File="logo@4x.png" />
                    </MultiDensityImageSource>
                </Image>
            </Panel>

            <StackPanel Alignment="Center" Width="100%" MaxWidth="550" Margin="50, 0, 50, 0" ux:Name="LoginFields">
                <Panel Margin="0, 0, 0, 35">
                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Email Adresse hier eingeben" InputHint="Email" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
                        <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
                    </TextInput>
                </Panel>

                <Panel Margin="0, 0, 0, 35">
                    <TextInput Padding="0, 0, 0, 10" TextColor="#fff" PlaceholderColor="#fff8" PlaceholderText="Passwort hier eingeben" IsPassword="true" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None">
                         <Rectangle Layer="Background" Height="1" Background="#fff8" Alignment="Bottom"></Rectangle>
                    </TextInput>
                </Panel>

                <Panel Background="Green">
                    <Text>Panel</Text>
                </Panel>
            </StackPanel>

            <StackPanel Alignment="Bottom" ux:Name="LoginFooter">
                <Text Color="White" Alignment="Center" Margin="50">Konto erstellen</Text>
                <Rectangle Width="100%" Height="50" Color="Green">
                    <Text Alignment="Center" Color="White">Anmelden</Text>
                </Rectangle>
            </StackPanel>
        </Panel>

        <!-- Smartphone Landscape View -->
		<WhileWindowLandscape>
		    <WhileWindowSize LessThan="1023,99999">
		    	<Change PortraitContentPanel.Visibility="Collapsed"/>
		    	<Panel ux:Name="LandscapeContentPanel" Background="#0008">
			    	<ScrollView>
			    		<Grid Rows="auto, auto, auto">
							<Panel LayoutMaster="LogoPanel" />
							<StackPanel LayoutMaster="LoginFields" />
							<StackPanel LayoutMaster="LoginFooter" />
				    	</Grid>
				    </ScrollView>
				</Panel>
			</WhileWindowSize>
		</WhileWindowLandscape>
    </DockPanel>

    <!-- Extra Small Smartphone View e.g. iPhone 4, 3 und 2 -->
    <WhileWindowSize LessThan="320,480">
    	<Change LogoPanel.Margin="0, 50, 0, 0"/>
	</WhileWindowSize>

    <WhileKeyboardVisible>
        <Move Target="PortraitContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="LandscapeContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="rect3Img" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut" />
    </WhileKeyboardVisible>
</App>
13

Hey Uldis,

i think i got it.
now i have created components from the parts with the same code.

The Frontend shows expected behavier and i have no duplicated code more in the main.ux but is it a good idear to put equal code in a component?

<App Background="Green">
    <DockPanel>
        <StatusBarBackground Dock="Top" Background="White"/>
		<Image ux:Name="BackgroundImage" Url="http://app.iauftrag.de/res/images/mobile/loginBackground.jpg" Layer="Background" StretchMode="UniformToFill" />

		<!-- Default View -->
		<Panel ux:Name="PortraitContentPanel" Background="#0008">
            <LogoPanel />
            <LoginFields />
            <LoginFooter />
        </Panel>

        <!-- Smartphone Landscape View -->
		<WhileWindowLandscape>
		    <WhileWindowSize LessThan="1023,99999">
		    	<Change PortraitContentPanel.Visibility="Collapsed"/>
		    	<Panel ux:Name="LandscapeContentPanel" Background="#0008">
			    	<ScrollView>
			    		<Grid Rows="auto, auto, auto">
			    			<LogoPanel />
							<LoginFields />
							<LoginFooter />
				    	</Grid>
				    </ScrollView>
				</Panel>
			</WhileWindowSize>
		</WhileWindowLandscape>
    </DockPanel>

    <WhileKeyboardVisible>
        <Move Target="PortraitContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="LandscapeContentPanel" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut"/>
        <Move Target="BackgroundImage" RelativeTo="Keyboard" Y="-1" Duration="0.26" Easing="CubicInOut" />
    </WhileKeyboardVisible>
</App>
14

It is almost never a good idea to duplicate code. You need to find a way to correctly split it in components, and make each component respect the size and orientation of display exactly as you want it.

Meaning, it’s of course okay to have WhileWindowLandscape and other triggers in as many places as you need them; you just should try to avoid duplicating the actual content.

Either way, I believe that the original question on this thread has been answered a long time ago already, and there is no point to continue this discussion here. You need to keep learning how to do layout, and you can post new questions in separate threads as you stumble upon issues that you don’t know how to fix.

15

Hey Uldis,

thanks for help. This Thread can be closed.