如何在UWP的主細節頁面中更改頁面按鈕的樣式

Question

我想在UWP中爲主細節頁面設置Page Button的樣式。在Live Visual Tree的幫助下，我發現它應該是ContentTogglePane button。

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="{TemplateBinding ToolbarBackground}" > 

    <Button Name="ContentTogglePane" Style="{ThemeResource PaneButton}" Foreground="{TemplateBinding ToolbarForeground}" 
     Visibility="{TemplateBinding ContentTogglePaneButtonVisibility}" /> 

    <Border Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}"> 
     <TextBlock Text="{TemplateBinding DetailTitle}" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" /> 
    </Border> 

</StackPanel> 

風格在this way定義：

<Style TargetType="Button" x:Key="PaneButton"> 
     <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" /> 
     <Setter Property="FontSize" Value="20" /> 
     <Setter Property="Height" Value="48" /> 
     <Setter Property="Width" Value="48" /> 
     <Setter Property="Content" Value="" /> 
</Style> 

我試圖修改除了ContentTogglePane按鈕default button style和所有其他按鈕的變化。我想刪除邊框並更改懸停上的文字顏色以及背景。

我必須覆蓋哪種風格才能完成此操作？理想情況下，只有ContentTogglePane按鈕被覆蓋。

Answer 1

我想刪除邊框並更改懸停以及背景上的文本顏色。

我想你已經找到了MasterDetailControl和PaneButton默認模板風格，那麼你可以將它們複製到App.xaml文件UWP項目（亦稱UWP應用程序的應用程序資源）的。由於您希望在按鈕處於懸停狀態時更改樣式，因此我們仍然需要默認Button styles and templates，將<Setter Property="Template">...</Setter>部分複製到PaneButton的樣式中。 「懸停」行爲由默認按鈕樣式中的<VisualState x:Name="PointerOver">控制。

所有需要的資源現在都在應用程序資源中，我們可以像在標準UWP應用程序中那樣簡單地修改它們。例如：

<Application 
    x:Class="MasterDetailPageNavigation.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:MasterDetailPageNavigation.UWP" 
    xmlns:uwp="using:Xamarin.Forms.Platform.UWP" 
    RequestedTheme="Light"> 
    <Application.Resources> 
     <Style TargetType="Button" x:Key="CustomePaneButton"> 
      <Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" /> 
      <Setter Property="FontSize" Value="20" /> 
      <Setter Property="Height" Value="48" /> 
      <Setter Property="Width" Value="48" /> 
      <Setter Property="Content" Value="" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Wheat" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Wheat" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter x:Name="ContentPresenter" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Content="{TemplateBinding Content}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          Padding="{TemplateBinding Padding}" 
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
          AutomationProperties.AccessibilityView="Raw" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <x:Double x:Key="TitleBarHeight">48</x:Double> 

     <Style TargetType="uwp:MasterDetailControl"> 
      <Setter Property="ToolbarForeground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="uwp:MasterDetailControl"> 
         <SplitView x:Name="SplitView" IsPaneOpen="{Binding IsPaneOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" DisplayMode="Overlay"> 
          <SplitView.Pane> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="Auto" /> 
             <RowDefinition Height="*" /> 
            </Grid.RowDefinitions> 
            <StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{TemplateBinding MasterToolbarVisibility}" Background="{TemplateBinding ToolbarBackground}"> 
             <Button Name="PaneTogglePane" Style="{StaticResource CustomePaneButton}" Foreground="{TemplateBinding ToolbarForeground}" /> 
             <TextBlock Style="{ThemeResource TitleTextBlockStyle}" VerticalAlignment="Center" Text="{TemplateBinding MasterTitle}" Visibility="{TemplateBinding MasterTitleVisibility}" Foreground="{TemplateBinding ToolbarForeground}" /> 
            </StackPanel> 

            <ContentPresenter x:Name="MasterPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Master}" /> 
           </Grid> 
          </SplitView.Pane> 
          <SplitView.Content> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="Auto" /> 
             <RowDefinition Height="*" /> 
            </Grid.RowDefinitions> 

            <uwp:FormsCommandBar x:Name="CommandBar" Grid.Row="0" Foreground="{TemplateBinding ToolbarForeground}" Background="{TemplateBinding ToolbarBackground}" Visibility="{TemplateBinding DetailTitleVisibility}" VerticalContentAlignment="Top"> 
             <uwp:FormsCommandBar.Content> 
              <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> 
               <Button Name="ContentTogglePane" Style="{StaticResource CustomePaneButton}" Foreground="{TemplateBinding ToolbarForeground}" Visibility="{Binding ElementName=SplitView,Path=IsPaneOpen,Converter={StaticResource InvertedBoolVisibilityConverter}}" /> 
               <ContentControl VerticalAlignment="Top" VerticalContentAlignment="Center" Height="{StaticResource TitleBarHeight}"> 
                <TextBlock Text="{TemplateBinding DetailTitle}" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" /> 
               </ContentControl> 
              </StackPanel> 
             </uwp:FormsCommandBar.Content> 
            </uwp:FormsCommandBar> 

            <ContentPresenter x:Name="DetailPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Detail}" /> 
           </Grid> 
          </SplitView.Content> 
         </SplitView> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Application.Resources> 
</Application> 

下面是這種風格的渲染圖像：