How to set the Background and Foreground when DropDownButton is pressed?

[JackDjTom]

Hi,
I can't figure out how to set the Background and the Foreground of the DropDownButton when it's pressed... can someone help me?

I have:

<Style x:Key="{x:Type mah:DropDownButton}"
         BasedOn="{StaticResource {x:Type mah:DropDownButton}}"
         TargetType="{x:Type mah:DropDownButton}">
      <Setter Property="ButtonStyle">
        <Setter.Value>
          <Style BasedOn="{StaticResource MahApps.Styles.Button.Flat}" TargetType="{x:Type ButtonBase}">
            <Style.Triggers>
              <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Button.Flat.Background.Pressed}" />
                <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Button.Flat.Foreground.Pressed}" />
              </Trigger>
            </Style.Triggers>
          </Style>
        </Setter.Value>
      </Setter>
</Style>

But that does nothing...

And having the Triggers directly on the DropDownButton-Style doesn't work since the DropDownButton has no IsPressed Property.

I know that i can set the ArrowPressedBrush but i want to set the Background of the Button and the Foreground of the Content (Text) aswell...

[timunie]

Hi @JackDjTom

I had the same need in the past too. And to be honest I ended up copying the ControlTemplate and set the needed Triggers there.

MahApps.Metro/src/MahApps.Metro/Themes/DropDownButton.xaml

Lines 37 to 151 in 29a0ac4

	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="{x:Type mah:DropDownButton}">
	<Border x:Name="PART_Border"
	Background="Transparent"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding mah:ControlsHelper.CornerRadius}"
	SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
	UseLayoutRounding="True">
	<mah:ClipBorder x:Name="PART_ClipBorder"
	CornerRadius="{TemplateBinding mah:ControlsHelper.CornerRadius}"
	SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
	<Button x:Name="PART_Button"
	HorizontalAlignment="Stretch"
	VerticalAlignment="Stretch"
	HorizontalContentAlignment="Stretch"
	VerticalContentAlignment="Stretch"
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	FocusVisualStyle="{TemplateBinding FocusVisualStyle}"
	Foreground="{TemplateBinding Foreground}"
	RenderOptions.ClearTypeHint="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(RenderOptions.ClearTypeHint), Mode=OneWay}"
	SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
	Style="{TemplateBinding ButtonStyle}">
	<DockPanel x:Name="PART_Content"
	Focusable="False"
	LastChildFill="True">
	<!-- Material - ChevronDown -->
	<ContentControl x:Name="PART_Arrow"
	Width="9"
	Height="9"
	Margin="0 0 3 0"
	HorizontalAlignment="Center"
	VerticalAlignment="Center"
	Content="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
	DockPanel.Dock="Right"
	Foreground="{TemplateBinding ArrowBrush}"
	Style="{DynamicResource MahApps.Styles.ContentControl.PathIcon}"
	Visibility="{TemplateBinding ArrowVisibility}" />
	<StackPanel x:Name="PART_ContentOrientation"
	HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
	Focusable="False"
	Orientation="Horizontal">
	<ContentPresenter HorizontalAlignment="Center"
	VerticalAlignment="Center"
	Content="{TemplateBinding Icon}"
	ContentTemplate="{TemplateBinding IconTemplate}"
	Focusable="False"
	RecognizesAccessKey="True"
	UseLayoutRounding="False" />
	<mah:ContentControlEx x:Name="PART_ButtonContent"
	Padding="{TemplateBinding Padding}"
	HorizontalAlignment="Center"
	VerticalAlignment="Center"
	HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
	Content="{Binding Content, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
	ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ControlsHelper.ContentCharacterCasing)}"
	ContentStringFormat="{TemplateBinding ContentStringFormat}"
	ContentTemplate="{TemplateBinding ContentTemplate}"
	ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
	RecognizesAccessKey="{TemplateBinding mah:ControlsHelper.RecognizesAccessKey}"
	SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
	UseLayoutRounding="False" />
	</StackPanel>
	</DockPanel>
	<Button.ContextMenu>
	<ContextMenu x:Name="PART_Menu"
	MinWidth="{TemplateBinding ActualWidth}"
	DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
	GroupStyleSelector="{TemplateBinding GroupStyleSelector}"
	IsOpen="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
	ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
	ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
	ItemStringFormat="{TemplateBinding ItemStringFormat}"
	ItemTemplate="{TemplateBinding ItemTemplate}"
	ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
	ItemsPanel="{TemplateBinding ItemsPanel}"
	ItemsSource="{TemplateBinding ItemsSource}"
	Placement="Bottom"
	StaysOpen="False"
	Style="{TemplateBinding MenuStyle}"
	UseLayoutRounding="False" />
	</Button.ContextMenu>
	</Button>
	</mah:ClipBorder>
	</Border>
	<ControlTemplate.Triggers>
	<Trigger Property="Content" Value="{x:Null}">
	<Setter TargetName="PART_ButtonContent" Property="Margin" Value="0" />
	</Trigger>
	<Trigger Property="Orientation" Value="Vertical">
	<Setter TargetName="PART_Arrow" Property="DockPanel.Dock" Value="Bottom" />
	<Setter TargetName="PART_Arrow" Property="Margin" Value="0 0 0 3" />
	<Setter TargetName="PART_ContentOrientation" Property="Orientation" Value="Vertical" />
	</Trigger>
	<MultiTrigger>
	<MultiTrigger.Conditions>
	<Condition Property="IsMouseOver" Value="True" />
	<Condition SourceName="PART_Button" Property="IsEnabled" Value="True" />
	</MultiTrigger.Conditions>
	<Setter TargetName="PART_Arrow" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowMouseOverBrush, Mode=OneWay}" />
	</MultiTrigger>
	<Trigger SourceName="PART_Button" Property="IsPressed" Value="True">
	<Setter TargetName="PART_Arrow" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPressedBrush, Mode=OneWay}" />
	</Trigger>
	<Trigger SourceName="PART_Button" Property="IsEnabled" Value="False">
	<Setter Property="Opacity" Value=".55" />
	</Trigger>
	</ControlTemplate.Triggers>
	</ControlTemplate>
	</Setter.Value>
	</Setter>

Maybe there is a better solution for it, but that is how I did it.

Happy coding
Tim