Question

我正在将Windows Phone 8应用程序迁移到Windows 10，我遇到了新术语Adaptive UI，发现它非常有用。但是当我为每个Grid应用自适应UI时，只有第一个Grid的UI根据屏幕大小而变化，而不是其他。我添加了以下代码来实现这一目标。请说明我做错了什么？

<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

控件作者或应用程序开发人员使用VisualStateGroup附加属性将VisualStateManager.VisualStateGroups个对象元素添加到XAML中控件模板定义的根元素中。在 VisualStateGroup 元素中，每个VisualState表示控件的离散可视状态。每个 VisualState 都有一个代表UI状态的名称，可以由用户更改或由控制逻辑更改。 VisualState 主要由Storyboard组成。此 Storyboard 目标是在控件处于该可视状态时应应用的各个依赖项属性值。有关如何在XAML中编写可视状态的更多信息，包括示例代码，请参阅Storyboarded animations for visual states。

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

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

顺便说一句，你有一个误解。第一个Grid的UI根据屏幕大小而变化，因为未明确指定Height的{{1}}和Width，默认值Image为Uniform。它会将高度和宽度更改为自适应Stretch。因此，“自适应UI”在您的方案中不起作用。

例如：

Grid

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

1 个答案: