通用Windows 10自适应布局问题

本文关键字：布局 问题 自适应 Windows 通用 | 更新日期: 2023-09-27 18:20:17

以下是UWP（Windows 10 XAM-C#）的代码，当为Phone和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>

通用Windows 10自适应布局问题

首先，您的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>
相关文章：