• WPF 中的RadioButton 样式设置
  • 发布于 2个月前
  • 489 热度
    0 评论
  • 卧龙生
  • 1 粉丝 64 篇博客
  •   
RadioButton  实现下面的效果:

1)RadioButton来实现动画
Border嵌套 Ellipse并设置ScaleTransform ScaleX= 0 ScaleY =0 ,当选中Checked 将ScaleX= 0.4 ScaleY =0.4
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:wpfs="clr-namespace:WPFDevelopers.Minimal.Helpers">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="{DynamicResource WhiteSolidColorBrush}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border CornerRadius="{Binding ElementName=PART_Border,Path=CornerRadius}"
                                Background="{Binding ElementName=PART_Border,Path=Background}"
                                Margin="1,1,2,1">
                            <Border x:Name="PART_Border" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    CornerRadius="100"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BaseColor}"/>
                                </Border.BorderBrush>
                                <Grid Width="16" Height="16">
                                    <Ellipse x:Name="PART_Ellipse" Fill="{DynamicResource WhiteSolidColorBrush}" 
                                         MinWidth="6" MinHeight="6"
                                         RenderTransformOrigin=".5,.5">
                                        <Ellipse.RenderTransform>
                                            <ScaleTransform ScaleX="0" ScaleY="0"/>
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Grid>
                            </Border>
                        </Border>
                        <ContentPresenter x:Name="PART_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}"
                                          TextElement.Foreground="{DynamicResource PrimaryTextSolidColorBrush}"/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <!--<ColorAnimation Storyboard.TargetName="PART_ContentPresenter"
                                                        Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
                                                        To="{DynamicResource PrimaryPressedColor}"
                                                        Duration="00:00:.1"/>
                                        <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="PART_Border"
                                                        To="{DynamicResource PrimaryPressedColor}" 
                                                        Duration="00:00:.1"/>
                                        <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="PART_Border"
                                                        To="{DynamicResource PrimaryPressedColor}" 
                                                        Duration="00:00:.1"/>-->
                                        <!--<ThicknessAnimation Storyboard.TargetName="PART_Border"
                                                         Storyboard.TargetProperty="BorderThickness" 
                                                         To="0,0,0,0" Duration="00:00:.1"/>-->

                                        <DoubleAnimation Storyboard.TargetName="PART_Ellipse"
                                                         Storyboard.TargetProperty="(Ellipse.RenderTransform).(ScaleTransform.ScaleX)" 
                                                         To=".4" Duration="00:00:.3"
                                                         EasingFunction="{StaticResource ExponentialEaseOut}"/>

                                        <DoubleAnimation Storyboard.TargetName="PART_Ellipse"
                                                         Storyboard.TargetProperty="(Ellipse.RenderTransform).(ScaleTransform.ScaleY)" 
                                                         To=".4" Duration="00:00:.3"
                                                         EasingFunction="{StaticResource ExponentialEaseOut}"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!--<Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="{StaticResource EnabledOpacity}" />
                        </Trigger>-->
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                            <Setter Property="TextElement.Foreground" TargetName="PART_ContentPresenter" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsChecked" Value="False" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{DynamicResource PrimaryMouseOverSolidColorBrush}"/>
                            <!--<MultiTrigger.EnterActions>
                                <BeginStoryboard x:Name="PART_BeginStoryboard">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="PART_Border"
                                                        To="{StaticResource PrimaryPressedColor}" 
                                                        Duration="00:00:.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="PART_BeginStoryboard"></RemoveStoryboard>
                            </MultiTrigger.ExitActions>-->
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
2)Styles.RadioButton.xaml 代码如下;
<WrapPanel Margin="0,10">
                   <RadioButton Content="Option A"/>
                    <RadioButton Content="Option B" Margin="10,0" IsChecked="True"/>
                    <RadioButton Content="Option C" IsEnabled="False"/>
 </WrapPanel>             
Nuget Install-Package WPFDevelopers.Minimal

用户评论