zoukankan      html  css  js  c++  java
  • 微信聊天和通讯录按钮样式

    一、先用Path画一下轮廓

    <Path Stroke="Red" StrokeThickness="1" Margin="10" StrokeDashCap="Round">
         <Path.Data>
             <GeometryGroup>
                 <PathGeometry Figures="M 4,40 A 16,13 0 1 1 10,45 L 3,48 Z" />
             </GeometryGroup>
         </Path.Data>
    </Path>
    <Path Stroke="Red" StrokeThickness="1" StrokeDashCap="Round" Margin="50">
         <Path.Data>
             <GeometryGroup>
                 <PathGeometry Figures="M 12,30 A 6,10 0 1 1 18,30 L 30,40 L 30,45 L 0,45 L 0,40Z" />
                 <PathGeometry Figures="M 25,25 L 35,25"/>
                 <PathGeometry Figures="M 28,30 L 35,30"/>
                 <PathGeometry Figures="M 32,35 L 35,35"/>
             </GeometryGroup>
         </Path.Data>
    </Path>

    路径图如下

    二、将路径应用的样式里

        <!--聊天按钮的样式-->
        <Style x:Key="ChatStyle" TargetType="{x:Type RadioButton}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border>
                            <Path x:Name="btnPath" StrokeThickness="1" Stroke="Gray" Fill="#FF3E3E40">
                                <Path.Data>
                                    <GeometryGroup>
                                        <PathGeometry Figures="M 4,40 A 16,13 0 1 1 10,45 L 3,48 Z" />
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Fill" Value="#FF14D212" TargetName="btnPath"/>
                                <Setter Property="Stroke" Value="#FF14D212" TargetName="btnPath"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Stroke" Value="White" TargetName="btnPath"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsChecked"  Value="true"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.Setters>
                                    <Setter Property="Stroke" Value="#FF14D212" TargetName="btnPath"/>
                                </MultiTrigger.Setters>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--通讯录的样式-->
        <Style x:Key="FriendStyle" TargetType="{x:Type RadioButton}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border>
                            <Path x:Name="btnPath" StrokeThickness="1" Stroke="Gray" Fill="#FF3E3E40">
                                <Path.Data>
                                    <GeometryGroup>
                                        <PathGeometry Figures="M 12,30 A 6,10 0 1 1 18,30 L 30,40 L 30,45 L 0,45 L 0,40Z" />
                                        <PathGeometry Figures="M 25,25 L 35,25"/>
                                        <PathGeometry Figures="M 28,30 L 35,30"/>
                                        <PathGeometry Figures="M 32,35 L 35,35"/>
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Fill" Value="#FF14D212" TargetName="btnPath"/>
                                <Setter Property="Stroke" Value="#FF14D212" TargetName="btnPath"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Stroke" Value="White" TargetName="btnPath"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsChecked" Value="true"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.Setters>
                                    <Setter Property="Stroke" Value="#FF14D212" TargetName="btnPath"/>
                                </MultiTrigger.Setters>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    看下效果图

    注意要点有几个:

    1、Path原来必须要有填充,也就是说Fill必须要有值,否则会认为是透明,点击不到。

    2、一定要设置MultiTrigger,否则当button被选中的时候,鼠标划过,依然会变白色。

  • 相关阅读:
    分享我的2014年3月unity3d面试题与参考答案(转)
    Unity3D 面试ABC
    MiniJson解释Json字符串
    Unity3D研究之支持中文与本地文件的读取写入(转)
    unity3d--NGUI制作中文字体
    吊炸天之十步完全理解SQL
    mysql主从同步碰到的问题
    Redis 安装碰到问题
    在Centos系统下使用命令安装gnome图形界面程序
    centos7 网络问题
  • 原文地址:https://www.cnblogs.com/ZXdeveloper/p/5997372.html
Copyright © 2011-2022 走看看