windows 10模板控制和AdaptiveTrigger

问题描述：

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

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>

答

我不认为AdaptiveTriggers工作在那样的风格。我得到它的唯一工作是直接在一个UserControl或页面内的一个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>

未测试，但让我知道如何解决。

谢谢！我发现触发器在页面级别上工作。因此，我创建了两个可视状态 - GreenVisualState和BlueVisualState以及一个用于更改视觉状态的依赖属性GoToVisualState。当页面大小改变时，自适应触发器将属性设置为期望的状态。 – user3506220

实际上，如果使用UserControl包装DataTemplate内容，AdaptiveTriggers将在DataTemplate中工作。检查这个答案：http://*.com/questions/32088500/adaptivetrigger-and-datatemplate –

答

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

这里是例子：

Generic.xaml - >

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

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

windows 10模板控制和AdaptiveTrigger

相关推荐