wpf - 如何设置拆分按钮的样式

Question

使用超出 extended wpf toolkit 的 SplitButton ，我想使用我拥有的样式“blueButtonStyle”。

尝试直接应用样式是行不通的，因为按钮真的不是按钮!所以我想知道如何解决这个问题。

理想情况下，拆分按钮上有一个按钮属性，我可以将 blueButtonStyle 应用到该属性，但我没有看到。

我应该如何处理这个？

干杯，
绿柱石

想要的外观(blueButtonStyle)



默认外观



当前有错误的 xaml 定义(不适用的样式)

<toolkit:SplitButton DockPanel.Dock="Right" Content="{resx:Resx SplitButton_Add}" 
                     Height="25" Width="80" HorizontalAlignment="Right" Margin="15" 
                     Style="{StaticResource blueButtonStyle}"
                     >
    <toolkit:SplitButton.DropDownContent>
        <StackPanel Orientation="Vertical" >
            <StackPanel.Resources>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource blueButtonStyle}">
                </Style>
            </StackPanel.Resources>
            <Button Content="Person" Command="{Binding AddNewPersonCommand}"/>
            <Button Content="Company" Command="{Binding AddNewOrganizationCommand}"/>
        </StackPanel>
    </toolkit:SplitButton.DropDownContent>
</toolkit:SplitButton>

拆分按钮 xaml

<!-- =============================================================================== -->
<!-- SplitButton                                                                     -->
<!-- =============================================================================== -->
<Style TargetType="{x:Type local:SplitButton}">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:SplitButton}">
                <Grid x:Name="MainGrid" SnapsToDevicePixels="True">
                    <chrome:ButtonChrome x:Name="ControlChrome" Background="{TemplateBinding Background}" RenderEnabled="{TemplateBinding IsEnabled}" CornerRadius="2.75">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Button x:Name="PART_ActionButton" Margin="0" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" >
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <ContentPresenter />
                                    </ControlTemplate>
                                </Button.Template>
                                <Grid>
                                    <chrome:ButtonChrome x:Name="ActionButtonChrome"
                                               CornerRadius="2.75, 0, 0, 2.75"                                                         
                                               RenderNormal="False"
                                               RenderEnabled="{TemplateBinding IsEnabled}"
                                                          RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ActionButton}"
                                                          RenderPressed="{Binding IsPressed, ElementName=PART_ActionButton}">
                                        <ContentPresenter Name="ActionButtonContent" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" />
                                    </chrome:ButtonChrome>
                                </Grid>
                            </Button>
                            <ToggleButton x:Name="PART_ToggleButton"
                                  Grid.Column="1"
                                  IsTabStop="False"
                                  IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}">
                                <ToggleButton.Template>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <ContentPresenter />
                                    </ControlTemplate>
                                </ToggleButton.Template>
                                <Grid>
                                    <chrome:ButtonChrome x:Name="ToggleButtonChrome"                                                         
                                               CornerRadius="0, 2.75, 2.75, 0"
                                               RenderNormal="False"
                                               RenderChecked="{TemplateBinding IsOpen}"
                                               RenderEnabled="{TemplateBinding IsEnabled}"
                                                          RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ToggleButton}"
                                                          RenderPressed="{Binding IsPressed, ElementName=PART_ToggleButton}">
                                        <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3">
                                            <Path Width="7" Height="4" Data="M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z" Fill="#FF000000" />
                                        </Grid>
                                    </chrome:ButtonChrome>
                                </Grid>
                            </ToggleButton>
                        </Grid>
                    </chrome:ButtonChrome>

                    <Popup x:Name="PART_Popup" 
                     HorizontalOffset="1"
                     VerticalOffset="1"
                     AllowsTransparency="True"
                     StaysOpen="False"
                     Placement="Bottom"
                     Focusable="False"
                     IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton}">
                        <!-- TODO: Create Popup Styles that can be reused on all popups in the toolkit-->
                        <Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource ColorPickerDarkBorderBrush}">
                            <ContentPresenter Content="{TemplateBinding DropDownContent}" />
                        </Border>
                    </Popup>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

蓝色按钮样式

<!--BlueButtonStyle-->
<Style x:Key="BlueButtonStyle" TargetType="Button">
    <Setter Property="Padding" Value="20,0" />
    <Setter Property="Margin" Value="3" />
    <Setter Property="Height" Value="23" />
    <Setter Property="MinWidth" Value="75" />
    <Setter Property="Foreground" Value="White" />

    <Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle RadiusX="5" RadiusY="5" Stroke="Gold" StrokeThickness="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="rootGrid" RenderTransformOrigin=".5,.5">

                    <Grid.Resources>
                        <SolidColorBrush x:Key="borderBrush" Color="Transparent"/>
                    </Grid.Resources>

                    <Grid.RenderTransform>
                        <TranslateTransform X="0" Y="0"/>
                    </Grid.RenderTransform>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Rectangle Grid.RowSpan="2" x:Name="bottomBorder" RadiusX="5" RadiusY="5" 
                               Stroke="{StaticResource borderBrush}" StrokeThickness="2"
                               Fill="{StaticResource headerBrush}" />
                    <Rectangle x:Name="highlight" Margin="2.5" Fill="White" RadiusX="3" RadiusY="3">
                        <Rectangle.OpacityMask>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#D0FFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <ContentPresenter Grid.RowSpan="2"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                        Margin="{TemplateBinding Padding}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        RecognizesAccessKey="True" RenderTransformOrigin="0.5,0.5" x:Name="contentPresenter" />
                </Grid>
                <ControlTemplate.Resources>
                    <Storyboard x:Key="buttonDown_Animation">
                        <DoubleAnimation Storyboard.TargetName="rootGrid" 
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                                         From="0" To="0" Duration="0:0:0" 
                                         />
                    </Storyboard>
                </ControlTemplate.Resources>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Black" />
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Black" />
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="bottomBorder" Property="Fill" Value="DarkGray" />
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Silver" />
                        <Setter TargetName="bottomBorder" Property="StrokeThickness" Value="4" />
                        <Setter TargetName="highlight" Property="Fill" Value="#20FFFFFF" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

我要做的第一件事是确保 BlueButtonStyle 实际上适用于这种类型的控件。

样式具有需要设置的 TargetType 属性，该属性定义了它们可以影响的属性列表。你的风格应该是这样的:

<Style x:Key="blueButtonStyle" TargetType="{x:Type toolkit:SplitButton}">
    <!-- edit stuff here -->
</Style>

现在，假设您已经这样做了，但是在您的样式中绑定(bind)背景元素和诸如此类的东西不起作用，您可能需要编辑 SplitButton 的 ControlTemplate 以允许这种样式。 ControlTemplate 定义了构成给定控件的控件(让我换种说法:此 SplitButton 的 ControlTemplate 定义了哪些子控件一起构成了此 SplitButton)。如果 ControlTemplate 中的控件未设置为允许绑定(bind)背景和前景等属性，则任何样式都无法更改它们。

要获得 ControlTemplate，您需要某种反编译工具。为此，我使用 Blend。

进入 Blend 后，创建一个新项目并将 SplitButton 添加到 Canvas 。在左下角的 TreeView Pane 中，您应该会看到 SplitButton 出现。右键单击它，导航到“编辑模板...”，然后选择“编辑副本”。

这将为该控件创建一个精确的 ControlTemplate 副本，您现在可以像使用任何其他 WPF 资源一样使用它。

在该模板中，您需要查找构成您要设置样式的 SplitButton 的控件。在这些控件上，确保要设置样式的属性设置为 TemplateBindings。它们应该看起来像这样:

<ControlTemplate x:Key="splitButtonTemplate" TargetType="{x:Type toolkit:SplitButton}">
    <!-- some data here.... -->
    <Button Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>

只要您要设置样式的属性以这种方式绑定(bind)，作为 TemplateBindings，它们就会获取您的样式所做的更改。