zoukankan      html  css  js  c++  java
  • 记录一些WPF常用样式方便以后复用(二)(Button、CheckBox、输入账号密码框)(转)

    Button (一)

    imageimage

    复制代码
    <Style x:Key="ButtonSaveStyle" TargetType="{x:Type Button}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <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 Button}">
                            <Border  x:Name="Chrome" CornerRadius="5" Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" >
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <!--<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Themes:ButtonChrome>-->
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="Chrome" Value="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="#ADADAD"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    <!--Background为背景颜色,BorderBrush为鼠标移入的背景-->
         <Button Width="100" Height="35" VerticalAlignment="Top" Background="#FFFD5F4F" BorderBrush="#FFEC685C" Content="保存" Style="{DynamicResource ButtonSaveStyle}" Foreground="White" TextOptions.TextFormattingMode="Display" FontSize="13.333"/>
    复制代码

    Button(二)

    image

    复制代码
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <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 Button}">
                            <Border x:Name="border" Width="36" Height="36"  Background="#FF373737" CornerRadius="18" BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
                                <Path Data="M11,11 L24,24 M24,11 L11,24" Fill="White" x:Name="path" HorizontalAlignment="Center" Height="14"  Stretch="Fill" Stroke="White" VerticalAlignment="Center" Width="14"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True" SourceName="border">
                                    <Setter Property="Background" TargetName="border" Value="#FFB90F0F"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="White"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                            <!--<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Themes:ButtonChrome>-->
    
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    复制代码

    Checkbox样式

    imageimage

    复制代码
    <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
       <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
                            <BulletDecorator.Bullet>
                                <Border x:Name="bd"  
                                        BorderThickness="1"  
                                        BorderBrush="#B2B2B2"  
                                        MinHeight="13"  
                                        MinWidth="13"  
                                        VerticalAlignment="Center" Background="White">
                                    <Path x:Name="cp" Width="12" Height="12"  
                                          Stroke="#4892E7"  
                                          StrokeThickness="2"/>
                                </Border>
    
                            </BulletDecorator.Bullet>
                            <TextBlock x:Name="textBlock" Margin="2,0" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontFamily="Microsoft YaHei UI" FontSize="13.333"></TextBlock>
                        </BulletDecorator>
                        <!-- 
                            控件触发器 
                        -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <!-- 画上一个勾 -->
                                <Setter TargetName="cp" Property="Data"  
                                        Value="M 2,6 L 5,9 11,2"/>
                                <Setter Property="Foreground" TargetName="textBlock" Value="#FFE60E0E"/>
    
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="bd" Property="BorderBrush" Value="#1583DD">
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>
    
    
     <CheckBox Content="记住密码" Panel.ZIndex="1" Width="80" Height="20"  Grid.Row="7" Grid.Column="0"  x:Name="IsRememberUserMMBox" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="55,0,0,0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Style="{DynamicResource CheckBoxStyle1}" Foreground="Gray" />
    复制代码

    输入账号和密码提示框

    复制代码
    <TextBox Grid.Row="3" Grid.Column="1" Margin="5,4,0,6" BorderBrush="Transparent" BorderThickness="0" VerticalContentAlignment="Center" Text=""  FontSize="16">
                            <TextBox.Style>
                                <Style TargetType="TextBox">
                                    <Style.Triggers>
                                        <Trigger Property="Text" Value="{x:Null}">
                                            <Setter Property="Background" >
                                                <Setter.Value>
                                                    <VisualBrush Stretch="None">
                                                        <VisualBrush.Visual>
                                                            <TextBox BorderThickness="0" BorderBrush="Transparent"   VerticalContentAlignment="Center" Width="310"  Background="#0000" FontSize="13"  HorizontalAlignment="Left" Foreground="Gray" Text="请输入用户名"/>
                                                        </VisualBrush.Visual>
                                                    </VisualBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                        <Trigger Property="Text" Value="">
                                            <Setter Property="Background" >
                                                <Setter.Value>
                                                    <VisualBrush Stretch="None">
                                                        <VisualBrush.Visual>
                                                            <TextBox BorderThickness="0" BorderBrush="Transparent"   VerticalContentAlignment="Center" Width="310"  Background="#0000" FontSize="13"  HorizontalAlignment="Left" Foreground="Gray" Text="请输入用户名"/>
                                                        </VisualBrush.Visual>
                                                    </VisualBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBox.Style>
    
                        </TextBox>
                        <PasswordBox Grid.Row="5" Grid.Column="1" x:Name="pbUserPassWord" BorderBrush="Transparent" BorderThickness="0" Margin="5,4,0,6" Password="" VerticalContentAlignment="Center" FontSize="16" PasswordChanged="pbUserPassWord_PasswordChanged">
                            <PasswordBox.Style>
                                <Style TargetType="PasswordBox">
                                    <Style.Triggers>
                                        <Trigger Property="Tag" Value="{x:Null}">
                                            <Setter Property="Background" >
                                                <Setter.Value>
                                                    <VisualBrush Stretch="None">
                                                        <VisualBrush.Visual>
                                                            <TextBox BorderThickness="0" BorderBrush="Transparent"   VerticalContentAlignment="Center" Width="310"  Background="#0000" FontSize="13"  HorizontalAlignment="Left" Foreground="Gray" Text="请输入密码"/>
                                                        </VisualBrush.Visual>
                                                    </VisualBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                        <Trigger Property="Tag" Value="">
                                            <Setter Property="Background" >
                                                <Setter.Value>
                                                    <VisualBrush Stretch="None">
                                                        <VisualBrush.Visual>
                                                            <TextBox BorderThickness="0" BorderBrush="Transparent"   VerticalContentAlignment="Center" Width="310"  Background="#0000" FontSize="13"  HorizontalAlignment="Left" Foreground="Gray" Text="请输入密码"/>
                                                        </VisualBrush.Visual>
                                                    </VisualBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </PasswordBox.Style>
    
                        </PasswordBox>
    复制代码
  • 相关阅读:
    vue使用laydate.js插件报错laydate.css: Invalid
    自定义css样式结合js控制audio做音乐播放器
    福利福利~262集前端免费视频!
    解决Vue在IE中报错出现不支持=>等ES6语法和“Promise”未定义等问题
    设置Chart.js默认显示Point点的值不用鼠标经过才显示
    js监听某个元素高度变化来改变父级iframe的高度
    Vue中注意target和currentTarget的使用
    VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化
    bootstrap-table前端实现多条件时间段查询数据
    js小数点相乘或相除出现多位数的问题
  • 原文地址:https://www.cnblogs.com/ExMan/p/5765549.html
Copyright © 2011-2022 走看看