修改WPF工具包DropDownButton样式
[英]Modify WPF Toolkit DropDownButton style
问题描述
I am trying to modify WpfToolkit's DropDownButton style in order to allow me to set the Background color. 
我试图修改WpfToolkit的DropDownButton样式，以便允许我设置背景颜色。
Here is the default style of the 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>
I am creating the DropDownButton like so: 我正在创建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>
I set the Background to Red but that doesn't have any impact. 我将“背景”设置为“红色”，但这没有任何影响。 So I tried to set the Background of the DropDownButton's style to bind to the Background I set: 因此，我尝试将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>
But that didn't change the background color, no matter what I set in my control. 但这并没有改变背景颜色，无论我在控件中设置了什么。 If I set the Background color directly in the style (no binding), then the color takes affect but for some reason the CornerRadius defined on ButtonChrome disappears and the button reverts to a rectangle. 如果我直接在样式中设置背景颜色（无绑定），则该颜色会生效，但由于某些原因，在ButtonChrome上定义的CornerRadius会消失，并且按钮会还原为矩形。
Any suggestions? 有什么建议么？ I just want to be able to set the background of the drop down button and the PART_Popup when defining the control. 我只希望能够在定义控件时设置下拉按钮和PART_Popup的背景。
1 个解决方案
解决方案1
2 2014-02-12 07:51:46
It seems that ButtonChrome can not set an arbitrary Background color without losing the CornerRadius property. 看来ButtonChrome不能在不失去CornerRadius属性的情况下设置任意背景颜色。 If you do not like it, then you need to look for an alternative, as an alternative, I have used ToggleButton for this: 如果您不喜欢它，那么您需要寻找一个替代方案，作为替代方案，我为此使用了ToggleButton ：
<ToggleButton x:Name="ToggleButtonChrome"
Background="{TemplateBinding Background}"
IsEnabled="{TemplateBinding IsEnabled}"
IsChecked="{Binding IsOpen, ElementName=PART_Popup}">
but I have a icon Button stands in the middle, for me no methods do not get rid of it, so I'm in Content property compensated by its spaces: 但我在中间有一个图标Button，对我来说，没有方法可以摆脱它，因此我处于Content属性中，由其空间补偿：
Content=" Click me "
To set the Background for Popup, I created an attached dependency property Background, which is in PropertyExtension namespace: 要设置弹出窗口的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
}
}
And set in the ControlTemplate as follows: 并在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>
Example of using: 使用示例：
<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>
The initial state: 初始状态：
The final state: 最终状态：
Below a full example: 下面是一个完整的示例：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将集合绑定到Extended WPF Toolkit的DropdownButton？ - How to bind a collection to Extended WPF Toolkit's DropdownButton?
使用WPF获取工具包样式窗口 - Get Toolkit Style Window with WPF
WPF工具包DataGridCell样式DataTrigger - WPF Toolkit DataGridCell Style DataTrigger
WPF工具箱MessageBox样式异常 - Wpf toolkit MessageBox style exception
WPF扩展器-修改样式 - WPF Expander - Modify Style
WPF在运行时修改样式 - WPF modify Style at runtime
WPF-在扩展WPF工具包中自定义MessageBox的样式 - WPF - Customize the style of MessageBox in Extended WPF Toolkit
WPF中Chart ToolKit的样式活动点 - Style Active point for Chart ToolKit in WPF
工具栏中的扩展WPF工具包CheckComboBox样式 - Extended WPF Toolkit CheckComboBox Style in ToolBar
wpf工具包datetimepicker如何更改禁用的样式 - wpf toolkit datetimepicker how to change disabled style
相关标签