一起搭WPF架构之浅写View界面按钮的进阶设计

1 前言

在简单对View做出区域分割后，就需要开始往View中填充控件。最粗暴的方式就是使用工具箱，把自己想要拖动的控件放里面。控件使用是没有什么大问题，但是对于想要统一的风格，还是需要代码进行简单的设计。

2 基础设计

为了后期的界面切换，采用RadioButton，可根据需要，将按钮拖动到对应的Gird网格中，效果如下：

对应代码如下：

<RadioButton Grid.Row="1" Content="1" />
<RadioButton Grid.Row="2" Content="2" />
<RadioButton Grid.Row="3" Content="3" />

可以看出，代码中仅使用到网格的行设置和内容设置，所显示出来的按钮效果也不好看。那么针对这种情况，我们开始进行的设计工作！

3 简单设计

对于RadioButton的简单设计，我们可以从设置 RadioButton 的文本属性和样式，如字体大小、粗细和样式着手，我们在设置了字体大小、字体类型、粗细等。

对应代码：

<RadioButton Grid.Row="1" Content="Click me!" FontSize="14" FontWeight="Bold" FontFamily="MV Boli" GroupName="1" />
<RadioButton Grid.Row="2" Content="Change Page" FontSize="12" FontWeight="Bold" FontFamily="MV Boli" GroupName="1"/>
<RadioButton Grid.Row="3" Content="It's Ok!" FontSize="14" FontWeight="Bold" FontFamily="MV Boli" GroupName="1"/>

• Content——文本内容
• FontSize——字体大小
• FontWeight——字体粗细
• FontFamily——字体选择

4 复杂设计

对于RadioButton按钮来说，每次选点都只能选点一个小圆点，在设计界面时，整体搭配不协调。现在设置为整个点击，点击后并将改变背景的颜色。

代码如下：

<RadioButton Grid.Row="1" GroupName="1">
 <RadioButton.Template>
     <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>
 </RadioButton.Template>
</RadioButton>

• ControlTemplate——定义了RadioButton的自定义外观。在这个模板中，使用了Grid作为布局容器，并在其中放置了一个TextBlock来显示文本。
• Triggers——在ControlTemplate.Triggers中，定义了一个触发器，当RadioButton的IsChecked属性为True时，将背景色设置为指定的颜色。

5 进阶版style设计

既然已经可设置一个RadioButton模板转换为资源，在需要使用自定义 RadioButton 模板的地方，通过资源键引用这个模板。

完整代码公布如下：

<Window x:Class="InterfacialDesign.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:InterfacialDesign.Views"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="600" WindowStyle="None"
        Background="Transparent" AllowsTransparency="True" >
    <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>
    <Grid>
        <Grid>
            <Border CornerRadius="50,20,20,50" Background="#FFFFC865">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="120"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="120"/>
                            </Grid.RowDefinitions>
                            <RadioButton Grid.Row="1"  GroupName="1" Style="{StaticResource CustomRadioButtonStyle}"/>
                            <RadioButton Grid.Row="2"  GroupName="1" Style="{StaticResource CustomRadioButtonStyle}"/>
                            <RadioButton Grid.Row="3"  GroupName="1" Style="{StaticResource CustomRadioButtonStyle}"/>
                        </Grid>
                    </Border>
                    <Border Grid.Column="1" Background="White" BorderBrush="#FFFFBF49" BorderThickness="3" 
                    CornerRadius="20,20,20,20" >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="80"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="80"/>
                            </Grid.RowDefinitions>
                        </Grid>
                    </Border>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Window>

6 问题

这里不难发现依旧还存在问题，都是Click me的按钮，如何区分呢？style的设计到底如何设计，今天的探究就先探究到这里，后续再花时间仔细介绍！

总结

本文从简单到进阶，用实际效果和代码给出了按钮设计的美化效果，还有不足，后续再花时间进行详细记录！