Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Do you have Expression Blend? It can be done easily by right-clicking on the ToggleButton and Select "Edit Template" then "Edit a copy...". From the template go to the "States" Tab and select the "Checked" state. Reset the background color, differing from the base state and your done. </p> <p>See sample:</p> <p></p> <pre><code>&lt;Window.Resources&gt; &lt;Style x:Key="ButtonFocusVisual"&gt; &lt;Setter Property="Control.Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate&gt; &lt;Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"&gt; &lt;GradientStop Color="#F3F3F3" Offset="0"/&gt; &lt;GradientStop Color="#EBEBEB" Offset="0.5"/&gt; &lt;GradientStop Color="#DDDDDD" Offset="0.5"/&gt; &lt;GradientStop Color="#CDCDCD" Offset="1"/&gt; &lt;/LinearGradientBrush&gt; &lt;SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/&gt; &lt;Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"&gt; &lt;Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/&gt; &lt;Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/&gt; &lt;Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/&gt; &lt;Setter Property="BorderThickness" Value="1"/&gt; &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt; &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt; &lt;Setter Property="Padding" Value="1"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ToggleButton}"&gt; &lt;Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="true" Background="White"&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True"&gt; &lt;VisualStateGroup.Transitions&gt; &lt;VisualTransition GeneratedDuration="0:0:0.5"/&gt; &lt;/VisualStateGroup.Transitions&gt; &lt;/VisualStateGroup&gt; &lt;VisualStateGroup x:Name="CheckStates"&gt; &lt;VisualState x:Name="Checked"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Chrome"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="Red"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Unchecked"/&gt; &lt;VisualState x:Name="Indeterminate"/&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;VisualStateManager.CustomVisualStateManager&gt; &lt;ei:ExtendedVisualStateManager/&gt; &lt;/VisualStateManager.CustomVisualStateManager&gt; &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt; &lt;/Microsoft_Windows_Themes:ButtonChrome&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsKeyboardFocused" Value="true"&gt; &lt;Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsChecked" Value="true"&gt; &lt;Setter Property="RenderPressed" TargetName="Chrome" Value="true"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsEnabled" Value="false"&gt; &lt;Setter Property="Foreground" Value="#ADADAD"/&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Window.Resources&gt; &lt;Grid x:Name="LayoutRoot"&gt; &lt;ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Height="36" Margin="116,131,0,0" VerticalAlignment="Top" Width="122" Background="White" Style="{DynamicResource ToggleButtonStyle}"/&gt; &lt;/Grid&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload