Question

I have a style for button as per below code.

<Style TargetType="Button" x:Key="TransparentButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border HorizontalAlignment="Center" x:Name="borderTemplate"
                        Background="Transparent">
                    <ContentPresenter/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="borderTemplate"
                                Property="Border.BorderBrush" Value="Gray" />
                        <Setter TargetName="borderTemplate"
                                Property="Border.BorderThickness" Value="1" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="borderTemplate"
                                Property="Border.BorderBrush" Value="Lime" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I need to set the background of button

1.To gray as soon as “MouseUp“ event occurred.

2.And set it to Default(say white)as soon as Focus Of Button being changed or say Focus Being lost.

Is there any way to solve this using Trigger or EventTrigger??.

---

See One example for above code with image

Button with Above style.

 <Button Background="Black" Style="{StaticResource TransparentButton}"
         Content="0123456789" Height="15" HorizontalAlignment="Left"
         Name="button2" VerticalAlignment="Top" Margin="70,17,0,0" />

Button will look as per below image after above style being applied.

Answer 1

This can be done by using RadioButton instead of Button
just have a look at this

<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
    <Setter Property="Background" Value="#F4F4F4"/>
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                 <Border  HorizontalAlignment="Center" x:Name="borderTemplate" Background="Transparent" VerticalAlignment="Center">
                            <ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center"/>
                        </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="borderTemplate" Value="#FFE4E4E4"/>
                        <Setter Property="HorizontalAlignment" TargetName="contentPresenter" Value="Center"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" TargetName="borderTemplate" Value="#FFA1A1A1"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Grid x:Name="LayoutRoot">
    <StackPanel/>
    <RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,86.04,0,0" Style="{StaticResource RadioButtonStyle1}"/>
    <RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,106,0,0" Style="{StaticResource RadioButtonStyle1}"/>
</Grid>