覆盖 wpf 中按钮的默认视觉样式的简单工作示例

Simple working example to override default visual style of a button in wpf

我想为我的按钮创建自定义视觉样式。
我需要一个简单的工作示例来说明如何覆盖按钮的默认视觉样式。以及如何应用它的简单说明。 我想让一些东西起作用,所以我可以从那里开始并进一步试验我的方法。

我尝试添加一个新的资源字典如下:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style x:Key="mstyle" TargetType="Button">
    <Setter Property="FontWeight" Value="Bold" />
</Style>

</ResourceDictionary>

之后我在 运行 时间内创建了一些新按钮并尝试将此样式应用于它:

    Dim MyButton As New Button
    Dim st As New Style
    st = Application.Current.FindResource("mstyle")
    MyButton.Style = st

当我尝试 运行 时,我收到一个错误,提示无法找到资源 'mstyle'。

在大多数情况下你不需要任何代码来做到这一点你所需要的只是在资源字典或 window 资源中定义一个自定义样式来定位你的按钮,这里是一个例子:

 <Style x:Key="DarkStyleButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#373737" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontSize" Value="12" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="4" Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" />
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#E59400" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="White" />
                        <Setter Property="Foreground" Value="Black" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="Gray" />
                        <Setter Property="Foreground" Value="LightGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  • 首先为您要自定义的属性设置值,

  • 然后设置按钮模板,不要忘记添加 将保留按钮内容的 ContentPresenter

  • 最终定义触发器来处理鼠标悬停、点击等等 否则你想在触发时设置自定义外观(例如 desable/enabled )

如何在此处使用该样式

 <Button  x:Name="BrowseButton" Margin="5"  Style="{StaticResource DarkStyleButton}" ToolTip="tooltip about the button">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="../BrowseImage.png"/>
                            <TextBlock Text="Browse" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5"></TextBlock>
                        </StackPanel>
                    </Button.Content>
                </Button>