Question

I want to create a flat button with rounded right top and bottom corners. This button needs to have the background changed on clicked and on mouse over.

Currently my Markup looks like this:

    <Border x:Name="MyButton" Height="25" Margin="0,5,0,0" CornerRadius="0 5 5 0" BorderThickness="1" BorderBrush="Gray" Style="{StaticResource myStyle1}">
        <StackPanel Orientation="Horizontal" Margin="8,0,0,0">
            <Image Source="image.jpg" Height="20"/>
            <TextBlock Text="My Button"/> <!-- Could also be a label if needs to be. -->
        </StackPanel>
    </Border>

    <Style x:Key="myStyle1" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="{StaticResource MainContentForegroundColor}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red" />
            </Trigger>
        </Style.Triggers>
    </Style>

The mouse over trigger works perfectly but i can’t get the click trigger to work… i’ve tried IsKeyboardFocusWithin and IsFocused but it didn’t work.

Answer 1

You can create a Button style, then only you will IsPressed Property. See the below code using VSM.

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF760D0D"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF675A88"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="border" BorderBrush="#FF5A8876" BorderThickness="3" Background="#FFF4EDED"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


<Button HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="180" Height="61" Content="Button"/>