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的设计到底如何设计,今天的探究就先探究到这里,后续再花时间仔细介绍!
总结
本文从简单到进阶,用实际效果和代码给出了按钮设计的美化效果,还有不足,后续再花时间进行详细记录!