WPF 修改按钮默认样式

平安无恙吖~

已于 2023-10-25 11:42:40 修改

阅读量806

点赞数

分类专栏： WPF WPF之MVVM框架文章标签： c# wpf 前端框架

于 2023-10-25 10:27:27 首次发布

本文链接：https://blog.csdn.net/2301_79870947/article/details/134027621

版权

WPF之MVVM框架同时被 2 个专栏收录

5 篇文章

订阅专栏

WPF

2 篇文章

订阅专栏

一开始按钮的默认样式为：鼠标放到按钮上时，按钮上面就会出现一个蓝色的方框，

接下来是取消这个方框的代码：

       <!-- 定义按钮的 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>