WPF制作的VS黑色风格的Listbox

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

---

style.xaml

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:CustomListBox">

     <SolidColorBrush x:Key="StandardBoarderBrush" Color="#FF515151"></SolidColorBrush>
     <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FF252526" />
     <SolidColorBrush x:Key="HoverBorderBrush" Color="LightYellow" Opacity="0.4"/>
     <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray"  />
     <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
     <SolidColorBrush x:Key="ScrollBarLineButtonBrush" Color="#FF888D91"/>
     <SolidColorBrush x:Key="ScrollBarLineButtonHoverBrush" Color="#FF1286A9"/>
     <SolidColorBrush x:Key="ScrollBarThumbBrush" Color="#FF686868"/>
     <SolidColorBrush x:Key="ScrollBarThumbHoverBrush" Color="#FFC8C8C8"/>

     <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
         <GradientBrush.GradientStops>
             <GradientStopCollection>
                 <GradientStop Color="#FF2F2F2F" Offset="0.0" />
                 <GradientStop Color="#FF2F2F2F" Offset="0.6" />
                 <GradientStop Color="#FF2F2F2F" Offset="1.2"/>
             </GradientStopCollection>
         </GradientBrush.GradientStops>
     </LinearGradientBrush>

     <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
         <GradientBrush.GradientStops>
             <GradientStopCollection>
                 <GradientStop Color="#FFF" Offset="0.0"/>
                 <GradientStop Color="#CCC" Offset="1.0"/>
             </GradientStopCollection>
         </GradientBrush.GradientStops>
     </LinearGradientBrush>

     <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
     <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
         <GradientBrush.GradientStops>
             <GradientStopCollection>
                 <GradientStop Color="#BBB" Offset="0.0"/>
                 <GradientStop Color="#EEE" Offset="0.1"/>
                 <GradientStop Color="#EEE" Offset="0.9"/>
                 <GradientStop Color="#FFF" Offset="1.0"/>
             </GradientStopCollection>
         </GradientBrush.GradientStops>
     </LinearGradientBrush>

     <Style x:Key="ScrollBarLineUpButtonStyle" TargetType="{x:Type RepeatButton}">
         <Setter Property="Focusable" Value="False"></Setter>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate>
                     <Grid>
                         <Path HorizontalAlignment="Center" VerticalAlignment="Center"
                               Name="triangle" Fill="{StaticResource ScrollBarLineButtonBrush}"
                               Data="M 0 4 L 8 4 L 4 0 Z"/>
                     </Grid>

                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="triangle" Property="Fill"
                                     Value="{StaticResource ScrollBarLineButtonHoverBrush}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

     <Style x:Key="ScrollBarLineDownButtonStyle" TargetType="{x:Type RepeatButton}">
         <Setter Property="Focusable" Value="False"></Setter>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate>
                     <Grid>
                         <Path HorizontalAlignment="Center" VerticalAlignment="Center"
                               Name="triangle" Fill="{StaticResource ScrollBarLineButtonBrush}"
                               Data="M 0 0 L 8 0 L 4 4 Z"/>
                     </Grid>

                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="triangle" Property="Fill"
                                     Value="{StaticResource ScrollBarLineButtonHoverBrush}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

     <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
         <Setter Property="IsTabStop" Value="False"/>
         <Setter Property="Focusable" Value="False"/>
         <Setter Property="Margin" Value="1,0,1,0" />
         <Setter Property="Background" Value="{StaticResource StandardBrush}" />
         <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Thumb}">
                     <Rectangle Name="thumb" Fill="{StaticResource ScrollBarThumbBrush}"></Rectangle>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="thumb" Property="Fill" Value="{StaticResource ScrollBarThumbHoverBrush}"/>
                         </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>

     <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
         <Grid Background="#FF3E3E42">
             <Grid.RowDefinitions>
                 <RowDefinition MaxHeight="18"></RowDefinition>
                 <RowDefinition Height="*"></RowDefinition>
                 <RowDefinition MaxHeight="18"></RowDefinition>
             </Grid.RowDefinitions>

             <RepeatButton Grid.Row="0" Height="18"
                           Style="{StaticResource ScrollBarLineUpButtonStyle}"
                           Command="ScrollBar.LineUpCommand">
             </RepeatButton>

             <Track Name="PART_Track" Grid.Row="1"
                    IsDirectionReversed="True">
                 <Track.DecreaseRepeatButton>
                     <RepeatButton Command="ScrollBar.PageUpCommand"
                                   Style="{StaticResource ScrollBarPageButtonStyle}"></RepeatButton>
                 </Track.DecreaseRepeatButton>
                 <Track.Thumb>
                     <Thumb Style="{StaticResource ScrollBarThumbStyle}"/>
                 </Track.Thumb>
                 <Track.IncreaseRepeatButton>
                     <RepeatButton Command="ScrollBar.PageDownCommand"
                                   Style="{StaticResource ScrollBarPageButtonStyle}"></RepeatButton>
                 </Track.IncreaseRepeatButton>
             </Track>

             <RepeatButton Grid.Row="2" Height="18"
                           Style="{StaticResource ScrollBarLineDownButtonStyle}"
                           Command="ScrollBar.LineDownCommand">
             </RepeatButton>
         </Grid>
     </ControlTemplate>

     <ControlTemplate x:Key="ListBoxTemplate" TargetType="{x:Type ListBox}">
         <Border Name="border"
                 Background="{StaticResource ListBoxBackgroundBrush}"
                 BorderBrush="{StaticResource StandardBoarderBrush}"
                 BorderThickness="2" CornerRadius="3">
             <ScrollViewer Focusable="False">
                 <ItemsPresenter Margin="10"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                 </ItemsPresenter>
             </ScrollViewer>
         </Border>
     </ControlTemplate>

     <ControlTemplate x:Key="ListBoxItemTemplate" TargetType="{x:Type ListBoxItem}">
         <Border Name="border"
                 CornerRadius="3"
                 Margin="1"
                 Padding="2"
                 SnapsToDevicePixels="True">
             <ContentPresenter TextBlock.Foreground="White"
                               TextBlock.FontSize="{TemplateBinding FontSize}"
                               TextBlock.TextAlignment="Left"/>
         </Border>
         <ControlTemplate.Triggers>
             <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
                 <EventTrigger.Actions>
                     <BeginStoryboard>
                         <Storyboard>
                             <DoubleAnimation Storyboard.TargetProperty="FontSize" By="2" Duration="0:0:0.2"></DoubleAnimation>
                         </Storyboard>
                     </BeginStoryboard>
                 </EventTrigger.Actions>
             </EventTrigger>

             <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
                 <EventTrigger.Actions>
                     <BeginStoryboard>
                         <Storyboard>
                             <DoubleAnimation Storyboard.TargetProperty="FontSize" Duration="0:0:0.1"></DoubleAnimation>
                         </Storyboard>
                     </BeginStoryboard>
                 </EventTrigger.Actions>
             </EventTrigger>

             <Trigger Property="IsMouseOver" Value="True">
                 <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBorderBrush}"/>
             </Trigger>

             <Trigger Property="IsSelected" Value="True">
                 <Setter TargetName="border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
             </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>

     <Style x:Key="ListboxStyle" TargetType="{x:Type ListBox}">
         <Setter Property="Template" Value="{StaticResource ListBoxTemplate}"></Setter>
     </Style>

     <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
         <Setter Property="Template" Value="{StaticResource ListBoxItemTemplate}"></Setter>
     </Style>

     <Style TargetType="{x:Type ScrollBar}">
         <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
         <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
         <Setter Property="Width" Value="18"></Setter>
         <Setter Property="Height" Value="Auto"></Setter>
         <Setter Property="Template" Value="{StaticResource VerticalScrollBar}"></Setter>
     </Style>

 </ResourceDictionary>

MainWindow.xaml:

 <Window x:Class="CustomListBox.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:CustomListBox"
         mc:Ignorable="d"
         Title="VS_StyleListbox" Height="350" Width="275" Background="#FF5F5F5F"
         MinHeight="350" MinWidth="275">
     <Window.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Style.xaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Window.Resources>
     <Grid>
         <ListBox Name="customListbox" Margin="5" Style="{StaticResource ListboxStyle}"
                  ScrollViewer.VerticalScrollBarVisibility="Visible"
                  ScrollViewer.CanContentScroll="False"
                  ScrollViewer.PanningMode="Both"
                  SelectionMode="Single">
             <ListBox.Items>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">One</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Two</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Three</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Four</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Five</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Six</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Seven</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Eight</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Nine</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Ten</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">One</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Two</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Three</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Four</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Five</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Six</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Seven</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Eight</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Nine</ListBoxItem>
                 <ListBoxItem Style="{StaticResource ListboxItemStyle}" FontSize="13.5">Ten</ListBoxItem>
             </ListBox.Items>
         </ListBox>
     </Grid>
 </Window>

---