通用Windows 10自适应布局问题

Question

这是UWP (Windows10XAM-C#)的代码似乎是OK的，但不工作时，窗口大小调整为手机和TabletPC。在栅格内部有一个相对面板，它可以伸展。怎么啦？非常需要帮助和感谢。

  <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

首先，您的XAML格式不正确，您已经启动了两次Grid标签，但最后没有关闭它。

其次，你的视觉状态是在不同的组中定义的，而它们应该在一个组中，因为我们只有两个不同的状态。

请在下面找到更新后的XAML

<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>