修改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}"> 

，但我有一個圖標按鈕站在中間，對我來說沒有方法做無法擺脫它，所以我在Content財產由其空間補償：

Content=" Click me   " 

要設置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>