WPF制作的VS黑色风格的Listbox

  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>

 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>