Question

如何在Windows 10中的模板化控件中使用AdaptiveTrigger（我使用Windows 10 Pro Insider Preview Build 10074）。窗口大小更改时，Window.Current.SizeChanged事件不会启动。什么是制作流体控制的正确方法？这是我尝试做的，但是当改变屏幕尺寸时没有任何反应：

XAML template:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <Style TargetType="local:CustomControl1" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomControl1">
                    <Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisualSizeStates">

                                <VisualState x:Name="Small">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>

                                        <Setter Target="Rect.Fill" Value="Green"/>

                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Big">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowHeight="1000" MinWindowWidth="1000" />

                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="Rect.Fill" Value="Blue"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="Rect" Fill="Red" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Answer 1

诀窍是你必须将带有AdaptiveTrigger-s的VisualStateManager放入ControlTemplate的根控件中，否则它将无法工作。

以下是示例：

Generic.xaml - ＆gt;

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdaptiveLayoutExample">

    <Style TargetType="local:CustomControl1" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomControl1">
                    <Grid x:Name="RootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState>
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="0"/>
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="Yellow"/>
                                        <Setter Target="MyGrid.Background" Value="White"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState>
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="600"/>
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="Gray"></Setter>
                                        <Setter Target="MyGrid.Background" Value="Red"></Setter>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid x:Name="MyGrid" Width="50" Height="50" Background="Black"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MainPage.xaml - ＆gt;

<Page
    x:Class="AdaptiveLayoutExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdaptiveLayoutExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <local:CustomControl1 Width="100" Height="100"/>
    </Grid>
</Page>

Answer 2

我不认为AdaptiveTriggers的工作方式是这样的。我唯一能让它工作的地方就是直接在UserControl或Page内的Grid中。我确信他们不会在DataTemplate中工作。我相信VisualStateManager必须在控件内容之前。尝试这样的不同方法：

        <!--in app.xaml or something-->
    <ControlTemplate x:Key="controlTemplate1" TargetType="MyControl">
        <Border Background="Green"/>
    </ControlTemplate>
    <ControlTemplate x:Key="controlTemplate2"  TargetType="MyControl">
        <Border Background="Blue"/>
    </ControlTemplate>

    <!--in your page-->
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="visualStateGroup" >
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="control.Template" Value="{StaticResource controlTemplate1}"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="control.Template" Value="{StaticResource controlTemplate2}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <MyControl x:Name="control" Template="{StaticResource controlTemplate1}"/>
    </Grid>

未经测试，但让我知道这是如何解决的。

Answer 3

请注意，当您没有“大” VisualState来触发默认设置时，您将保持其他VisualState的设置被覆盖。可能很明显，但是我花了一些时间来掌握它。

windows 10模板控件和AdaptiveTrigger

3 个答案: