如何对 XAML Windows 10 中的所有网格使用自适应 UI？

Question

我正在将我的 Windows Phone 8 应用程序迁移到 Windows 10，我遇到了新术语 Adaptive UI，发现它非常 useful.But 当我为每个网格应用自适应 UI 时，只有第一个网格的 UI 根据屏幕尺寸发生变化，而不是 others.I 添加以下代码来实现。请指出我做错了什么？

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" MinHeight="517" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="2">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LoginImage.Height" Value="60"/>
                        <Setter Target="LoginImage.Width" Value="60"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LoginImage.Height" Value="90"/>
                        <Setter Target="LoginImage.Width" Value="80"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".15*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="/Images/login.png"
               Grid.Column="0"
               x:Name="LoginImage"
               />
        <Grid Grid.Column="1"
              HorizontalAlignment="Left"
              VerticalAlignment="Center">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Headertxt1.FontSize" Value="25"/>
                            <Setter Target="Headertxt2.FontSize" Value="20"/>
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="720"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Headertxt1.FontSize" Value="30"/>
                            <Setter Target="Headertxt2.FontSize" Value="23"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>
            <TextBlock Text="Login"
                       Name="Headertxt1"
                       Foreground="{StaticResource AppFontColor}"
                       Grid.Row="0"
                       FontWeight="Bold" />

            <TextBlock 
                       Name="Headertxt2"
                       Foreground="{StaticResource AppFontColor}"
                       Grid.Row="1"
                       TextWrapping="Wrap"/>
        </Grid>
    </Grid>

    <Grid Grid.Row="3" Margin="0,25,0,0">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmailTxtBox.Height" Value="30"/>
                        <Setter Target="PwdBox.Height" Value="30"/>
                        <Setter Target="LoginButton.FontSize" Value="25"/>
                        <Setter Target="ForgotPwdButton.FontSize" Value="20"/>

                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="EmailTxtBox.Height" Value="50"/>
                        <Setter Target="PwdBox.Height" Value="50"/>
                        <Setter Target="LoginButton.FontSize" Value="38"/>
                        <Setter Target="ForgotPwdButton.FontSize" Value="24"/>

                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBox 
                 Style="{StaticResource MediumSizeTextBoxStyle}"
                 Grid.Row="0"
                 Name="EmailTxtBox"
                 Height="50"
                 InputScope="EmailSmtpAddress"                                                                                                 
                 Margin="12,0,12,10"/>



        <PasswordBox Name="PwdBox"
                     Grid.Row="1"
                     Style="{StaticResource MediumSizePwdBoxStyle}"
                     Margin="12,10,12,4"
                     Height="50"/>


        <Button Content="Login"
                Grid.Row="2"
                Margin="12,20,12,0"
                x:Name="LoginButton"
                BorderThickness="0"
                Foreground="Black"
                Background="White"
                HorizontalAlignment="Stretch"/>

        <Button Content="Forgot Password"
                Grid.Row="3"
                Foreground="{StaticResource AppFontColor}"
                FontSize="24"
                Margin="0,10,0,10"
                HorizontalAlignment="Center"
                Name="ForgotPwdButton"
                BorderThickness="0"
                />
    </Grid>

    <Image x:Name="Header_logo"
           Source="/Images/rbkc_logo.png" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center"
           Visibility="Collapsed"
           Margin="0,10,0,10"
           Width="480" 
           Height="121" />

    <Button x:Name="backButton" Margin="39,59,39,0"
                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                    VerticalAlignment="Top"
                    AutomationProperties.Name="Back"
                  />

</Grid>

Answer 1

Control authors or app developers add VisualStateGroup object elements to the root element of a control template definition in XAML, using the VisualStateManager.VisualStateGroups attached property. Within a VisualStateGroup element, each VisualState represents a discrete visual state of a control. Each VisualState has a name that is representative of a UI state that can be changed by the user, or changed by control logic. A VisualState consists mainly of a Storyboard. This Storyboard targets individual dependency property values that should be applied whenever the control is in that visual state. For more info on how to write visual states in XAML, including example code, see Storyboarded animations for visual states.

有关详细信息，请参阅 VisualStateManager。

在一个不是页面根元素的控件中添加 VisualStateManager.VisualStateGroups 不起作用。您可以将 VisualStateManager.VisualStateGroups 添加到页面的根网格。并将所有 <VisualState> 添加到 <VisualStateGroup>。

对了，你误会了。第一个Grid的UI是根据屏幕大小变化的，因为Image的Height和Width没有明确指定，Stretch的默认值是Uniform .它会改变高度和宽度以适应Grid。所以 "Adaptive UI" 在您的场景中不起作用。

例如：

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LoginImage.Height" Value="60" />
                    <Setter Target="LoginImage.Width" Value="60" />
                    <Setter Target="Headertxt1.FontSize" Value="25" />
                    <Setter Target="Headertxt2.FontSize" Value="20" />
                    <Setter Target="EmailTxtBox.Height" Value="30" />
                    <Setter Target="PwdBox.Height" Value="30" />
                    <Setter Target="LoginButton.FontSize" Value="25" />
                    <Setter Target="ForgotPwdButton.FontSize" Value="20" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LoginImage.Height" Value="90" />
                    <Setter Target="LoginImage.Width" Value="80" />
                    <Setter Target="Headertxt1.FontSize" Value="30" />
                    <Setter Target="Headertxt2.FontSize" Value="23" />
                    <Setter Target="EmailTxtBox.Height" Value="50" />
                    <Setter Target="PwdBox.Height" Value="50" />
                    <Setter Target="LoginButton.FontSize" Value="38" />
                    <Setter Target="ForgotPwdButton.FontSize" Value="24" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" MinHeight="517" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="2">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".15*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="/Images/login.png"
           Grid.Column="0"
           x:Name="LoginImage" />
        <Grid Grid.Column="1"
          HorizontalAlignment="Left"
          VerticalAlignment="Center">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Text="Login"
                   Name="Headertxt1"
                   Foreground="{StaticResource AppFontColor}"
                   Grid.Row="0"
                   FontWeight="Bold" />

            <TextBlock
                   Name="Headertxt2"
                   Foreground="{StaticResource AppFontColor}"
                   Grid.Row="1"
                   TextWrapping="Wrap" />
        </Grid>
    </Grid>

    <Grid Grid.Row="3" Margin="0,25,0,0">

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

        <TextBox
             Style="{StaticResource MediumSizeTextBoxStyle}"
             Grid.Row="0"
             Name="EmailTxtBox"
             Height="50"
             InputScope="EmailSmtpAddress"
             Margin="12,0,12,10" />

        <PasswordBox Name="PwdBox"
                 Grid.Row="1"
                 Style="{StaticResource MediumSizePwdBoxStyle}"
                 Margin="12,10,12,4"
                 Height="50" />

        <Button Content="Login"
            Grid.Row="2"
            Margin="12,20,12,0"
            x:Name="LoginButton"
            BorderThickness="0"
            Foreground="Black"
            Background="White"
            HorizontalAlignment="Stretch" />

        <Button Content="Forgot Password"
            Grid.Row="3"
            Foreground="{StaticResource AppFontColor}"
            FontSize="24"
            Margin="0,10,0,10"
            HorizontalAlignment="Center"
            Name="ForgotPwdButton"
            BorderThickness="0" />
    </Grid>

    <Image x:Name="Header_logo"
       Source="/Images/rbkc_logo.png"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Visibility="Collapsed"
       Margin="0,10,0,10"
       Width="480"
       Height="121" />

    <Button x:Name="backButton" Margin="39,59,39,0"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back" />
</Grid>

如何对 XAML Windows 10 中的所有网格使用自适应 UI？

How to use Adaptive UI for all Grid in XAML Windows 10?

c#

xaml

windows-10-universal