如何在UWP应用程序中使用此AdaptiveTrigger

本文关键字：AdaptiveTrigger 应用程序 UWP | 更新日期: 2023-09-27 17:59:54

我正在编写一个UWP应用程序。

我在页面中添加了SplitView（用于汉堡包）。

在SplitView窗格中，我有两个项目：

SellButtonGrid
SellButtonGridAlternate

以上两个项目的可见性取决于两个条件：

最小520窗口高度
和SplitViewPane打开或关闭

这意味着4种情况：

窗口高度小于520且splitviewpane关闭

窗口高度小于520，拆分窗格打开

窗口高度大于520，拆分窗格关闭

窗口高度大于520且拆分窗格打开

对于打开或关闭拆分视图，我使用：

<VisualState x:Name="SplitViewOpen">
  <VisualState.StateTriggers>
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen}" />
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Visible" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" />
  </VisualState.Setters>
</VisualState>
<VisualState x:Name="SplitViewClosed">
  <VisualState.StateTriggers>
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen, Converter={StaticResource BooleanNegationConverter}}" />
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
  </VisualState.Setters>
</VisualState>

对于检测520以下或以上的高度，我使用：

<VisualState x:Name="SmallHeight">
  <VisualState.StateTriggers>
  <AdaptiveTrigger MinWindowHeight="0" />
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
  </VisualState.Setters>
</VisualState>
<VisualState x:Name="LargeHeight">
  <VisualState.StateTriggers>
  <AdaptiveTrigger MinWindowHeight="520" />
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Visible" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" />
  </VisualState.Setters>
</VisualState>

但是，结果并不是我所期望的。如何合并这些视觉状态？？

我尝试使用：http://dotnetbyexample.blogspot.in/2016/02/an-adaptivetrigger-that-works-with.html

我使用了上述解决方案，因此：我重新编写的代码：

xmlns:Utils="using:DellApp.Utils"
xmlns:converters="using:DellApp.Converters"
xmlns:windowsStateTriggers="using:WindowsStateTriggers"

新建状态：

  <VisualState.StateTriggers>
  <windowsStateTriggers:CompositeStateTrigger>
  <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000" />
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen,
  Converter={StaticResource BooleanNegationConverter}}" />
  </windowsStateTriggers:CompositeStateTrigger>
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
  </VisualState.Setters>
</VisualState>
<VisualState x:Name="SplitViewCollapsed_SmallHeight">
  <VisualState.StateTriggers>
  <windowsStateTriggers:CompositeStateTrigger>
  <Utils:AdaptiveTrigger MaxWindowHeight="519"
  MinWindowHeight="0" />
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen,
  Converter={StaticResource BooleanNegationConverter}}" />
  </windowsStateTriggers:CompositeStateTrigger>
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
  </VisualState.Setters>
</VisualState>
<VisualState x:Name="SplitViewOpen_SmallHeight">
  <VisualState.StateTriggers>
  <windowsStateTriggers:CompositeStateTrigger>
  <Utils:AdaptiveTrigger MaxWindowHeight="519"
  MinWindowHeight="0" />
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen}" />
  </windowsStateTriggers:CompositeStateTrigger>
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
  </VisualState.Setters>
</VisualState>
<VisualState x:Name="SplitViewOpen_LargeHeight">
  <VisualState.StateTriggers>
  <windowsStateTriggers:CompositeStateTrigger>
  <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000"/>
  <StateTrigger IsActive="{Binding ElementName=LayoutSplitView,
  Path=IsPaneOpen}" />
  </windowsStateTriggers:CompositeStateTrigger>
  </VisualState.StateTriggers>
  <VisualState.Setters>
  <Setter Target="SellButtonGrid.Visibility" Value="Visible" />
  <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" />
  </VisualState.Setters>
</VisualState>

所以，我所做的是，我从WindowsStateTriggers添加了CompositeStateTrigger，但我无法触发它。

如何在UWP应用程序中使用此AdaptiveTrigger

我用您的代码做了一个演示，并重现了这个问题。经过研究，我发现了以下问题：

CCD_ 1不能与CCD_ 2一起工作。但是x:Bind可以很好地工作，所以您可以使用x:Bind，并且不要忘记为x:Bind指定Mode=OneWay
需要在windowsStateTriggers:CompositeStateTrigger上指定Operator="And"

所以你的XAML应该像下面这样修复：

<Page.Resources>
    <converter:BooleanNegationConverter x:Name="BooleanNegationConverter" x:Key="BooleanNegationConverter"/>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                <windowsStateTriggers:CompositeStateTrigger Operator="And">//use Operator='And' here
                        <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000" />
                        <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen,Mode=OneWay,Converter={StaticResource BooleanNegationConverter}}" />
                </windowsStateTriggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
                <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
            </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="SplitViewCollapsed_SmallHeight">
                <VisualState.StateTriggers>
                    <windowsStateTriggers:CompositeStateTrigger Operator="And">
                        <Utils:AdaptiveTrigger MaxWindowHeight="519" MinWindowHeight="0" />
                        <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen,Mode=OneWay,Converter={StaticResource BooleanNegationConverter}}" />
                    </windowsStateTriggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
                    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="SplitViewOpen_SmallHeight">
                <VisualState.StateTriggers>
                    <windowsStateTriggers:CompositeStateTrigger Operator="And">
                        <Utils:AdaptiveTrigger MaxWindowHeight="519" MinWindowHeight="0" />
                        <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen}" />
                    </windowsStateTriggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" />
                    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="SplitViewOpen_LargeHeight">
                <VisualState.StateTriggers>
                    <windowsStateTriggers:CompositeStateTrigger Operator="And">
                        <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000"/>
                        <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen}" />
                    </windowsStateTriggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SellButtonGrid.Visibility" Value="Visible" />
                    <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

这是我制作的示例：AdaptiveTriggerSample