WPF圆角按钮模板定制：绑定模板元素值需求

需求说明 #

需要实现可统一配置的WPF圆角按钮，支持以下自定义项：

• 文本/内容
• FontAwesome格式图标
• 背景色
• 前景色
• 边框画刷（控制图标颜色）
  要求所有应用该样式的按钮外观完全一致，同时支持自定义布局或固定默认布局。

问题分析 #

现有RoundedButtonStyle缺少内容呈现逻辑，导致第一个按钮的StackPanel内容无法正确显示；第二个按钮使用内联模板虽然能显示内容，但无法复用样式。需要完善样式模板，同时保留内容的灵活性。

实现代码 #

1. 完善后的按钮样式 #

<Style x:Key="RoundedButtonStyle" TargetType="Button">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="ButtonBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="15">
                    <!-- 使用ContentPresenter呈现按钮内容，兼容自定义布局 -->
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Margin="4"/>
                </Border>
                <!-- 可选：添加按钮交互状态效果 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Opacity" Value="0.9"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Opacity" Value="0.8"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 图标资源定义（优化绑定逻辑） #

<Viewbox x:Key="trash-alt-regular" x:Shared="False">
    <Path Data="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z"
          Fill="{Binding Path=BorderBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
</Viewbox>

注：将图标Fill的绑定目标从Border改为Button，避免嵌套布局导致的绑定失效问题。

3. 按钮使用示例 #

方式一：自定义布局（与原第一个按钮结构一致）

<Button Name="Row4_Column1"
        BorderBrush="{DynamicResource TextOnPrimaryBrush}"
        Background="{DynamicResource PrimaryBrush}"
        Style="{DynamicResource RoundedButtonStyle}">
    <StackPanel Orientation="Horizontal">
        <Viewbox Width="15" Height="15">
            <StaticResource ResourceKey="trash-alt-regular" />
        </Viewbox>
        <TextBlock VerticalAlignment="Center"
                   Margin="5,0,0,0"
                   Text="New"
                   Foreground="{TemplateBinding Foreground}"/>
    </StackPanel>
</Button>

方式二：复用样式的统一布局按钮

<Button Name="Row4_Column2"
        BorderBrush="{DynamicResource TextOnPrimaryBrush}"
        Background="{DynamicResource PrimaryBrush}"
        Foreground="{DynamicResource TextOnPrimaryBrush}"
        Style="{DynamicResource RoundedButtonStyle}">
    <StackPanel Orientation="Horizontal">
        <Viewbox Width="15" Height="15">
            <StaticResource ResourceKey="trash-alt-regular" />
        </Viewbox>
        <TextBlock VerticalAlignment="Center"
                   Margin="5,0,0,0"
                   Text="New"/>
    </StackPanel>
</Button>

关键说明 #

• 样式通过ContentPresenter兼容任意自定义内容，既可以传入复杂布局，也可以直接传入纯文本/单个图标
• 图标颜色绑定到Button的BorderBrush，满足“边框画刷控制图标颜色”的需求
• 样式中设置了默认宽高、边框厚度，可通过按钮实例属性直接覆盖
• 可选添加的交互状态效果，提升按钮的用户体验

内容的提问来源于stack exchange，提问作者Jason