修改WPF工具包DropDownButton樣式

Question

我試圖修改WpfToolkit的DropDownButton樣式，以便允許我設置背景顏色。

這是DropDownButton的默認樣式：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes"
                    xmlns:conv="clr-namespace:Xceed.Wpf.Toolkit.Core.Converters"
                    xmlns:local="clr-namespace:Xceed.Wpf.Toolkit">

   <conv:InverseBoolConverter x:Key="InverseBoolConverter" />

   <LinearGradientBrush x:Key="PopupDarkBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFA3AEB9" Offset="0" />
      <GradientStop Color="#FF8399A9" Offset="0.375" />
      <GradientStop Color="#FF718597" Offset="0.375" />
      <GradientStop Color="#FF617584" Offset="1" />
   </LinearGradientBrush>

   <LinearGradientBrush x:Key="PopupBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
      <LinearGradientBrush.GradientStops>
         <GradientStopCollection>
            <GradientStop Offset="0" Color="#FFffffff" />
            <GradientStop Offset="1" Color="#FFE8EBED" />
         </GradientStopCollection>
      </LinearGradientBrush.GradientStops>
   </LinearGradientBrush>

   <Style TargetType="{x:Type local:DropDownButton}">
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="IsTabStop" Value="False" />
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Padding" Value="3" />
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:DropDownButton}">
               <Grid x:Name="MainGrid" SnapsToDevicePixels="True">
                  <ToggleButton x:Name="PART_DropDownButton"
                                Grid.Column="1"
                                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="2.75"
                                             RenderChecked="{TemplateBinding IsOpen}"
                                             RenderEnabled="{TemplateBinding IsEnabled}"
                                                        RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                                        RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}">
                           <Grid>
                              <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                              </Grid.ColumnDefinitions>
                              <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" />
                              <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1">
                                 <Path x:Name="Arrow"  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>
                           </Grid>
                        </chrome:ButtonChrome>
                     </Grid>
                  </ToggleButton>

                  <Popup x:Name="PART_Popup" 
                         HorizontalOffset="1"
                         VerticalOffset="1"
                         AllowsTransparency="True"
                         StaysOpen="False"
                         Placement="Bottom"
                         Focusable="False"
                         IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}">
                     <Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource PopupDarkBorderBrush}">
                        <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding DropDownContent}" />
                     </Border>
                  </Popup>

               </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>
</ResourceDictionary>

我正在創建DropDownButton，如下所示：

<extToolkit:DropDownButton VerticalAlignment="Center" Background="Red">
            <extToolkit:DropDownButton.Content>
                <TextBlock>Click me</TextBlock>
            </extToolkit:DropDownButton.Content>
            <extToolkit:DropDownButton.DropDownContent>
                <TextBlock>Popup</TextBlock>
            </extToolkit:DropDownButton.DropDownContent>
        </extToolkit:DropDownButton>

我將“背景”設置為“紅色”，但這沒有任何影響。 因此，我嘗試將DropDownButton樣式的背景設置為綁定到我設置的背景：

<Grid Background="{TemplateBinding Background}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" />
                                            <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1">
                                                <Path x:Name="Arrow"  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>
                                        </Grid>

但這並沒有改變背景顏色，無論我在控件中設置了什么。 如果我直接在樣式中設置背景顏色（無綁定），則該顏色會生效，但由於某些原因，在ButtonChrome上定義的CornerRadius會消失，並且按鈕會還原為矩形。

有什么建議么？ 我只希望能夠在定義控件時設置下拉按鈕和PART_Popup的背景。

Answer 1

看來ButtonChrome不能在不失去CornerRadius屬性的情況下設置任意背景顏色。 如果您不喜歡它，那么您需要尋找一個替代方案，作為替代方案，我為此使用了ToggleButton ：

<ToggleButton x:Name="ToggleButtonChrome"
              Background="{TemplateBinding Background}"
              IsEnabled="{TemplateBinding IsEnabled}"
              IsChecked="{Binding IsOpen, ElementName=PART_Popup}">

但我在中間有一個圖標Button，對我來說，沒有方法可以擺脫它，因此我處於Content屬性中，由其空間補償：

Content=" Click me         " 

要設置彈出窗口的Background ，我創建了一個附加的依賴項屬性Background，該屬性位於PropertyExtension命名空間中：

public static class Popup
{
    #region Popup Background Property

    public static readonly DependencyProperty BackgroundProperty;

    public static void SetBackground(DependencyObject DepObject, Brush value)
    {
        DepObject.SetValue(BackgroundProperty, value);
    }

    public static Brush GetBackground(DependencyObject DepObject)
    {
        return (Brush)DepObject.GetValue(BackgroundProperty);
    }

    #endregion

    static Popup()
    {
        #region Popup Background Registration

        PropertyMetadata BrushPropertyMetadata = new PropertyMetadata(Brushes.Transparent);

        BackgroundProperty = DependencyProperty.RegisterAttached("Background",
                                                         typeof(Brush),
                                                         typeof(Popup),
                                                         BrushPropertyMetadata);

        #endregion
    }
}

並在ControlTemplate中進行如下設置：

<Popup x:Name="PART_Popup"
       IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}"
       ...>                                
    <Border BorderThickness="1"
            Background="{TemplateBinding PropertyExtension:Popup.Background}"> <!-- Here -->

        <ContentPresenter x:Name="PART_ContentPresenter" 
                          Content="{TemplateBinding DropDownContent}" />
    </Border>
</Popup>

使用示例：

<Grid>
    <wpfx:DropDownButton PropertyExtension:Popup.Background="{StaticResource PopupBackground}"
                         Content=" Click me         " 
                         HorizontalContentAlignment="Left"
                         Background="CadetBlue"
                         Width="80" 
                         Height="30" >

        <wpfx:DropDownButton.DropDownContent>
            <TextBlock Width="100" 
                       Height="100"
                       Text="Popup" />
        </wpfx:DropDownButton.DropDownContent>
    </wpfx:DropDownButton>
</Grid>

初始狀態：

最終狀態：

整個項目可在此link 。

下面是一個完整的示例：

<Window.Resources>
    <wpfx:InverseBoolConverter x:Key="InverseBoolConverter" />
    <SolidColorBrush x:Key="PopupBackground" Color="Beige" />

    <Style TargetType="{x:Type wpfx:DropDownButton}">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type wpfx:DropDownButton}">
                    <Grid x:Name="MainGrid"                                              
                          SnapsToDevicePixels="True">

                        <ToggleButton x:Name="PART_DropDownButton"
                                      Grid.Column="1"
                                      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>
                                <ToggleButton x:Name="ToggleButtonChrome"
                                              Background="{TemplateBinding Background}"
                                              IsEnabled="{TemplateBinding IsEnabled}"
                                              IsChecked="{Binding IsOpen, ElementName=PART_Popup}">

                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <ContentPresenter Content="{TemplateBinding Content}" 
                                                          ContentTemplate="{TemplateBinding ContentTemplate}"  
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          RecognizesAccessKey="True" />

                                        <Grid x:Name="arrowGlyph" 
                                              IsHitTestVisible="False" 
                                              Margin="4,3,4,3"                                                  
                                              Grid.Column="1">

                                            <Path x:Name="Arrow"
                                                  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>
                                    </Grid>
                                </ToggleButton>
                            </Grid>
                        </ToggleButton>

                        <Popup x:Name="PART_Popup"
                               IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}"
                               HorizontalOffset="1"
                               VerticalOffset="1"
                               AllowsTransparency="True"
                               StaysOpen="False"
                               Placement="Bottom"
                               Focusable="False">

                            <Border BorderThickness="1"
                                    Background="{TemplateBinding PropertyExtension:Popup.Background}">

                                <ContentPresenter x:Name="PART_ContentPresenter" 
                                                  Content="{TemplateBinding DropDownContent}" />
                            </Border>
                        </Popup>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                        </Trigger>                            
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <wpfx:DropDownButton PropertyExtension:Popup.Background="{StaticResource PopupBackground}"
                         Content=" Click me         " 
                         HorizontalContentAlignment="Left"
                         Background="CadetBlue"
                         Width="80" 
                         Height="30" >

        <wpfx:DropDownButton.DropDownContent>
            <TextBlock Width="100" 
                       Height="100"
                       Text="Popup" />
        </wpfx:DropDownButton.DropDownContent>
    </wpfx:DropDownButton>
</Grid>