我想创建一个带有圆角右上角和下角的平面按钮。此按钮需要在单击和鼠标悬停时更改背景。
目前我的Markup看起来像这样:
<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
但它无效。
答案 0 :(得分:1)
我认为你应该使用ToggleButton代替普通按钮 -
<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>
答案 1 :(得分:0)
您可以创建一个Button样式,然后只有IsPressed Property。请使用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"/>