自适应触发资源字典

Question

我想在页面的一个简单的标题“适应”变化为基础的关闭页面的宽度的填充值。即我有使用从资源字典样式的报头的TextBlock，如下所示：

<Style x:Key="PageHeaderStyle" TargetType="TextBlock"> 
     <Setter Property="FontSize" Value="16" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="FontWeight" Value="Bold" /> 
</Style> 

在我的网页现在我有一个使用从上面的资源字典样式一个简单的TextBlock。在页面如果我使用下面的代码我自适应触发如下图所示一切正常：

<Page 
... 
     Style="{StaticResource PageStyle}"> 

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup> 
        <VisualState x:Name="Narrow"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="0" /> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="PageHeader.Padding" Value="48,0,0,0" /> 
         </VisualState.Setters> 
        </VisualState> 
        <VisualState x:Name="Compact"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="720" /> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="PageHeader.Padding" Value="0,0,0,0" /> 
         </VisualState.Setters> 
        </VisualState> 
        <VisualState x:Name="Wide"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="1024"/> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="PageHeader.Padding" Value="0,0,0,0" /> 
         </VisualState.Setters> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 

      <Grid.RowDefinitions> 
       <RowDefinition Height="{StaticResource GridHamburgerHeight}"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="14"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 

      <Border Background="{x:Bind Path=helper:CommonStyles.HamburgerPaneBackgroundColour}" Grid.Row="0" Grid.ColumnSpan="2"/> 
      <TextBlock Style="{StaticResource PageHeaderStyle}" Grid.Column="1" Text="HOME"/> 
     </Grid> 
    </Page> 

我的问题是，我怎么可以移动自适应VisualStateManager成片资源字典本身的样式对象，这样我可以重新使用这个头文件风格和它的“自适应性”，而不必在每个页面上粘贴VisualStateManager。

谢谢！

Answer 1

正如我已经试过这是不可能改变页面的模板中，似乎永远使用默认值。因此，考虑到VisualStateManager必须在控制的根元素 - source at MSDN：

控制作者或应用开发者添加VisualStateGroup对象元素的控制模板定义的在XAML根元素，使用VisualStateManager.VisualStateGroups附加属性。

你可能会创建一个自定义用户控件或延长页类 - 那里你可以添加VisualStateManager，你将不必遍重复它，只需使用控制/页。

---

这是非常简单的例子，应适当延长，但它会给你一个点开始（你的源代码can check at Github对于你的情况我会创造一个TemplatedControl - 右键点击你的项目解决方案管理器，然后添加 - >新建项目，然后选择模板化控件，让我们将其命名为AdaptiveTriggerControl，应在主题创建一个CS文件和Generic.xaml文件夹。打开AdaptiveTriggerControl.cs文件，并修改它的派生类 - 从改变到ControlContentControl：

public sealed class AdaptiveTriggerControl : ContentControl 

在Generic.xaml定义控制：

<Style TargetType="local:AdaptiveTriggerControl" > 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:AdaptiveTriggerControl"> 
       <Border x:Name="MyBorder" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}"> 
        <!--Background="{TemplateBinding Background}"--> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup> 
          <VisualState x:Name="Narrow"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="0" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="MyBorder.Background" Value="Red"/> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Compact"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="720" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="MyBorder.Background" Value="Green"/> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Wide"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="1024"/> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="MyBorder.Background" Value="Blue"/> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter Content="{TemplateBinding Content}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

然后你可以使用它就像这样：

<local:AdaptiveTriggerControl> 
    <TextBlock Text="Content of your page"/> 
</local:AdaptiveTriggerControl> 

More information约TemplatedControls，a sample of creating UserControl。