如何使 CompositeStateTrigger 与 AdaptiveTrigger 和 DeviceFamilyStateTrigger UWP 一起工作

Question

我正在尝试让 AdaptiveTrigger 和 DeviceFamilyStateTrigger 与 CompositeStateTrigger 一起工作。

找到这个 useful link 指导我但仍然无法工作

我在 GitHub 创建了一个示例项目来重现 my issue here。

供参考，这是我的 XAML。我错过了什么？

<Grid Background="AliceBlue" x:Name="gridRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup >
            <VisualState x:Name="narrow">
                <VisualState.StateTriggers>
                    <triggers:CompositeStateTrigger Operator="And">
                        <mytrigger:AdaptiveTrigger MinWindowWidth="0" MaxWindowHeight="520" />
                        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                    </triggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBlock.Text" Value="Desktop is narrow" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="medium">
                <VisualState.StateTriggers>
                    <triggers:CompositeStateTrigger Operator="And">
                        <mytrigger:AdaptiveTrigger MinWindowWidth="521" MaxWindowHeight="1199" />
                        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                    </triggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBlock.Text" Value="Desktop is medium width" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="wide">
                <VisualState.StateTriggers>
                    <triggers:CompositeStateTrigger Operator="And">
                        <mytrigger:AdaptiveTrigger MinWindowWidth="1200"/>
                        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                    </triggers:CompositeStateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBlock.Text" Value="Desktop is wide" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="gridText">
        <TextBlock x:Name="textBlock" FontSize="40" Text="My Text Block" Style="{StaticResource HeaderTextBlockStyle}" FontWeight="ExtraBold"/>
    </Grid>

</Grid>

Answer 1

您的代码几乎是正确的。这里的问题是您在 AdaptiveTrigger 中设置了错误的属性。在 AdaptiveTrigger 中，我们应该设置 MinWindowWidth 和 MaxWindowWidth 而不是 MaxWindowHeight.

所以你可以像下面这样更改你的代码，它应该能够工作。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="narrow">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MaxWindowWidth="520" MinWindowWidth="0" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is narrow" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="medium">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MaxWindowWidth="1199" MinWindowWidth="521" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is medium width" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MinWindowWidth="1200" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is wide" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

如何使 CompositeStateTrigger 与 AdaptiveTrigger 和 DeviceFamilyStateTrigger UWP 一起工作

How to make CompositeStateTrigger work with AdaptiveTrigger and DeviceFamilyStateTrigger UWP

xaml

triggers

visualstatemanager

uwp

uwp-xaml