WPF制作的VS黑色风格的Listbox

最近写的一个玩具，WPF写出来的东西还是挺好看的

style.xaml

  1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3                     xmlns:local="clr-namespace:CustomListBox">
  4
  5     <SolidColorBrush x:Key="StandardBoarderBrush" Color="#FF515151"></SolidColorBrush>
  6     <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FF252526" />
  7     <SolidColorBrush x:Key="HoverBorderBrush" Color="LightYellow" Opacity="0.4"/>
  8     <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray"  />
  9     <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
 10     <SolidColorBrush x:Key="ScrollBarLineButtonBrush" Color="#FF888D91"/>
 11     <SolidColorBrush x:Key="ScrollBarLineButtonHoverBrush" Color="#FF1286A9"/>
 12     <SolidColorBrush x:Key="ScrollBarThumbBrush" Color="#FF686868"/>
 13     <SolidColorBrush x:Key="ScrollBarThumbHoverBrush" Color="#FFC8C8C8"/>
 14
 15     <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
 16         <GradientBrush.GradientStops>
 17             <GradientStopCollection>
 18                 <GradientStop Color="#FF2F2F2F" Offset="0.0" />
 19                 <GradientStop Color="#FF2F2F2F" Offset="0.6" />
 20                 <GradientStop Color="#FF2F2F2F" Offset="1.2"/>
 21             </GradientStopCollection>
 22         </GradientBrush.GradientStops>
 23     </LinearGradientBrush>
 24
 25
 26     <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
 27         <GradientBrush.GradientStops>
 28             <GradientStopCollection>
 29                 <GradientStop Color="#FFF" Offset="0.0"/>
 30                 <GradientStop Color="#CCC" Offset="1.0"/>
 31             </GradientStopCollection>
 32         </GradientBrush.GradientStops>
 33     </LinearGradientBrush>
 34
 35     <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
 36     <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
 37         <GradientBrush.GradientStops>
 38             <GradientStopCollection>
 39                 <GradientStop Color="#BBB" Offset="0.0"/>
 40                 <GradientStop Color="#EEE" Offset="0.1"/>
 41                 <GradientStop Color="#EEE" Offset="0.9"/>
 42                 <GradientStop Color="#FFF" Offset="1.0"/>
 43             </GradientStopCollection>
 44         </GradientBrush.GradientStops>
 45     </LinearGradientBrush>
 46
 47     <Style x:Key="ScrollBarLineUpButtonStyle" TargetType="{x:Type RepeatButton}">
 48         <Setter Property="Focusable" Value="False"></Setter>
 49         <Setter Property="Template">
 50             <Setter.Value>
 51                 <ControlTemplate>
 52                     <Grid>
 53                         <Path HorizontalAlignment="Center" VerticalAlignment="Center"
 54                               Name="triangle" Fill="{StaticResource ScrollBarLineButtonBrush}"
 55                               Data="M 0 4 L 8 4 L 4 0 Z"/>
 56                     </Grid>
 57
 58                     <ControlTemplate.Triggers>
 59                         <Trigger Property="IsMouseOver" Value="True">
 60                             <Setter TargetName="triangle" Property="Fill"
 61                                     Value="{StaticResource ScrollBarLineButtonHoverBrush}"/>
 62                         </Trigger>
 63                     </ControlTemplate.Triggers>
 64                 </ControlTemplate>
 65             </Setter.Value>
 66         </Setter>
 67     </Style>
 68
 69     <Style x:Key="ScrollBarLineDownButtonStyle" TargetType="{x:Type RepeatButton}">
 70         <Setter Property="Focusable" Value="False"></Setter>
 71         <Setter Property="Template">
 72             <Setter.Value>
 73                 <ControlTemplate>
 74                     <Grid>
 75                         <Path HorizontalAlignment="Center" VerticalAlignment="Center"
 76                               Name="triangle" Fill="{StaticResource ScrollBarLineButtonBrush}"
 77                               Data="M 0 0 L 8 0 L 4 4 Z"/>
 78                     </Grid>
 79
 80                     <ControlTemplate.Triggers>
 81                         <Trigger Property="IsMouseOver" Value="True">
 82                             <Setter TargetName="triangle" Property="Fill"
 83                                     Value="{StaticResource ScrollBarLineButtonHoverBrush}"/>
 84                         </Trigger>
 85                     </ControlTemplate.Triggers>
 86                 </ControlTemplate>
 87             </Setter.Value>
 88         </Setter>
 89     </Style>
 90
 91     <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
 92         <Setter Property="IsTabStop" Value="False"/>
 93         <Setter Property="Focusable" Value="False"/>
 94         <Setter Property="Margin" Value="1,0,1,0" />
 95         <Setter Property="Background" Value="{StaticResource StandardBrush}" />
 96         <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
 97         <Setter Property="Template">
 98             <Setter.Value>
 99                 <ControlTemplate TargetType="{x:Type Thumb}">
100                     <Rectangle Name="thumb" Fill="{StaticResource ScrollBarThumbBrush}"></Rectangle>
101                     <ControlTemplate.Triggers>
102                         <Trigger Property="IsMouseOver" Value="True">
103                             <Setter TargetName="thumb" Property="Fill" Value="{StaticResource ScrollBarThumbHoverBrush}"/>
104                         </Trigger>
105                     </ControlTemplate.Triggers>
106                 </ControlTemplate>
107             </Setter.Value>
108         </Setter>
109     </Style>
110
111     <Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
112         <Setter Property="IsTabStop" Value="False"/>
113         <Setter Property="Focusable" Value="False"/>
114         <Setter Property="Template">
115             <Setter.Value>
116                 <ControlTemplate TargetType="{x:Type RepeatButton}">
117                     <Border Background="Transparent" />
118                 </ControlTemplate>
119             </Setter.Value>
120         </Setter>
121     </Style>
122
123     <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
124         <Grid Background="#FF3E3E42">
125             <Grid.RowDefinitions>
126                 <RowDefinition MaxHeight="18"></RowDefinition>
127                 <RowDefinition Height="*"></RowDefinition>
128                 <RowDefinition MaxHeight="18"></RowDefinition>
129             </Grid.RowDefinitions>
130
131             <RepeatButton Grid.Row="0" Height="18"
132                           Style="{StaticResource ScrollBarLineUpButtonStyle}"
133                           Command="ScrollBar.LineUpCommand">
134             </RepeatButton>
135
136             <Track Name="PART_Track" Grid.Row="1"
137                    IsDirectionReversed="True">
138                 <Track.DecreaseRepeatButton>
139                     <RepeatButton Command="ScrollBar.PageUpCommand"
140                                   Style="{StaticResource ScrollBarPageButtonStyle}"></RepeatButton>
141                 </Track.DecreaseRepeatButton>
142                 <Track.Thumb>
143                     <Thumb Style="{StaticResource ScrollBarThumbStyle}"/>
144                 </Track.Thumb>
145                 <Track.IncreaseRepeatButton>
146                     <RepeatButton Command="ScrollBar.PageDownCommand"
147                                   Style="{StaticResource ScrollBarPageButtonStyle}"></RepeatButton>
148                 </Track.IncreaseRepeatButton>
149             </Track>
150
151             <RepeatButton Grid.Row="2" Height="18"
152                           Style="{StaticResource ScrollBarLineDownButtonStyle}"
153                           Command="ScrollBar.LineDownCommand">
154             </RepeatButton>
155         </Grid>
156     </ControlTemplate>
157
158     <ControlTemplate x:Key="ListBoxTemplate" TargetType="{x:Type ListBox}">
159         <Border Name="border"
160                 Background="{StaticResource ListBoxBackgroundBrush}"
161                 BorderBrush="{StaticResource StandardBoarderBrush}"
162                 BorderThickness="2" CornerRadius="3">
163             <ScrollViewer Focusable="False">
164                 <ItemsPresenter Margin="10"
165                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
166                 </ItemsPresenter>
167             </ScrollViewer>
168         </Border>
169     </ControlTemplate>
170
171     <ControlTemplate x:Key="ListBoxItemTemplate" TargetType="{x:Type ListBoxItem}">
172         <Border Name="border"
173                 CornerRadius="3"
174                 Margin="1"
175                 Padding="2"
176                 SnapsToDevicePixels="True">
177             <ContentPresenter TextBlock.Foreground="White"
178                               TextBlock.FontSize="{TemplateBinding FontSize}"
179                               TextBlock.TextAlignment="Left"/>
180         </Border>
181         <ControlTemplate.Triggers>
182             <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
183                 <EventTrigger.Actions>
184                     <BeginStoryboard>
185                         <Storyboard>
186                             <DoubleAnimation Storyboard.TargetProperty="FontSize" By="2" Duration="0:0:0.2"></DoubleAnimation>
187                         </Storyboard>
188                     </BeginStoryboard>
189                 </EventTrigger.Actions>
190             </EventTrigger>
191
192             <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
193                 <EventTrigger.Actions>
194                     <BeginStoryboard>
195                         <Storyboard>
196                             <DoubleAnimation Storyboard.TargetProperty="FontSize" Duration="0:0:0.1"></DoubleAnimation>
197                         </Storyboard>
198                     </BeginStoryboard>
199                 </EventTrigger.Actions>
200             </EventTrigger>
201
202             <Trigger Property="IsMouseOver" Value="True">
203                 <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBorderBrush}"/>
204             </Trigger>
205
206             <Trigger Property="IsSelected" Value="True">
207                 <Setter TargetName="border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
208             </Trigger>
209         </ControlTemplate.Triggers>
210     </ControlTemplate>
211
212     <Style x:Key="ListboxStyle" TargetType="{x:Type ListBox}">
213         <Setter Property="Template" Value="{StaticResource ListBoxTemplate}"></Setter>
214     </Style>
215
216     <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
217         <Setter Property="Template" Value="{StaticResource ListBoxItemTemplate}"></Setter>
218     </Style>
219
220     <Style TargetType="{x:Type ScrollBar}">
221         <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
222         <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
223         <Setter Property="Width" Value="18"></Setter>
224         <Setter Property="Height" Value="Auto"></Setter>
225         <Setter Property="Template" Value="{StaticResource VerticalScrollBar}"></Setter>
226     </Style>
227
228 </ResourceDictionary>

MainWindow.xaml:

 1 <Window x:Class="CustomListBox.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:CustomListBox"
 7         mc:Ignorable="d"
 8         Title="VS_StyleListbox" Height="350" Width="275" Background="#FF5F5F5F"
 9         MinHeight="350" MinWidth="275">
10     <Window.Resources>
11         <ResourceDictionary>
12             <ResourceDictionary.MergedDictionaries>
13                 <ResourceDictionary Source="Style.xaml"/>
14             </ResourceDictionary.MergedDictionaries>
15         </ResourceDictionary>
16     </Window.Resources>
17     <Grid>
18         <ListBox Name="customListbox" Margin="5" Style="{StaticResource ListboxStyle}"
19                  ScrollViewer.VerticalScrollBarVisibility="Visible"
20                  ScrollViewer.CanContentScroll="False"
21                  ScrollViewer.PanningMode="Both"
22                  SelectionMode="Single">
23             <ListBox.Items>
24                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">One</ListBoxItem>
25                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Two</ListBoxItem>
26                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Three</ListBoxItem>
27                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Four</ListBoxItem>
28                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Five</ListBoxItem>
29                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Six</ListBoxItem>
30                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Seven</ListBoxItem>
31                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Eight</ListBoxItem>
32                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Nine</ListBoxItem>
33                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Ten</ListBoxItem>
34                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">One</ListBoxItem>
35                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Two</ListBoxItem>
36                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Three</ListBoxItem>
37                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Four</ListBoxItem>
38                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Five</ListBoxItem>
39                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Six</ListBoxItem>
40                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Seven</ListBoxItem>
41                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Eight</ListBoxItem>
42                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Nine</ListBoxItem>
43                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Ten</ListBoxItem>
44             </ListBox.Items>
45         </ListBox>
46     </Grid>
47 </Window>

时间： 2024-10-14 00:39:32

WPF制作的VS黑色风格的Listbox的相关文章

QQ概念版(WPF制作)

984 QQ概念版编辑 QQ 概念版是腾讯首款NUI(自然用户交互)产品,全面实现了多点触摸操作.是腾讯利用微软最新一代的客户端展现层技术--WPF,打造的IM产品. 中文名 QQ 概念版游戏类别聊天软件NUI 游戏平台 QQ 开发商腾讯发行商腾讯目录 1简介 2系统要求 3用户评测 4产品介绍 5评测数据 6更新日志 ? Beta 1.3 ? Beta 1.2 ? Beta 1.1 1简介编辑在实现IM的基础功能外,QQ概念版还推出了动感相框.动态背景.多Tab聊天窗口.3D交

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

原文:WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合控件的样式定义: 二．ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,

课程表WPF制作学习步骤二

出于起步阶段的我,还是要再次强调一下边学边做,真的是需要专注不小的一段时间,加油加油~~~ 课程表制作的第二步: 制作开始界面并与课程表联系: 一.制作一个开始界面新创建一个WPF项目,我的名字是CuirricumBegin,开始界面制作比较随意而简单,代码如下: 1 <Image Source="Resources\67.jpg" Stretch="Fill"></Image> 2 <TextBlock Text="我要

WPF 制作电子相册浏览器

周末的时候,闲着无聊,做了一个电子相册浏览器.比较简单.界面如下: 代码基本上都是借鉴网上的一些代码. MainWindow.xaml <local:HeaderedWindow x:Class="PictureMagic.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com

课程表WPF制作学习步骤三（求助）

一般来说,现是确定需求和项目计划再开始每一步,最后完成整个项目,然后我这个项目确实是走一步算一步,每次想着如何添加效果最后再整合,这样后期整合压力会很大: 所以还是建议大家做一个成果之前一定要做好计划和步骤,一步一步,既有收获,也满满的成就感 (摘自某国家项目大神学长0.0): 课程表制作的第三部就是:设置对每个时间段的编辑功能: 我的想法如下: 1.在整体课程表的最下行设置两个按钮,一个是edit按钮,一个是save按钮: 2.点击edit按钮,会在每一个时间段内都出现一个按钮(Add/edi

课程表WPF制作学习步骤一

一开始拿到这个学习创意的idea之后根本不知道如何下手,虽说也是一个相当简单的设计,但对于如此小白的我,只能是学一步算一步: 敬请各位大神光临,不喜勿喷就好,就好: 本着“学从难处,用从易处”的原则,题主所学的尽量都是直接用XAML代码栏通过敲XAML代码实现,所以接下来也尽量使用直接敲代码实现,这样有助于缩放,也据说对以后很有益处 0.0 课程表制作的第一步就是画表这里我用的是Grid来制作表格,代码如下: 1 <Window x:Class="Curriculum.MainWindo

WPF制作QQ列表（仿qq列表特效）

先看效果图:这个是折叠特效. 代码结构: model是我们的数据模型,定义了在列表显示的人物名称图片简介 . Resource是我们的图片资源和存储图片资源路径.名称的资源文件. GroupListCreate是我们的主要创建列表的模块. 代码如下: public StackPanel CreateModuleEntry(List<GroupPerson> hrvGroups) { if (hrvGroups != null) { StackPanel spl

WPF制作圆角窗体思路

之前做WPF时想要做一个圆角窗体,在网上找了一些资料,在 “程序诗人” 的博客上就有一篇这样的博文(http://www.cnblogs.com/scy251147/archive/2012/07/25/2609126.html),今天重新看了一遍,又理了一下思路.下面把我看完后的思路写一遍: 1.隐藏掉WPF窗体自带的标题栏,这样才有实现圆角窗体的可能. 2.在主窗体中插入一个Border画圆角,圆角画出来以后,由于主窗体不透明,会看到圆角之外的四个窗体边角,所以需要把主窗体设置为透明,此时只

WPF制作子窗体的弹出动画效果

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. www.pinterest.com