Universal Windows 10 Adaptive layout issue

Question

Here is the code for UWP (Windows 10 XAM-C#) seems to be OK but not working when window is resized for Phone and TabletPC. Inside the grid have a relative panel that stretches. What is wrong? Need help and thanks very much.

  <Grid Background="Black">

  <Grid.RowDefinitions>

   <RowDefinition Height="Auto" />

   <RowDefinition Height="*" />



     </Grid.RowDefinitions>

       <Grid Name="TitleGrid" Background="Green" Grid.Row="0" >

     <VisualStateManager.VisualStateGroups>

      <VisualStateGroup>

       <VisualState x:Name="Phone" >

        <VisualState.StateTriggers>

        <AdaptiveTrigger MinWindowWidth="0" />

            </VisualState.StateTriggers>

       <VisualState.Setters>

         <Setter Target="CityName.FontSize" Value="14 " />

         <Setter Target="TitleItem.FontSize" Value="14" />

         <Setter Target="CalButton.Width" Value="100" />

    </VisualState.Setters>

   </VisualState>

  </VisualStateGroup>

  <VisualStateGroup>

     <VisualState x:Name="Tablet" >

       <VisualState.StateTriggers>

            <AdaptiveTrigger MinWindowWidth="600" />

      </VisualState.StateTriggers>

    <VisualState.Setters>

           <Setter Target="CityName.FontSize" Value="20" />

           <Setter Target="TitleItem.FontSize" Value="20" />

           <Setter Target="CalButton.Width" Value="150" />

    </VisualState.Setters>

   </VisualState>

 </VisualStateGroup>

 </VisualStateManager.VisualStateGroups>

 <RelativePanel Grid.Row="0" HorizontalAlignment="Stretch">

  <Button Name="HamburgerButton" RelativePanel.AlignLeftWithPanel="True" 

   FontFamily="Segoe MDL2 Assets" 

   Content="&#xE700;" 

   Width="40" 

   Height="40" 

   HorizontalAlignment="Center"

   Foreground="White"

   Click="HamburgerButton_Click" Margin="0,10,0,0" />

  <Button Width="40" Height="40" Name="BackButton" FontFamily="Segoe MDL2    Assets"  Content="&#xE0C4;" RelativePanel.RightOf="HamburgerButton" VerticalAlignment="Center" Click="BackButton_Click" />

  <TextBlock Name="CityName"  Text="NC-Raleigh" Foreground="White"  FontWeight="Bold" RelativePanel.RightOf="BackButton" Margin="10,15,0,0"  />

 <TextBlock Name="TitleItem" Text="ShipList" Foreground="White" FontWeight="Bold" Margin="10,15,0,0" RelativePanel.RightOf="CityName" />

  <CalendarDatePicker Name="CalButton" RelativePanel.RightOf="TitleItem"  Margin="10,15,0,0" PlaceholderText="Today"  />

</RelativePanel>

</Grid>

Answer 1

First your XAML is malformed, you had started Grid tag twice but didn't closed it at the end.

Second your visual states were defined in separate groups whereas they should be in one group as we have only two different states.

Kindly find the updated XAML below

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup>
                <VisualState x:Name="Phone" >

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="1" />

                    </VisualState.StateTriggers>

                    <VisualState.Setters>

                        <Setter Target="CityName.FontSize" Value="14 " />

                        <Setter Target="TitleItem.FontSize" Value="14" />

                        <Setter Target="CalButton.Width" Value="100" />

                    </VisualState.Setters>

                </VisualState>
                <VisualState x:Name="Tablet" >

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="600" />

                    </VisualState.StateTriggers>

                    <VisualState.Setters>

                        <Setter Target="CityName.FontSize" Value="20" />

                        <Setter Target="TitleItem.FontSize" Value="20" />

                        <Setter Target="CalButton.Width" Value="150" />

                    </VisualState.Setters>

                </VisualState>
            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Grid x:Name="TitleGrid" Background="Green" Grid.Row="0" >


            <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <RelativePanel Grid.Row="0" HorizontalAlignment="Stretch">

                    <Button x:Name="HamburgerButton" RelativePanel.AlignLeftWithPanel="True" 

                        FontFamily="Segoe MDL2 Assets" 

                        Content="&#xE700;" 

                        Width="40" 

                        Height="40" 

                        HorizontalAlignment="Center"

                        Foreground="White"

                        Click="HamburgerButton_Click" Margin="0,10,0,0" />

                    <Button Width="40" Height="40" x:Name="BackButton" FontFamily="Segoe MDL2    Assets"  Content="&#xE0C4;" RelativePanel.RightOf="HamburgerButton" VerticalAlignment="Center" Click="BackButton_Click" />

                    <TextBlock x:Name="CityName"  Text="NC-Raleigh" Foreground="White"  FontWeight="Bold" RelativePanel.RightOf="BackButton" Margin="10,15,0,0"  />

                    <TextBlock x:Name="TitleItem" Text="ShipList" Foreground="White" FontWeight="Bold" Margin="10,15,0,0" RelativePanel.RightOf="CityName" />

                    <CalendarDatePicker x:Name="CalButton" RelativePanel.RightOf="TitleItem"  Margin="10,15,0,0" PlaceholderText="Today"  />

                </RelativePanel>

            </Grid>

    </Grid>