一起搭WPF架构之按钮的进阶设计学习

---

1 前言

《一起搭WPF架构之浅写View界面按钮的进阶设计》中介绍了按钮的简单设计到进阶设计，这次接着上次进阶设计来做进一步的介绍。

---

2 进阶设计

代码介绍：

<Window.Resources>
        <Style x:Key="CustomRadioButtonStyle" TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="RadioButton">
                        <Grid Background="Transparent" Height="50" Name="back">
                            <TextBlock Text="Click me!" FontSize="14" FontWeight="Bold" FontFamily="MV Boli"
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="#33FFFCC2" TargetName="back"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

• Window.Resources——定义了窗口的资源字典，这里可以存放样式、数据模板等资源。新建项目中没有资源字典，需要手动添加。
• Style——样式，常用TargetType表示定义什么控件的样式。
• Setter与Template结合——设置样式的模板属性。
• ControlTemplate——自定义控件的外观和行为。这里是指定了 RadioButton 的外观和布局。
• Grid——就是之前介绍过的网格，HorizontalAlignment="Center" VerticalAlignment="Center"表示水平和垂直对齐方式都设置为居中。
• Triggers——定义了模板的触发器。

3 问题解决

介绍完style的设置，接着来解决上篇所提到的问题，我们在样式中采用了TextBlock控件，并统一命名为Text="Click me!" ，为了改变按钮的名称，我们可以这样做！

代码如下：

<TextBlock Text="{TemplateBinding Content}" FontSize="14" FontWeight="Bold" FontFamily="MV Boli"
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>

• 模板绑定（TemplateBinding）——将控件的某个属性（如 Content）绑定到模板中的某个属性上（如 TextBlock.Text）
  在使用style时，我们可以单独设置Content，改变其设定值。
  代码如下：

<RadioButton Grid.Row="1"  GroupName="1" Content="1" Style="{StaticResource CustomRadioButtonStyle}"/>
<RadioButton Grid.Row="2"  GroupName="1" Content="2" Style="{StaticResource CustomRadioButtonStyle}"/>
<RadioButton Grid.Row="3"  GroupName="1" Content="3" Style="{StaticResource CustomRadioButtonStyle}"/>

具体效果如下：

我们将RadioButton的Content重新赋值，可以解决问题。
前提是需要把style中的TextBlock.Text与Content进行绑定！

---

总结

本文介绍了style的使用，并解决上一篇的遗留问题，对于采用模板绑定将需要的控件属性进行绑定就可以解决问题！