用于 UI 响应的 VisualStateManager 在 UWP 中不起作用 [英] VisualStateManager for UI Responsive is not working in UWP

查看：25
本文介绍了用于 UI 响应的 VisualStateManager 在 UWP 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的 uwp 桌面应用程序中.我已经为标题创建了一个用户控件.对于响应式 UI，我正在使用 VisualStateManager 但是当我调整页面大小时它不起作用.我想在调整页面大小时继续将右侧控件向左移动.此代码在某些情况下工作.

我想在调整窗口大小时减小中间空白区域的大小.提前致谢:) 

<Setter Target = "CTwo.Width" Value = "60*"/><Setter Target = "CThree.Width" Value = "250*"/><Setter Target = "CFour.Width" Value = "16*"/><Setter Target = "CFive.Width" Value = "*"/><Setter Target = "CSix.Width" Value = "23*"/><Setter Target = "CSeven.Width" Value = ""/><Setter Target = "CEight.Width" Value = "8*"/><Setter Target = "CNine.Width" Value = ""/><Setter Target = "CTen.Width" Value = "4*"/><Setter Target = "CEeleven.Width" Value = "25*"/></VisualState.Setters></VisualState><视觉状态><VisualState.StateTriggers><!--当窗口出现时触发的VisualState宽度是 >=720 有效像素.--><AdaptiveTrigger MinWindowWidth = "500"/></VisualState.StateTriggers><VisualState.Setters><!--<Setter Target = "Parent.Orientation" Value = "Horizo​​ntal"/>--><Setter Target = "Cone.Width" Value = "Auto"/><Setter Target = "CTwo.Width" Value = "Auto"/><Setter Target = "CThree.Width" Value = "Auto"/><Setter Target = "CFour.Width" Value = "Auto"/><Setter Target = "CFive.Width" Value = "Auto"/><Setter Target = "CSix.Width" Value = "Auto"/><Setter Target = "CSeven.Width" Value = ""/><Setter Target = "CEight.Width" Value = "Auto"/><Setter Target = "CNine.Width" Value = ""/><Setter Target = "CTen.Width" Value = "Auto"/><Setter Target = "CEeleven.Width" Value = "Auto"/></VisualState.Setters></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Grid Name="Parent" BorderBrush="Silver" BorderThickness="0 0 1 1" ><Grid.RowDefinitions><RowDefinition Height="5*"/><RowDefinition Height="5*"/><RowDefinition Height="5*"/><RowDefinition Height="5*"/><RowDefinition Height="7*"/><RowDefinition Height="3*"/><RowDefinition Height="15*"/><RowDefinition Height="4*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition x:Name="Cone" Width="10*"/><ColumnDefinition x:Name="CTwo" Width="60*"/><ColumnDefinition x:Name="CThree" Width="250*"/><ColumnDefinition x:Name="CFour" Width="16*"/><ColumnDefinition x:Name="CFive" Width="*"/><ColumnDefinition x:Name="CSix" Width="23*"/><ColumnDefinition x:Name="CSeven"/><ColumnDefinition x:Name="CEight" Width="8*"/><ColumnDefinition x:Name="CNine"/><ColumnDefinition x:Name="CTen" Width="4*"/><ColumnDefinition x:Name="Celeven" Width="25*"/></Grid.ColumnDefinitions><Image Source="Application_Images\circle.png" Stretch="Uniform" Grid.RowSpan="6" Grid.Column="1" Margin="0,0,9,0" Horizo​​ntalAlignment="Stretch" Grid.Row="1" VerticalAlignment="拉伸"/><Image Source="Application_Images\circle.png" Stretch="Fill" RenderTransformOrigin="-0.057,0.714" Grid.Column="7" Grid.Row="2" Grid.RowSpan="4" Margin="0,3,0,2" Grid.ColumnSpan="2" Horizo​​ntalAlignment="Stretch" VerticalAlignment="Stretch"/><TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" Grid.Column="5" Margin="3,3,0,0" Grid.RowSpan="3" Grid.Row="2" FontWeight="Bold" Horizo​​ntalAlignment="Stretch" VerticalAlignment="Stretch"/><TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" Grid.Column="5" Margin="3,1,0,8" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Grid.RowSpan="3" Horizo​​ntalAlignment="Stretch" ><TextBlock.RenderTransform><CompositeTransform ScaleY="1"/></TextBlock.RenderTransform></TextBlock><Button Background="Transparent" Horizo​​ntalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="9" Margin="0,0,3,6" RenderTransformOrigin="0.5,0.5" Grid.Row="4"宽度=6"高度=5"><Button.RenderTransform><CompositeTransform ScaleX="1" ScaleY="1"/></Button.RenderTransform><按钮.模板><控制模板><Image Stretch="Fill" Source="Application_Images\circle.png"/></控制模板></Button.Template><!--<Image Source="dropdown.png" Margin="9,8,0,4"/>--><按钮.弹出><MenuFlyout x:Name="设置"><MenuFlyoutItem Text = "个人资料"/><MenuFlyoutItem Text = "退出"/></MenuFlyout></Button.Flyout></按钮><Image ToolTipService.ToolTip="Dashboard" Source="Application_Images\circle.png" Stretch="Uniform" Grid.Column="3" Grid.Row="3" Grid.RowSpan="3" Margin="1,0,0,0" VerticalAlignment="拉伸"/><StackPanel Background="#E1E1E1" Grid.Column="4" Horizo​​ntalAlignment="Center" Margin="0,1,0,13" Width="1" Grid.RowSpan="5" Grid.Row="2"/></网格></网格></用户控件>

解决方案

复杂的网格布局可能会令人困惑.我根据应用的实际显示简化了你的布局，拉近了logo和账号的距离.

<!-- <VisualStateManager.VisualStateGroups><VisualStateGroup><视觉状态><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth="500"/></VisualState.StateTriggers><VisualState.Setters><Setter Target="TitleColumn.Width" Value="Auto"/><Setter Target="HolderColumn1.Width" Value="Auto"/><Setter Target="HolderColumn2.Width" Value="Auto"/></VisualState.Setters></VisualState><视觉状态><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth="750"/></VisualState.StateTriggers><VisualState.Setters><Setter Target="TitleColumn.Width" Value="20*"/><Setter Target="HolderColumn1.Width" Value="*"/><Setter Target="HolderColumn2.Width" Value="*"/></VisualState.Setters></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups>--><Grid x:Name="p" BorderBrush="Silver" BorderThickness="0,0,1,1"><Grid.ColumnDefinitions><ColumnDefinition Width="*" x:Name="HolderColumn1"/><ColumnDefinition Width="20*" x:Name="TitleColumn"/><ColumnDefinition Width="Auto" x:Name="AccountColumn"/><ColumnDefinition Width="*" x:Name="HolderColumn2"/></Grid.ColumnDefinitions><StackPanel Orientation="水平" Grid.Column="1"><Image Source="Application_Images\circle.png" Stretch="Uniform" Margin="0,0,9,0" Horizo​​ntalAlignment="Left" VerticalAlignment="Center"/><Image ToolTipService.ToolTip="Dashboard" VerticalAlignment="Center" Source="Application_Images\circle.png" Stretch="Uniform" Horizo​​ntalAlignment="Left" Margin="5,0,0,0"/></StackPanel><StackPanel Grid.Column="2" BorderBrush="Silver" VerticalAlignment="Center" BorderThickness="1,0,0,0" Margin="15,0,0,0" Padding="15,0,0,0"><网格><Grid.ColumnDefinitions><ColumnDefinition Width="自动"/><ColumnDefinition Width="自动"/><ColumnDefinition Width="自动"/></Grid.ColumnDefinitions><StackPanel VerticalAlignment="Center"><TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" FontWeight="Bold"/><TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" ><TextBlock.RenderTransform><CompositeTransform ScaleY="1"/></TextBlock.RenderTransform></TextBlock></StackPanel><Image Source="Application_Images\circle.png" Height="30" Stretch="Uniform" RenderTransformOrigin="-0.057,0.714" Grid.Column="1" Margin="10,3,10,2" VerticalAlignment=中心"/><Button Background="Transparent" Grid.Column="2" Margin="0,0,3,6" Height="5" RenderTransformOrigin="0.5,0.5" ><Button.RenderTransform><CompositeTransform ScaleX="1" ScaleY="1"/></Button.RenderTransform><按钮.模板><控制模板><Image Stretch="Fill" Source="Application_Images\circle.png"/></控制模板></Button.Template><按钮.弹出><MenuFlyout x:Name="设置"><MenuFlyoutItem Text = "个人资料"/><MenuFlyoutItem Text = "退出"/></MenuFlyout></Button.Flyout></按钮></网格></StackPanel></网格></网格>

这是什么显示:

01

更新

在 Grid 行/列定义中，* 代表剩余空间.但是，如果定义中有很多*，则意味着这些空间是按比例分配的.例如:

<ColumnDefinition Width="*"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions>

表示第二列是第一列宽度的两倍.

而Auto表示宽度或高度随着内容的变化而变化.

在我给出的布局中，TitleColumn与HolderColumn的比例为20:1，相当于一个动态的Padding，即不是功能性的.您也可以将其替换为 Grid 的 Padding.

此时AccountColumn的宽度由内容决定，剩余空间全部被TitleColumn占用.随着窗口宽度的变化，控件之间的距离按比例变化.这就是自适应的原因.

最好的问候.

in my uwp desktop application. I have crated one user control for header. for responsive UI i am using the VisualStateManager But its not working when i am resizing the page.i want to keep moving right hand side controls to left when i am resizing the page.this code working in some situation.

I want to reduce the middle blank space size when i am resize the window. thanks in advance :) 

<UserControl
x:Class="UWPUIResponsive.UC_Header"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:forms="using:Xamarin.Forms"
mc:Ignorable="d"
d:DesignWidth="400" Height="50" BorderBrush="Silver" BorderThickness="0 0 1 1"  >

<Grid >
    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState>

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "720" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
                    <Setter Target = "CThree.Width" Value = "Auto" />
                    <Setter Target = "CFour.Width" Value = "Auto" />
                    <Setter Target = "CTen.Width" Value = "Auto" />
                    <Setter Target = "CThree.Width" Value = "Auto" />
                    <Setter Target = "CEight.Width" Value = "Auto" />
                    <Setter Target = "CSix.Width" Value = "Auto" />
                </VisualState.Setters>

            </VisualState>
            <VisualState>

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "1250" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
                    <Setter Target = "Cone.Width" Value = "10*" />
                    <Setter Target = "CTwo.Width" Value = "60*" />
                    <Setter Target = "CThree.Width" Value = "250*" />
                    <Setter Target = "CFour.Width" Value = "16*" />
                    <Setter Target = "CFive.Width" Value = "*" />
                    <Setter Target = "CSix.Width" Value = "23*" />

                    <Setter Target = "CSeven.Width" Value = "" />
                    <Setter Target = "CEight.Width" Value = "8*" />
                    <Setter Target = "CNine.Width" Value = "" />
                    <Setter Target = "CTen.Width" Value = "4*" />
                    <Setter Target = "CEleven.Width" Value = "25*" />


                </VisualState.Setters>

            </VisualState>


            <VisualState>

                <VisualState.StateTriggers>
                     <!--VisualState to be triggered when window 
                 width is >=720 effective pixels.--> 
                    <AdaptiveTrigger MinWindowWidth = "500" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
                    <Setter Target = "Cone.Width" Value = "Auto" />
                    <Setter Target = "CTwo.Width" Value = "Auto" />

                    <Setter Target = "CThree.Width" Value = "Auto" />
                    <Setter Target = "CFour.Width" Value = "Auto" />
                    <Setter Target = "CFive.Width" Value = "Auto" />
                    <Setter Target = "CSix.Width" Value = "Auto" />

                    <Setter Target = "CSeven.Width" Value = "" />
                    <Setter Target = "CEight.Width" Value = "Auto" />
                    <Setter Target = "CNine.Width" Value = "" />
                    <Setter Target = "CTen.Width" Value = "Auto" />
                    <Setter Target = "CEleven.Width" Value = "Auto" />
                </VisualState.Setters>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <Grid Name="Parent"  BorderBrush="Silver"  BorderThickness="0 0 1 1"  >
    <Grid.RowDefinitions>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="7*"/>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="15*"/>
        <RowDefinition Height="4*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Cone" Width="10*"/>
            <ColumnDefinition x:Name="CTwo" Width="60*"/>
            <ColumnDefinition x:Name="CThree" Width="250*"/>
            <ColumnDefinition x:Name="CFour" Width="16*"/>
            <ColumnDefinition x:Name="CFive" Width="*"/>
            <ColumnDefinition x:Name="CSix" Width="23*"/>
            <ColumnDefinition x:Name="CSeven"/>
            <ColumnDefinition x:Name="CEight"  Width="8*"/>
            <ColumnDefinition x:Name="CNine"/>
            <ColumnDefinition x:Name="CTen" Width="4*"/>
            <ColumnDefinition x:Name="CEleven" Width="25*"/>


        </Grid.ColumnDefinitions>



    <Image  Source="Application_Images\circle.png"  Stretch="Uniform"       Grid.RowSpan="6" Grid.Column="1" Margin="0,0,9,0" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"/>

    <Image Source="Application_Images\circle.png"  Stretch="Fill" RenderTransformOrigin="-0.057,0.714" Grid.Column="7" Grid.Row="2" Grid.RowSpan="4" Margin="0,3,0,2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

    <TextBlock  FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" Grid.Column="5" Margin="3,3,0,0" Grid.RowSpan="3" Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <TextBlock FontSize="13" Text=" Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" Grid.Column="5" Margin="3,1,0,8" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Grid.RowSpan="3" HorizontalAlignment="Stretch" >
        <TextBlock.RenderTransform>
            <CompositeTransform ScaleY="1"/>
        </TextBlock.RenderTransform>
    </TextBlock>

    <Button  Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="9" Margin="0,0,3,6" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Width="6" Height="5">
        <Button.RenderTransform>
            <CompositeTransform ScaleX="1" ScaleY="1"/>
        </Button.RenderTransform>
        <Button.Template>
            <ControlTemplate>
                <Image Stretch="Fill"     Source="Application_Images\circle.png"/>
            </ControlTemplate>
        </Button.Template>
        <!--<Image Source="dropdown.png" Margin="9,8,0,4"  />-->
        <Button.Flyout>
            <MenuFlyout x:Name="settings">
                <MenuFlyoutItem Text = "Profile" />
                <MenuFlyoutItem Text = "Sign Out"  />
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <Image ToolTipService.ToolTip="Dashboard" Source="Application_Images\circle.png" Stretch="Uniform"   Grid.Column="3" Grid.Row="3"  Grid.RowSpan="3" Margin="1,0,0,0" VerticalAlignment="Stretch"/>
    <StackPanel Background="#E1E1E1" Grid.Column="4" HorizontalAlignment="Center" Margin="0,1,0,13" Width="1" Grid.RowSpan="5" Grid.Row="2"    />

</Grid>
</Grid>
</UserControl>

解决方案

The complex Grid layout can be confusing. I simplified your layout based on the actual display of the application, and narrowed the distance between the logo and the account.

<Grid>
   <!-- <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TitleColumn.Width" Value="Auto"/>
                    <Setter Target="HolderColumn1.Width" Value="Auto"/>
                    <Setter Target="HolderColumn2.Width" Value="Auto"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="750" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TitleColumn.Width" Value="20*"/>
                    <Setter Target="HolderColumn1.Width" Value="*"/>
                    <Setter Target="HolderColumn2.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>-->

    <Grid x:Name="p" BorderBrush="Silver" BorderThickness="0,0,1,1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" x:Name="HolderColumn1"/>
            <ColumnDefinition Width="20*" x:Name="TitleColumn"/>
            <ColumnDefinition Width="Auto" x:Name="AccountColumn"/>
            <ColumnDefinition Width="*" x:Name="HolderColumn2"/>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Column="1">
            <Image Source="Application_Images\circle.png"  Stretch="Uniform" Margin="0,0,9,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Image ToolTipService.ToolTip="Dashboard" VerticalAlignment="Center" Source="Application_Images\circle.png" Stretch="Uniform" HorizontalAlignment="Left" Margin="5,0,0,0"/>
        </StackPanel>

        <StackPanel Grid.Column="2" BorderBrush="Silver" VerticalAlignment="Center" BorderThickness="1,0,0,0" Margin="15,0,0,0" Padding="15,0,0,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel VerticalAlignment="Center">
                    <TextBlock  FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" FontWeight="Bold" />
                    <TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" >
                        <TextBlock.RenderTransform>
                            <CompositeTransform ScaleY="1"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </StackPanel>
                <Image Source="Application_Images\circle.png" Height="30" Stretch="Uniform" RenderTransformOrigin="-0.057,0.714" Grid.Column="1" Margin="10,3,10,2" VerticalAlignment="Center" />
                <Button  Background="Transparent" Grid.Column="2" Margin="0,0,3,6" Height="5" RenderTransformOrigin="0.5,0.5" >
                    <Button.RenderTransform>
                        <CompositeTransform ScaleX="1" ScaleY="1"/>
                    </Button.RenderTransform>
                    <Button.Template>
                        <ControlTemplate>
                            <Image Stretch="Fill" Source="Application_Images\circle.png"/>
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Flyout>
                        <MenuFlyout x:Name="settings">
                            <MenuFlyoutItem Text = "Profile" />
                            <MenuFlyoutItem Text = "Sign Out"  />
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
            </Grid>
        </StackPanel>
    </Grid>    
</Grid>

Here is what display:

Update

In the Grid row/column definition, * represents the space left. However, if the definitions have many *, it means that these spaces are allocated proportionally. such as:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

Means the second column is twice the width of the first column.

And Auto means that the width or height changes as the content changes.

In the layout I gave, the ratio of TitleColumn to HolderColumn is 20:1, which is equivalent to a dynamic Padding, which is not functional. You can also replace it with Grid's Padding.

At this time, the width of the AccountColumn is determined by the content, and all the remaining space is occupied by the TitleColumn. As the width of the window changes, the distance between the controls changes proportionally. This is the reason for self-adaptation.

Best regards.

这篇关于用于 UI 响应的 VisualStateManager 在 UWP 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆