Hi,
To style the DropDownButton (the one opening the popup), you can re-write the ButtonChrome template :
To style the DropDownButton (the one opening the popup), you can re-write the ButtonChrome template :
<Style TargetType="{x:Type xctk:ButtonChrome}">
<Setter Property="Background"
Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:ButtonChrome}">
<Grid>
<Border x:Name="OuterBorder"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" />
<ContentPresenter Margin="{TemplateBinding Padding}"
IsEnabled="{TemplateBinding IsEnabled}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
</Grid>
<ControlTemplate.Triggers>
<!-- If button is disabled, not checked, and is rendered normal -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderEnabled"
Value="False" />
<Condition Property="RenderChecked"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonDisabledOuterBorderKey}}" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="{DynamicResource {x:Static themes:ResourceKeys.ControlDisabledBackgroundKey}}" />
</MultiTrigger>
<!-- if button is enabled and pressed -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderEnabled"
Value="True" />
<Condition Property="RenderPressed"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonPressedOuterBorderKey}}" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="Blue" />
</MultiTrigger>
<!-- if button is enabled, is not checked, the mouse is over, and not pressed -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderEnabled"
Value="True" />
<Condition Property="RenderChecked"
Value="False" />
<Condition Property="RenderMouseOver"
Value="True" />
<Condition Property="RenderPressed"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonMouseOverOuterBorderKey}}" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="Green" />
</MultiTrigger>
<!-- if button is enabled, checked, the mouse is not over, and it is not pressed -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderEnabled"
Value="True" />
<Condition Property="RenderChecked"
Value="True" />
<Condition Property="RenderMouseOver"
Value="False" />
<Condition Property="RenderPressed"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonPressedOuterBorderKey}}" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="Blue" />
</MultiTrigger>
<!-- if button is focused, is enabled, not pressed, and the mouse is not over -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderFocused"
Value="True" />
<Condition Property="RenderEnabled"
Value="True" />
<Condition Property="RenderPressed"
Value="False" />
<Condition Property="RenderMouseOver"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonFocusedOuterBorderKey}}" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonFocusedBackgroundKey}}" />
</MultiTrigger>
<!-- if not rendered normally -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="RenderNormal"
Value="False" />
<Condition Property="RenderChecked"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder"
Property="BorderBrush"
Value="Transparent" />
<Setter TargetName="OuterBorder"
Property="Background"
Value="Transparent" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>