zoukankan      html  css  js  c++  java
  • RadioButton改写的开关按钮

     先上效果图:

     这个控件其实是俩个RadioButton,通过样式就可以实现。

    样式资源:

     1 <Style x:Key="Tong_Yong_RadioButtonStyle" TargetType="{x:Type RadioButton}">
     2                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
     3                 <Setter Property="Background" Value="White" />
     4                 <Setter Property="BorderThickness" Value="0" />
     5                 <Setter Property="HorizontalContentAlignment" Value="Center" />
     6                 <Setter Property="VerticalContentAlignment" Value="Center" />
     7                 <Setter Property="Padding" Value="0" />
     8                 <Setter Property="Margin" Value="10,10,0,0" />
     9                 <Setter Property="Cursor" Value="Hand" />
    10                 <Setter Property="Height" Value="{Binding Height}" />
    11                 <Setter Property="Width" Value="{Binding Width}" />
    12                 <Setter Property="Cursor" Value="Hand" />
    13                 <Setter Property="Template">
    14                 <Setter.Value>
    15                         <ControlTemplate TargetType="{x:Type RadioButton}">
    16                             <Grid>
    17                                 <!--  选中或者鼠标移入颜色  -->
    18                                 <Grid
    19                                     x:Name="B"
    20                                     Background="#0099ff"
    21                                     Visibility="Collapsed" />
    22                                 <!--  默认颜色  -->
    23                                 <Grid x:Name="A" Background="{TemplateBinding Background}" />
    24 
    25                                 <ContentPresenter
    26                                     x:Name="b"
    27                                     HorizontalAlignment="Center"
    28                                     VerticalAlignment="Center"
    29                                     TextBlock.Foreground="White" />
    30                                 <ContentPresenter
    31                                     x:Name="a"
    32                                     HorizontalAlignment="Center"
    33                                     VerticalAlignment="Center"
    34                                     TextBlock.Foreground="Black" />
    35                             </Grid>
    36                  <ControlTemplate.Triggers>
    37                                 <Trigger Property="IsChecked" Value="True">
    38                                     <Setter TargetName="A" Property="Visibility" Value="Collapsed" />
    39                                     <Setter TargetName="B" Property="Visibility" Value="Visible" />
    40                                     <Setter TargetName="a" Property="Visibility" Value="Collapsed" />
    41                                     <Setter TargetName="b" Property="Visibility" Value="Visible" />
    42                                 </Trigger>
    43                             </ControlTemplate.Triggers>
    44                         </ControlTemplate>
    45                     </Setter.Value>
    46                 </Setter>
    47             </Style>

    2.引用样式

     <RadioButton
                                    Width="80"
                                    Margin="0"
                                    Content=""
                                    Foreground="Black"                         
                                    Style="{DynamicResource Tong_Yong_RadioButtonStyle}" />
                                <RadioButton
                                    Width="80"
                                    Margin="0"
                                    Content=""
                                    Foreground="Black"
                                    IsChecked="True"
                                    Style="{DynamicResource Tong_Yong_RadioButtonStyle}" />
  • 相关阅读:
    canvas上的像素操作(图像复制,细调)
    AMD、CMD、CommonJS 和 ES6 模块化规范
    JS垃圾回收
    函数式编程中如何处理副作用?
    vue中的$on,$emit,$once,$off源码实现
    重新学习react生命周期
    keep alive实现原理
    读取 url 参数方法
    使用Bootstratp Blazor +EF Codefirst 愉快的增删改查!
    记录一下爬取微信小程序视频的过程!
  • 原文地址:https://www.cnblogs.com/king10086/p/12366905.html
Copyright © 2011-2022 走看看