Focus on Label, TextBlock and Border

Question

Hi

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"/>

Answer 2

I think you should use ToggleButton instead of normal button -

<ToggleButton
    Background="Transparent">
    <ToggleButton.Template>
        <ControlTemplate
            TargetType="{x:Type ToggleButton}">
            <Border
                x:Name="MyButton"
                Height="25"
                Margin="0,5,0,0"
                CornerRadius="0 5 5 0"
                BorderThickness="1"
                BorderBrush="Gray">
                <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>
            <ControlTemplate.Triggers>
                <Trigger
                    Property="IsChecked"
                    Value="True">
                    <Setter
                        Property="Background"
                        Value="Red" />
                </Trigger>
                <Trigger
                    Property="IsMouseOver"
                    Value="True">
                    <Setter
                        Property="Background"
                        Value="Red" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>