WPF 基础控件之 ListBox样式

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox

ListBox：控件修改Style需要注意使用Border嵌套ScrollViewer内部嵌套VirtualizingStackPanel。

ListBoxItem：控件Template添加Grid添加VisualStateManager.VisualStateGroups对VisualState x:Name=”Selected” 进行选中动画控制 Rectangle 的ScaleTransform.ScaleX 为 1 Border 设置BorderThickness底部0,0,0,1。

—

代码如下

1）Styles.ListBox.xaml 代码如下

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="{x:Type ListBox}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="MinWidth" Value="120" />
        <Setter Property="MinHeight" Value="95" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border Name="Border"  BorderThickness="0,1,0,0" 
                            BorderBrush="{DynamicResource BaseSolidColorBrush}">
                        <ScrollViewer Focusable="False">
                            <VirtualizingStackPanel IsItemsHost="True" />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsGrouping"
Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextSolidColorBrush}" />
        <Setter Property="MinHeight" Value="48"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_Rectangle" Duration="0:0:0.3"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)" To="1"
FillBehavior="Stop"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Border" Padding="2" 
SnapsToDevicePixels="True"
BorderThickness="0,0,0,1"
BorderBrush="{DynamicResource BaseSolidColorBrush}">
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource WhiteColor}" />
                            </Border.Background>
                            <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Border>
                        <Rectangle x:Name="PART_Rectangle" Height="2" VerticalAlignment="Bottom"
Fill="{DynamicResource PrimaryNormalSolidColorBrush}"
RenderTransformOrigin=".5,.5">
                            <Rectangle.RenderTransform>
                                <ScaleTransform ScaleX="0" ScaleY="1"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Border" 
Property="Background" 
Value="{DynamicResource BaseMoveColorSolidColorBrush}"/>
                        </MultiTrigger>
                       
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="{DynamicResource BaseSolidColorBrush}" TargetName="PART_Border"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</ResourceDictionary>

2）使用Styles.ListBox.xaml如下

  <UniformGrid Margin="0,10" Columns="2">
                    <ListBox DisplayMemberPath="Name" IsEnabled="False"
                        ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=local:MainView}}">
                    </ListBox>
                    <ListBox  Margin="10,0"
                             ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=local:MainView}}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <UniformGrid Columns="3">
                                    <TextBlock Text="{Binding Date}"/>
                                    <TextBlock Text="{Binding Name}"/>
                                    <TextBlock Text="{Binding Address}"/>
                                </UniformGrid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </UniformGrid>