[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 来用,就单纯地往里面堆文字. 大家都单纯 ...

随机推荐

gitlab基本的命令
1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v 添加远程仓库:$ git ...
全网最详细的用pip安装****模块报错：Could not find a version that satisfies the requirement ****(from version:) No matching distribution found for ****的解决办法（图文详解）
不多说,直接上干货! 问题详情这个问题,很普遍.如我这里想实现,Windows下Anaconda2 / Anaconda3里正确下载安装用来向微信好友发送消息的itchat库. 见,我撰写的全网最 ...
SOA，Webservice，SOAP，REST，RPC，RMI的区别与联系
SOA,Webservice,SOAP,REST,RPC,RMI的区别与联系 SOA面向服务的软件架构(Service Oriented Architecture) 是一种计算机软件的设计模式,主要应 ...
layer插件学习——弹框（自定义页）
本文是自己整理的关于layer插件的弹框样式结果介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
页面出现Incorrect string以及数据库内容乱码
我在制作 (www.helpqy.com) 的时候遇到了页面报错Incorrect string的问题,我使用的是mysql,数据表中有很多中文内容,最后发现在安装mysql的时候需要选择defaul ...
python的Web框架：Django路由系统以及模板导入
Django的路由系统当一个请求来到时当一个请求来到时 1.首先到项目目录下的urls.py(根URLconf模块)中,查找路由规则: 2.根URELcof模块,里面定义了 urlpatterns ...
GCD之后台程序运行
点击Home键进入后台时进行计时,直到从新启动,超过三分钟启动手势 // // AppDelegate.m // GCDDown // // Created by City--Online on 15 ...
MVC应用程序播放FLV视频，部分视图可多地方重复引用
网页上播放Falsh之外,还有一种格式就是FLV的视频,也是最常见的.Insus.NET再想在MVC应用程序实现这功能. 实现这个功能,需要从网上下载一个叫vcastr22.swf.如果在网上找不到, ...
Spring Security认证配置(二)
学习本章之前,可以先了解下上篇Spring Security基本配置. 本篇想要达到这样几个目的: 1.访问调用者服务时,如果是html请求,则跳转到登录页,否则返回401状态码和错误信息 2.调用方 ...
C++中的 CONST 含义（从#define 到 CONST 的转变）
const 与define 两者都可以用来定义常量,但是const定义时,定义了常量的类型,所以更精确一些.#define只是简单的文本替换,除了可以定义常量外,还可以用来定义一些简单的函数,有点类似 ...

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

一、ScrollBar

二、TextButton

三、PathButton1

四、PathButton

五、ImageButton

六、ListBox

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

随机推荐

热门专题