自適應觸發資源字典

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。