专注于标签，文本块和边框 [英] Focus on Label, TextBlock and Border

问题描述

我想创建一个圆形的右上角和下角的平面按钮。

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>

鼠标悬停触发功能完美，但无法使点击触发功能正常工作。已经试过 IsKeyboardFocusWithin 和 IsFocused ，但是没有成功。

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.

推荐答案

您可以创建一个Button样式，那么只有您将IsPressed属性。

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

这篇关于专注于标签，文本块和边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！