如何在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> 

下面是这种风格的渲染图像：