如何更改 UWP 主从页面中页面按钮的样式

Question

我想为 Page Button in UWP for a master detail page. With the help of the Live Visual Tree I found out that it should be the 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>

我已经尝试修改 default button style 和除 ContentTogglePane 按钮之外的所有其他按钮更改。我想删除边框并更改悬停时的文本颜色以及背景。

我必须覆盖哪种样式才能完成此操作？理想情况下，只有 ContentTogglePane 按钮被覆盖。

Answer 1

I want to remove the border and change the text color on hover as well as the background.

我想你已经找到了MasterDetailControl和PaneButton的默认模板样式，然后你可以将它们复制到UWP项目的App.xaml文件中（又名。应用程序资源UWP 应用程序）。由于要在悬停按钮时更改样式，因此我们仍然需要默认 Button styles and templates，将 <Setter Property="Template">...</Setter> 部分复制到 PaneButton 的样式中。 "on hover" 行为由默认按钮样式中的 <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>

此款效果图如下：

如何更改 UWP 主从页面中页面按钮的样式

How to change the style of Page Button in Master-Detail Page for UWP

xaml

uwp

xamarin.forms

windows-10-universal

master-detail