Responsive design UWP/WinRT：如何使用VisualState触发器更改特定类型的所有控件的样式？

在我的UWP应用程序中，我有一系列的

AppBarButtons

，由

AppBarSeparator

分隔。当窗口大小降到某个值以下时，我想隐藏

AppBarSeparator

，以节省空间

我试过这样的方法，但没用：

<VisualState.Setters>
   <Setter Target="AppBarSeparator" Value="Collapsed"/>
</VisualState.Setters>

---

您可以在页面中定义依赖项属性：

sealed partial class Page1: Page {
     public static readonly DependencyProperty SeparatorVisibilityProperty = 
                            DependencyProperty.RegisterAttached("SeparatorVisibility",
                                           typeof(Visibility),
                                           typeof(Page1),
                                           new PropertyMetadata(Visibility.Visible)
                            );
    public bool SeparatorVisibility {
         get {
            return (Visibility)this.GetValue(SeparatorVisibilityProperty);
         }
         set {
             this.SetValue(SeparatorVisibilityProperty , value);
         }
    }
    ..
    ..

然后将AppBarSeparator的可见性属性绑定到此属性：

<Page ...
      ...
      x:Name="page">
    .. 
    ..
    <AppBarSeparator Visibility="{Binding ElementName=page, Path=SeparatorVisibility}"/>
    ..

.. 
..
..

然后在可视状态下更改页面的SeparatorVisibility属性：

<VisualState.Setters>
   <Setter Target="page.SeparatorVisibility" Value="Collapsed"/>
</VisualState.Setters>

---

可视状态更改页面属性，它将更改AppBarSeparator的可见性，因为其可见性属性绑定到页面的SeparatorVisibility属性。不确定这是否是最好的解决方案，这只是我现在想到的。

正如我们在评论中所讨论的，您的

AppBarSeparator

是在

Pivot

的

DataTemplate

中生成的，当控件放置在

DateTemplate

中时，它们成为数据对象的可视结构，但是

VisualState

以控件为目标，因此不能在这里工作

您可以使用DataBinding with来完成此操作，如果窗口的大小在运行时是可变的，您可能还需要使用来完成数据源类

例如：

要在运行时获取窗口宽度，如果您只想在首次加载布局时使布局适合移动或PC，则不需要此事件，也不需要更改
INotifyPropertyChanged
：

private observetecollection pivotlist=new observetecollection（）；
公共主页（）
{
this.InitializeComponent（）；
}
受保护的覆盖无效OnNavigatedTo（NavigationEventArgs e）
{
Clear（）；
添加（新的MyPivotItem{}）；
添加（新的MyPivotItem{}）；
添加（新的MyPivotItem{}）；
添加（新的MyPivotItem{}）；
}
私有void docPivot\u SizeChanged（对象发送方，SizeChangedEventArgs e）
{
foreach（docPivot.Items中的变量项）
{
var pivotitem=作为MyPivotItem的项目；
pivotitem.WindowWidth=Window.Current.Bounds.Width；
}
}

MyPivotItem
类如下所示：

公共类MyPivotItem:INotifyPropertyChanged
{
公共MyPivotItem（）
{
_windowwidth=Window.Current.Bounds.Width；
}
专用双窗口宽度；
公共双窗宽度
{
获取{return\u windowwidth；}
设置
{
如果（值！=\u窗口宽度）
{
_窗口宽度=值；
OnPropertyChanged（）；
}
}
}
公共事件属性更改事件处理程序属性更改；
私有void OnPropertyChanged（[CallerMemberName]字符串propertyName=”“）
{
if（this.PropertyChanged！=null）
{
PropertyChanged（这是新的PropertyChangedEventArgs（propertyName））；
}
}
}

这里的
boolvisiblecoverter
非常简单：

公共类boolvisiblecoverter:IValueConverter
{
公共对象转换（对象值、类型targetType、对象参数、字符串语言）
{
双宽度=（双？）值；
if（width）你在第一句话中的意思是什么？你是说可以给他们名字并通过这种机制联系到他们吗？@WilliamJones我不确定这是否可能，事实并非如此。我删除了这句话。“它们是作为绑定的一部分动态生成的。”你的
AppBarSeparator
是在代码隐藏中生成的，你不是在xaml中设计的吗？@GraceFeng MSFT不，它们在xaml中，作为数据透视绑定的一部分生成的。你能展示一些xaml代码吗？@GraceFeng MSFT用XAMLOK更新了我的帖子，我现在可以理解，你的
AppBarSeparator
是在
DataTemp中后期
，它们没有公开，内部控件实际上成为了数据对象的可视结构，因此在此处使用visualstate触发器无法解决问题，但您可以在此处使用带转换器的数据绑定。如果我在此处编写一个演示作为答案，可以吗？只是发现如果您不希望在运行时更改它，可能会更容易使用
ItemTemplateSelector
来执行此操作。因此，您将视图模型与视图相关的东西结合起来？我认为是“窗口大小”是一个纯粹的视图问题，不应该向视图模型公开。我通常在视图模型层中没有一个对Windows.UI的引用。@MehrzadChehraz，因为OP没有提到他使用了MVVM模式，所以我在这里没有涉及MVVM，但您是对的，如果这是一个MVVM项目，Windows大小不应该向视图模型公开。
<VisualState.Setters>
   <Setter Target="page.SeparatorVisibility" Value="Collapsed"/>
</VisualState.Setters>