[WPF 知识总结系列] —— 基本控件的简单样式集合

一、ScrollBar

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="StandardBrush" Color="LightGray" />

    <SolidColorBrush x:Key="PressedBrush" Color="DimGray" />

    <SolidColorBrush x:Key="HoverBrush" Color="DimGray" />

    <SolidColorBrush x:Key="GlyphBrush" Color="#333333" />

    <Style x:Key="LineUpButtonStyle" TargetType="{x:Type RepeatButton}">

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Grid Height="18" Margin="1">

                        <Path Name="Path"

                              HorizontalAlignment="Center"

                              VerticalAlignment="Center"

                              Data="M 4 0 L 8 8 L 0 8 Z"

                              Fill="{StaticResource StandardBrush}"

                              Stretch="None" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                        <Trigger Property="IsPressed" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="LineDownButtonStyle" TargetType="{x:Type RepeatButton}">

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Grid Height="18" Margin="1">

                        <Path Name="Path"

                              HorizontalAlignment="Center"

                              VerticalAlignment="Center"

                              Data="M 0 0 L 4 8 L 8 0 Z"

                              Fill="{StaticResource StandardBrush}"

                              Stretch="None" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                        <Trigger Property="IsPressed" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="LineLeftButtonStyle" TargetType="{x:Type RepeatButton}">

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Grid Width="18" Margin="1">

                        <Path Name="Path"

                              HorizontalAlignment="Center"

                              VerticalAlignment="Center"

                              Data="M 0 4 L 8 8 L 8 0 Z"

                              Fill="{StaticResource StandardBrush}"

                              Stretch="None" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                        <Trigger Property="IsPressed" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="LineRightButtonStyle" TargetType="{x:Type RepeatButton}">

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Grid Width="18" Margin="1">

                        <Path Name="Path"

                              HorizontalAlignment="Center"

                              VerticalAlignment="Center"

                              Data="M 0 0 L 0 8 L 8 4 Z"

                              Fill="{StaticResource StandardBrush}"

                              Stretch="None" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                        <Trigger Property="IsPressed" Value="true">

                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">

        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type RepeatButton}">

                    <Border Background="Transparent" />

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="VerticalScrollBarThumbStyle" TargetType="{x:Type Thumb}">

        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate>

                    <Rectangle x:Name="ThumbRectangle"

                               Width="8"

                               Fill="{StaticResource StandardBrush}"

                               RadiusX="4"

                               RadiusY="4" />

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter TargetName="ThumbRectangle" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style x:Key="HorizontalScrollBarThumbStyle" TargetType="{x:Type Thumb}">

        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Focusable" Value="False" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate>

                    <Rectangle x:Name="ThumbRectangle"

                               Height="8"

                               Fill="{StaticResource StandardBrush}"

                               RadiusX="4"

                               RadiusY="4" />

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter TargetName="ThumbRectangle" Property="Fill" Value="{StaticResource HoverBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <ControlTemplate x:Key="VerticalScrollBarTemplate" TargetType="ScrollBar">

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition MaxHeight="18" />

                <RowDefinition Height="*" />

                <RowDefinition MaxHeight="18" />

            </Grid.RowDefinitions>

            <RepeatButton Command="{x:Static ScrollBar.LineUpCommand}" Style="{StaticResource LineUpButtonStyle}" />

            <Border Grid.Row="1">

                <Track Name="PART_Track" IsDirectionReversed="True">

                    <Track.DecreaseRepeatButton>

                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />

                    </Track.DecreaseRepeatButton>

                    <Track.IncreaseRepeatButton>

                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />

                    </Track.IncreaseRepeatButton>

                    <Track.Thumb>

                        <Thumb Style="{StaticResource VerticalScrollBarThumbStyle}" />

                    </Track.Thumb>

                </Track>

            </Border>

            <RepeatButton Grid.Row="2"

                          Command="{x:Static ScrollBar.LineDownCommand}"

                          Style="{StaticResource LineDownButtonStyle}" />

        </Grid>

    </ControlTemplate>

    <ControlTemplate x:Key="HorizontalScrollBarTemplate" TargetType="ScrollBar">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="18" />

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="18" />

            </Grid.ColumnDefinitions>

            <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" Style="{StaticResource LineLeftButtonStyle}" />

            <Border Grid.Column="1">

                <Track Name="PART_Track" IsDirectionReversed="True">

                    <Track.DecreaseRepeatButton>

                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />

                    </Track.DecreaseRepeatButton>

                    <Track.Thumb>

                        <Thumb Style="{StaticResource HorizontalScrollBarThumbStyle}" />

                    </Track.Thumb>

                    <Track.IncreaseRepeatButton>

                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />

                    </Track.IncreaseRepeatButton>

                </Track>

            </Border>

            <RepeatButton Grid.Column="2"

                          Command="{x:Static ScrollBar.LineRightCommand}"

                          Style="{StaticResource LineRightButtonStyle}" />

        </Grid>

    </ControlTemplate>

    <Style TargetType="ScrollBar">

        <Setter Property="Background" Value="Red" />

        <Style.Triggers>

            <Trigger Property="Orientation" Value="Vertical">

                <Setter Property="Template" Value="{StaticResource VerticalScrollBarTemplate}" />

            </Trigger>

            <Trigger Property="Orientation" Value="Horizontal">

                <Setter Property="Template" Value="{StaticResource HorizontalScrollBarTemplate}" />

            </Trigger>

        </Style.Triggers>

    </Style>

</ResourceDictionary>

二、TextButton

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

    <Style x:Key="TextButtonStyle" TargetType="{x:Type Button}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid>

                        <ContentControl x:Name="contentControl"

                         Content="{TemplateBinding Content}"

                          Cursor="Hand"    >

                        </ContentControl>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Foreground" TargetName="contentControl" Value="#FF8AB936"/>

                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="RenderTransform" TargetName="contentControl">

                                <Setter.Value>

                                        <TranslateTransform X="1" Y="1"/>

                                </Setter.Value>

                            </Setter>

                            <Setter Property="Cursor" Value="Hand"></Setter>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

三、PathButton1

You must set the button content with a path. But you can't change it's color.

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="PathButtonStyle" TargetType="{x:Type Button}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid Background="#00000000" Cursor="Hand">

                        <ContentControl x:Name="contentControl"

                            Content="{TemplateBinding Content}"/>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Foreground" TargetName="contentControl" Value="#FF8AB936"/>

                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="RenderTransform" TargetName="contentControl">

                                <Setter.Value>

                                    <TranslateTransform X="1" Y="1"/>

                                </Setter.Value>

                            </Setter>

                            <Setter Property="Cursor" Value="Hand"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

四、PathButton

Make it as a Custom Control.

五、ImageButton

Simple way to implement an imageButton, but you also need to set a Image into the button.

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="ImageButtonStyle" TargetType="{x:Type Button}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid x:Name="grid">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="Auto"/>

                        </Grid.RowDefinitions>

                        <ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                        <TextBlock Text="{TemplateBinding Tag}" VerticalAlignment="Center" Grid.Row="1" HorizontalAlignment="Center"/>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Background" TargetName="grid" Value="#FF42B892"/>

                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="RenderTransform" TargetName="grid">

                                <Setter.Value>

                                    <TransformGroup>

                                        <TranslateTransform X="1" Y="1"/>

                                    </TransformGroup>

                                </Setter.Value>

                            </Setter>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

六、ListBox

    <Style x:Key="StatusListBoxItemStyle" TargetType="{x:Type ListBoxItem}">

        <Setter Property="Background" Value="{StaticResource StatusBackground}" />

        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />

        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />

        <Setter Property="Padding" Value="2,0,0,0" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ListBoxItem}">

                    <Border x:Name="Bd"

                            Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}"

                            Padding="{TemplateBinding Padding}"

                            SnapsToDevicePixels="true">

                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                    </Border>

                        <ControlTemplate.Triggers>

                        <Trigger Property="IsSelected" Value="true">

                        <Setter TargetName="Bd" Property="Background" Value="{DynamicResource Background}" />

                        <Setter Property="Foreground" Value="{DynamicResource SelectedItemForeground}" />

                        </Trigger>

                        <MultiTrigger>

                        <MultiTrigger.Conditions>

                        <Condition Property="IsSelected" Value="true" />

                        <Condition Property="Selector.IsSelectionActive" Value="false" />

                        </MultiTrigger.Conditions>

                        <Setter TargetName="Bd" Property="Background" Value="{DynamicResource SelectedItemDeactiveBackground}" />

                        <Setter Property="Foreground" Value="{DynamicResource SelectedItemDeactiveForeground}" />

                        </MultiTrigger>

                        <Trigger Property="IsEnabled" Value="false">

                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />

                        </Trigger>

                        </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

[WPF 知识总结系列] —— 基本控件的简单样式集合的更多相关文章

WPF自定义控件（一）の控件分类
一.什么是控件(Controls) 控件是指对数据和方法的封装.控件可以有自己的属性和方法,其中属性是控件数据的简单访问者,方法则是控件的一些简单而可见的功能.控件创建过程包括设计.开发.调试(就是所 ...
Map工具系列-08-map控件查看器
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
Winform开发框架之客户关系管理系统(CRM)的开发总结系列4-Tab控件页面的动态加载
在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...
WPF：DataTemplateSelector设置控件不同的样式
原文 WPF:DataTemplateSelector设置控件不同的样式最近想实现这么个东西,一个ListBox, 里面的ListBoxItem可能是文本框.下拉框.日期选择控件等等. 很自然的想到 ...
Swing系列之控件一
Swing系列之控件 JTextArea JTextArea是一个实现多行文本的控件构造函数 JTextArea() 构造新的TextArea. JTextArea(Document doc) 构造 ...
基于 WPF 平台的 ActiveReports Viewer控件
ActiveReports 报表控件致力于为组织和个人提供最出色的报表解决方案,多年来ActiveReports已经提供了 Windows Forms.Web.Silverlight和Flash平台的 ...
WPF不同线程之间的控件的访问
原文:WPF不同线程之间的控件的访问 WPF不同线程之间的控件是不同访问的,为了能够访问其他线程之间的控件,需要用Dispatcher.Invoke执行一个新的活动即可. 例如: public voi ...
WindowsXamlHost：在 WPF 中使用 UWP 的控件（Windows Community Toolkit）
Windows Community Toolkit 再次更新到 5.0.以前可以在 WPF 中使用有限的 UWP 控件,而现在有了 WindowsXamlHost,则可以使用更多 UWP 原生控件了. ...
WPF 动画：同为控件不同命 - 简书
原文:WPF 动画:同为控件不同命 - 简书 1. 及格与优秀读大学的时候,有一门课的作业是用 PPT 展示. 但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字. 大家都单纯 ...

随机推荐

Hadoop环境搭建及wordcount程序
目的: 前期学习了一些机器学习基本算法,实际企业应用中算法是核心,运行的环境和数据处理的平台是基础. 手段: 搭建简易hadoop集群(由于机器限制在自己的笔记本上通过虚拟机搭建) 一.基础环境介绍 ...
IIS：IIS 8.5下设置404错误页
IIS版本:IIS 8.5 问题描述搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...
Android_触摸事件传递机制
Android中dispatchTouchEvent,onInterceptTouchEvent, onTouchEvent的理解ecandroid中的事件类型分为按键事件和屏幕触摸事件,Touch事 ...
JavaScript -- Navigator
-----040-Navigator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
在自己网站中引入CU3ER/Flash 3D幻灯片效果和照片画框
要求必备知识本文要求基本了解 JAVASCRIPT 和 XML基础语法知识. 运行环境支持Flash Player的浏览器/Flash Player11及以上演示地址演示地址下载地址 ...
Java中的构造器与垃圾回收
构造器在我们初始化对象时,如果希望设置一些默认值,那么就可以使用构造器,在Java中,构造器使用和类同名的名字且没有返回值,如下 class Test{ private String name; T ...
揭开Future的神秘面纱——任务取消
系列目录: 揭开Future的神秘面纱——任务取消揭开Future的神秘面纱——任务执行揭开Future的神秘面纱——结果获取使用案例在之前写过的一篇随笔中已经提到了Future的应用场景和特 ...
CentOS系统中文改英文
一.进入语言配置文件 vi /etc/sysconfig/i18n 用SSH执行以上命令,用vi编辑器修改/etc/sysconfig/i18n文件. 二.修改语言将默认的LANG="z ...
Go常量与运算符
常量的定义常量的值在编译时就已经确定常量的定义格式与变量基本相同等号右侧必须是常量或者常量表达式常量表达式中的函数必须是内置函数 package main import ( "fmt ...
使用keepalived实现双机热备
通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.下面来以keepalived结合tom ...

[WPF 知识总结系列] —— 基本控件的简单样式集合

一、ScrollBar

二、TextButton

三、PathButton1

四、PathButton

五、ImageButton

六、ListBox

[WPF 知识总结系列] —— 基本控件的简单样式集合的更多相关文章

随机推荐

热门专题