WPF UI框架界面开发教程（十二）

最新推荐文章于 2024-09-24 16:37:45 发布

有技巧搬砖

最新推荐文章于 2024-09-24 16:37:45 发布

阅读量741

点赞数

本文链接：https://blog.csdn.net/liaohaiyin/article/details/119994533

版权

MVVM 同时被 3 个专栏收录

92 篇文章 18 订阅

订阅专栏

UI设计

92 篇文章 9 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

为了配合界面统一风格，在样式中添加单选按钮，RadioButton选中后，Background变成蓝色，圆角给个1000。

在样式中先添加两列，第一列显示是否选中单选按钮，而且给的高度和宽度都是20，所以显示是圆形，第二列是显示文本内容，演示看下RadioButton运行后效果。

先不添加依赖属性，只给默认样式代码：

<Style x:Key="FocusVisualStyle">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="-2" SnapsToDevicePixels="True"
                               StrokeThickness="1" StrokeDashArray="1 2"
                               Stroke="{StaticResource WordBlueBrush}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RadioButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisualStyle}" />
        <Setter Property="Background" Value="{StaticResource BackgroundLightBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource WordBlueBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource ForegroundMainBrush}"/>
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="radioButtonBorder"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="1000"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="1,1,5,1"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Effect="{TemplateBinding Effect}"
                                Width="20"
                                Height="20">
                            <Border x:Name="border" Margin="2" Background="Transparent" CornerRadius="1000">
                            </Border>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                          Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource WordBlueBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value="0.5" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource WordBlueBrush}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource WordBlueBrush}" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource WordBlueBrush}" />
            </Trigger>
        </Style.Triggers>
    </Style>