堆棧內存溢出
  簡體   English   中英

如何在XAML Windows 10中為所有網格使用自適應UI？

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

 原文  2016-03-14 17:11:31  3   1    c#/ xaml/ windows-10-universal

問題描述

我將Windows Phone 8 App遷移到Windows 10時遇到了新的術語Adaptive UI，發現它非常有用。但是當我為每個Grid應用Adaptive UI時，只有第一個Grid的UI會根據屏幕大小而變化，而不會更改其他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>

1 個解決方案

解決方案1
 1 已采納  2016-03-15 10:09:24

控件作者或應用程序開發人員使用VisualStateManager.VisualStateGroups附加屬性將VisualStateGroup對象元素添加到XAML中控件模板定義的根元素。 在VisualStateGroup元素內，每個VisualState表示控件的離散視覺狀態。 每個VisualState都有一個代表UI狀態的名稱，該名稱可以由用戶更改，也可以由控制邏輯更改。 VisualState主要由一個Storyboard組成 。 此情節提要板針對單個依賴項屬性值，只要控件處於該可視狀態，就應該應用這些依賴項屬性值。 有關如何在XAML中編寫視覺狀態（包括示例代碼）的詳細信息，請參閱情節提要的故事板動畫 。

有關更多信息，請參見VisualStateManager 。

在不是頁面根元素的一個控件中添加VisualStateManager.VisualStateGroups無效。 您可以將VisualStateManager.VisualStateGroups添加到頁面的根Grid。 並將所有<VisualState>添加到<VisualStateGroup> 。

順便說一句，你有一個誤解。 由於未明確指定“ Image的Height和“ Width ”，因此第一個網格的UI會根據屏幕大小而變化，“ Stretch的默認值為“均勻”。 它將更改高度和寬度以適應Grid 。 因此，“自適應用戶界面”不適用於您的方案。

例如： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在Windows 10中制作自適應UI？ 如何使用C＃通過XAML網格設置UI 如何在 WPF 和 XAML 群島中使用 Windows 10 樣式資源 Windows 10 XAML上的MediaPlayer錯誤&#39;Windows.Media.Streaming.Adaptive.AdaptiveMediaSource&#39;未注冊 如何在 Windows 10 uwp 中禁用 xaml 優化？ 無法將類型為“Windows.UI.Xaml.Shapes.Polyline”的 object 轉換為類型“Windows.UI.Xaml.IUIElement10” 無法將類型為“ Windows.UI.Xaml.Controls.Grid”的對象轉換為類型為“ Windows.UI.Xaml.Controls.ListView”的對象 如何在 UWP 中使用 Windows.UI.Xaml.Controls.Symbol 作為自定義指針 Xamarin形成如何在Xaml中使用自定義ui 如何在XAML UI中更新網格？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM