Change button color

Feb 25, 2013 at 6:17 AM
Hi guys,

could somebody please give some example how to change the background color of ToggleButton when it is checked.
I have tried this code, but it doesn't work:
    <Style TargetType="{x:Type Fluent:ToggleButton}">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="AliceBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>
Mar 1, 2013 at 4:49 PM
Hi,
you have to change the colors the control is refering to. Or you style it yourself like:
<ControlTemplate x:Key="ButtonBackstageControlTemplate" TargetType="{x:Type Fluent:Button}">
                <Grid>
                    <Border x:Name="border" BorderThickness="1" Margin="0" Background="Transparent" BorderBrush="LightGray">
                        <StackPanel Margin="2" x:Name="stackPanel">
                            <ContentPresenter x:Name="iconImage" HorizontalAlignment="Center" Height="32" Width="32" VerticalAlignment="Center" Content="{Binding LargeIcon, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource StringToImageConvert}}" Margin="9,9,9,0" SnapsToDevicePixels="True"/>
                            <Fluent:TwoLineLabel x:Name="twoLineLabel" Margin="7,7,7,5" VerticalAlignment="Center" Text="{TemplateBinding Header}"/>
                        </StackPanel>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="iconImage" Value="0.5"/>
                        <Setter Property="Opacity" TargetName="twoLineLabel" Value="0.5"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FFC8C8C9"/>
                        <Setter Property="Effect" TargetName="iconImage">
                            <Setter.Value>
                                <Fluent:GrayscaleEffect/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="0.1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush" TargetName="border">
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="0.6"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="0.1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush" TargetName="border">
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="0.6"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="BorderBrush" TargetName="border">
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Background" TargetName="border" >
                            <Setter.Value>
                                <SolidColorBrush Color="#FF5195B7" Opacity="0.5"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            <Style TargetType="{x:Type Fluent:Button}" x:Key="ButtonBackstageStyle">
                <Setter Property="Template" Value="{StaticResource ButtonBackstageControlTemplate}"/>
                <Setter Property="Height" Value="81"/>
                <Setter Property="Width" Value="85"/>
            </Style>
When you put this in your Resourcedictionary you get an Office2013-style button (you have to set Style="{StaticResource ButtonBackstageStyle}" in your button)