How to create yellow toggle button like Word options - wpf

Question

I'm trying to create a menu with buttons similar to the options menu in Word (below).
Is this a specific WPF control that I'm missing, or a custom styled button? I tried setting the background when toggled, but it doesn't look anything like it:
<ToggleButton>
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=parentButton, Path=IsChecked}" Value="True">
<Setter Property="Background" Value="Orange"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Label Content="Modify Variations"></Label>
</Border>
</ToggleButton>

Answer 1

You can try like this !!!
<ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
<Border x:Name="outerBorder" BorderBrush="Black">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="Transparent" Offset="0.125"/>
<GradientStop Color="Transparent" Offset="0.724"/>
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="outerBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="0.004"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFFDF9E8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFFDEAA2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFFDE794"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="outerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFF7D84B"/>
</ColorAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="outerBorder">
<EasingThicknessKeyFrame KeyTime="0" Value="1"/>
</ThicknessAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="outerBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<CornerRadius>5</CornerRadius>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="innerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFFFE48A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="innerBorder">
<EasingColorKeyFrame KeyTime="0" Value="#FFC2762B"/>
</ColorAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="innerBorder">
<EasingThicknessKeyFrame KeyTime="0" Value="2"/>
</ThicknessAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="innerBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<CornerRadius>5</CornerRadius>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="innerBorder" Background="Transparent" BorderBrush="Black">
<TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Border>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ToggleButton Content="ToggleButton" Margin="172,145,93,147" Template="{DynamicResource ToggleButtonControlTemplate1}" />
</Grid>

Answer 2

a Template like this will help you
<Window.Resources>
<Style TargetType="ToggleButton">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="10,5,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="bord" BorderThickness="{TemplateBinding Property=BorderThickness}" CornerRadius="3">
<ContentPresenter VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}" Margin="{TemplateBinding Property=Padding}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<!--put setters here to change button background when IsChecked = true-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
notice that you can add other Triggers for example: IsEnabled, IsMouseOver, IsPressed to customize your own ToggleButton Style
Edit:
you can also get Microsoft word theme file here
WPF Office 2010 Blue Theme