一开始按钮的默认样式为:鼠标放到按钮上时,按钮上面就会出现一个蓝色的方框,
接下来是取消这个方框的代码:
<!-- 定义按钮的 ControlTemplate 取消鼠标划过按钮时的默认样式-->
<ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter TargetName="border" Property="Background" Value="DarkBlue">按钮变色样式</Setter>-->
<Setter TargetName="border" Property="Cursor" Value="Hand"></Setter>
</Trigger>
<!-- 其他触发器 -->
</ControlTemplate.Triggers>
</ControlTemplate>
<Button Margin="50,0,0,0" Command="{Binding InCommand}" BorderBrush="{x:Null}" Width="302" Background="{x:Null}" Height="193" HorizontalAlignment="Left" VerticalAlignment="Center" Template="{StaticResource CustomButtonTemplate}">
<Grid Width="302" Height="196">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<!-- 图片占据按钮高度的一部分 -->
<RowDefinition Height="8.635" />
<RowDefinition Height="46.365"/>
<!-- 文本自动调整高度 -->
</Grid.RowDefinitions>
<Image Source="Image/测试.png" VerticalAlignment="Top" Margin="-2,0,2,0" Grid.RowSpan="3" Height="156" OpacityMask="#FF8A5656" />
<TextBlock Text="AAAAAA" Grid.Row="2" VerticalAlignment="Top" Height="26" FontSize="14" TextAlignment="Center" Width="290" Margin="0,16,0,0" HorizontalAlignment="Center"/>
</Grid>
</Button>
效果如下所示:
接下来想增加一些样式:
代码如下:
样式:
<!--按钮样式-->
<!-- 定义按钮的 ControlTemplate -->
<ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
<Grid>
<!-- 此部分为按钮的背景 -->
<Border x:Name="BackgroundBorder" Background="{TemplateBinding Background}">
<ContentControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
<!-- 添加灰色方块和文本 -->
<Grid x:Name="HoverOverlay" Background="Gray" Opacity="0" Visibility="Collapsed">
<!-- 添加你希望显示的文本内容 -->
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<!-- 当鼠标进入按钮区域时显示灰色方块和文本 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="HoverOverlay" Property="Visibility" Value="Visible" />
<Setter TargetName="HoverOverlay" Property="Opacity" Value="0.7" />
<!-- 更改鼠标光标为小手 -->
<Setter Property="Cursor" Value="Hand" />
</Trigger>
<!-- 使用DataTrigger来检查鼠标是否悬停,显示Tag -->
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="HoverOverlay" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
按钮:
<Button Margin="50,0,0,0" Command="{Binding InCommand}" BorderBrush="{x:Null}" Width="302" Background="{x:Null}" Height="193" HorizontalAlignment="Left" VerticalAlignment="Center"
Template="{StaticResource CustomButtonTemplate}"
Tag="dfdfdfdfdfd">
<Grid Width="302" Height="196">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<!-- 图片占据按钮高度的一部分 -->
<RowDefinition Height="8.635" />
<RowDefinition Height="46.365"/>
<!-- 文本自动调整高度 -->
</Grid.RowDefinitions>
<Image Source="Image/测试.png" VerticalAlignment="Top" Margin="-2,0,2,0" Grid.RowSpan="3" Height="156" OpacityMask="#FF8A5656" />
<TextBlock Text="AAAAAA" Grid.Row="2" VerticalAlignment="Top" Height="26" FontSize="14" TextAlignment="Center" Width="290" Margin="0,16,0,0" HorizontalAlignment="Center"/>
</Grid>
</Button>