Hi
I’m struggling to get this one right. It’s a login view using a grid as layout. In the simulator it’s ok but in the device when the keyboard shows up, all the fields are compacted.
if I don’t include the ClientPanel then it is ok but then the bottom fields are covered by the keyboard.
Can someone suggest me how to fix this layout?
Here’s is the MainView.ux:
<App>
<Page>
<DockPanel>
<StatusBarBackground Dock="Top"/>
<_SignInTopBar/>
<ClientPanel>
<Grid Rows=".8*,.8*,.8*,.8*,1*,1*,1*,1*" Margin="20,0,20,0">
<_TextInput Row="0" Alignment="VerticalCenter"
FontSize="14"
TextWrapping="Wrap" ActionStyle="Next" InputHint="Email"
PlaceholderText="email" PlaceholderColor="#ABABAA"/>
<Grid Row="1" Columns="1*,1*" Alignment="VerticalCenter">
<_TextInput Column="0" ux:Name="textFirstName" AutoCorrectHint="Disabled" AutoCapitalizationHint="None"
FontSize="14" Margin="0,0,5,0"
TextWrapping="Wrap" ActionStyle="Next"
PlaceholderText="First Name" PlaceholderColor="#ABABAA"/>
<_TextInput Column="1"
FontSize="14"
TextWrapping="Wrap" ActionStyle="Next" AutoCorrectHint="Disabled" AutoCapitalizationHint="None"
PlaceholderText="Last Name" PlaceholderColor="#ABABAA"/>
</Grid>
<_TextInput Row="2" Alignment="VerticalCenter"
FontSize="14" IsPassword="true"
TextWrapping="Wrap" ActionStyle="Next"
PlaceholderText="password" PlaceholderColor="#ABABAA"/>
<_TextInput Row="3" Alignment="VerticalCenter"
FontSize="14" IsPassword="true"
TextWrapping="Wrap" ActionStyle="Next"
PlaceholderText="repeat password" PlaceholderColor="#ABABAA"/>
<Grid Row="4" Rows="auto,2*" Margin="0,15,0,0" Alignment="VerticalCenter">
<Text Row="0" Alignment="Left" TextColor="#ABABAA"
FontSize="10" Value="BIRTH DATE"/>
<Grid Columns="1*,1*,1*" Rows="auto,auto" Row="1" Alignment="Top">
<_TextInput Column="0" Row="0" Alignment="Center" TextAlignment="Center"
FontSize="14" MaxLength="2"
TextWrapping="Wrap" ActionStyle="Next" InputHint="Number"
PlaceholderText="DD" PlaceholderColor="#ABABAA"/>
<Text Column="0" Row="1" FontSize="10" Value="DAY" Alignment="Center"/>
<_TextInput Column="1" Row="0" Alignment="Center" TextAlignment="Center"
FontSize="14" MaxLength="2"
TextWrapping="Wrap" ActionStyle="Next" InputHint="Number"
PlaceholderText="MM" PlaceholderColor="#ABABAA"/>
<Text Column="1" Row="1" FontSize="10" Value="MONTH" Alignment="Center"/>
<_TextInput Column="2" Row="0" Alignment="Center" TextAlignment="Center"
FontSize="14" MaxLength="4"
TextWrapping="Wrap" ActionStyle="Next" InputHint="Number"
PlaceholderText="YYYY" PlaceholderColor="#ABABAA"/>
<Text Column="2" Row="1" FontSize="10" Value="YEAR" Alignment="Center"/>
</Grid>
</Grid>
<Grid Row="5" Margin="0,20,0,0" Alignment="VerticalCenter">
<Grid Columns="2*,1*,1*" Rows="1*,2*">
<Text Column="0" Row="0" Alignment="TopLeft"
FontSize="12" Value="GENDER"/>
<Text ux:Name="textM" Column="1" Row="0" Alignment="TopCenter" TextColor="#ABABAA"
FontSize="12" Value="MALE"/>
<Text ux:Name="textF" Column="2" Row="0" Alignment="TopCenter" TextColor="#ABABAA"
FontSize="12" Value="FEMALE"/>
<Circle ux:Name="circleM" Margin="0,5,0,0" Column="1" Row="1"
Alignment="TopCenter" Fill="#ABABAA" Width="16" Height="16">
<Clicked>
<Set circleM.Fill="#0092d0" />
<Set circleF.Fill="#ABABAA" />
<Set textM.TextColor="#0092d0" />
<Set textF.TextColor="#ABABAA" />
</Clicked>
</Circle>
<Circle ux:Name="circleF" Margin="0,5,0,0" Column="2" Row="1"
Alignment="TopCenter" Fill="#ABABAA" Width="16" Height="16">
<Clicked>
<Set circleM.Fill="#ABABAA" />
<Set circleF.Fill="#0092d0" />
<Set textM.TextColor="#ABABAA" />
<Set textF.TextColor="#0092d0" />
</Clicked>
</Circle>
</Grid>
</Grid>
<Grid Row="6" Columns="3*,1*">
<Text Column="0" Alignment="VerticalCenter" TextWrapping="Wrap"
FontSize="12" Value="I AGREE WITH THE TERMS OF SERVICE"/>
<Switch Column="1"/>
</Grid>
<Grid Row="7">
<Button Alignment="TopCenter" Background="#0092d0"
Height="70%" Width="90%">
<Text Alignment="Center" Value="Create account"
FontSize="14"
TextColor="#fff" />
</Button>
</Grid>
</Grid>
</ClientPanel>
</DockPanel>
</Page>
</App>
some components:
<TextInput
ux:Class="_TextInput"
HitTestMode="LocalBoundsAndChildren"
Height="20"
FontSize="14">
<Clicked>
<GiveFocus Target="this" />
</Clicked>
<WhileFocused>
<Rectangle Dock="Bottom" Fill="#5184e5" Height="1" />
</WhileFocused>
<WhileNotFocused>
<Rectangle Dock="Bottom" Fill="#ddd" Height="1" />
</WhileNotFocused>
</TextInput>
<StackPanel ux:Class="_SignInTopBar" Dock="Top" Background="#0092d0">
<Grid Columns="auto,1*,auto">
<Panel Column="0" Margin="7,5,5,5" Height="32" Width="32"
HitTestMode="LocalBounds">
<Rectangle
Height="2" Width="12" Fill="#fff">
<Translation Y="-4" />
<Rotation Degrees="-45" />
</Rectangle>
<Rectangle
Height="2" Width="12" Fill="#fff">
<Translation Y="4" />
<Rotation Degrees="45" />
</Rectangle>
</Panel>
<TextBlock
Column="1" Alignment="VerticalCenter" Value="Create account"
TextAlignment="Center" FontSize="16" TextColor="#fff"/>
<Panel Column="2" Margin="7,5,5,5" Height="32" Width="32"
HitTestMode="LocalBounds" Visibility="Hidden">
</Panel>
</Grid>
</StackPanel>