如何在 UWP App 中使用这个 AdaptiveTrigger

Question

我正在编写 UWP 应用程序。

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

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

SellButtonGrid
SellButtonGridAlternate

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

最低 520 Windows 身高
SplitViewPane 打开或关闭。

这意味着 4 个案例：

Windows height lesser than 520 and splitviewpane closed

Windows height lesser than 520 and splitviewpane open

Windows height larger than 520 and splitviewpane closed

Windows height larger than 520 and splitviewpane open

对于splitview打开或关闭我使用：

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

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

Answer 1

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

Binding 不适用于 StateTrigger。但是 x:Bind 工作得很好，所以你可以使用 x:Bind 代替，并且不要忘记为 x:Bind.

Mode=OneWay

Operator="And" 需要在 windowsStateTriggers:CompositeStateTrigger 上指定。

所以你的 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

如何在 UWP App 中使用这个 AdaptiveTrigger

How to use this AdaptiveTrigger in UWP App

c#

xaml

windows-phone-8.1

uwp

windows-10-universal