WPF 自定義ItemsControl/ListBox/ListView控件樣式

一、前言

ItemsControl、ListBox、ListView這三種控件在WPF中都可作為列表信息展示控件。我們可以通過修改這三個控件的樣式來展示我們的列表信息。

既然都是展示列表信息的控件，那他們有什么相同點和不同點呢。

同：

　　1、這三個控件都是列表型控件，可以進行列表綁定（ItemsSource）；

　　2、這三個控件均使用ItemsPresenter來展示列表信息；

異：

　　1、ListBox繼承於ItemsControl，比ItemsControl一個Selector對象；

　　2、ListView繼承於ListBox，比ListBox多一個View屬性。

也就是說ItemsControl不支持列表項選擇功能，ListBox支持單選、多選。ListView能以不同的視圖形式展示列表信息。

下面我們通過例子來展現：

1.1、ItemsControl實現的圖片選擇預覽控件

控件的效果如下：

下面貼上代碼：

 <StackPanel Orientation="Horizontal" Margin=" 0 0" HorizontalAlignment="Center" VerticalAlignment="Center">
       <Grid>
            <Rectangle x:Name="rectangle" RadiusX="0" RadiusY="0" Width="50" Height="50" MouseLeftButtonUp="UpLoadCaptrue_Click" SnapsToDevicePixels="True" StrokeDashArray="3 3 3 3" StrokeThickness="1" Margin="5 0">
                 <Rectangle.Fill>
                       <ImageBrush ImageSource="/Images/UpLoad.png" Opacity="0.3" Stretch="Fill" Viewport="0.25 0.25 0.5 0.5"/>
                 </Rectangle.Fill>
                 <Rectangle.Style>
                       <Style TargetType="Rectangle">
                             <Setter Property="Stroke" Value="#999999"/>
                             <Style.Triggers>
                                  <Trigger Property="IsMouseOver" Value="true">
                                       <Setter Property="Stroke" Value="#1dc0a5"/>
                                  </Trigger>
                             </Style.Triggers>
                        </Style>
                  </Rectangle.Style>
            </Rectangle>
        </Grid>
        <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Hidden" Width="360">
              <ItemsControl x:Name="itemsControl"   Background="Transparent" ItemsSource="{Binding }">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <StackPanel Orientation="Horizontal"/>
                          </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                          <DataTemplate>
                               <Border>
                                    <StackPanel>
                                        <Grid Width="60" Height="60" SnapsToDevicePixels="True">
                                            <Border BorderBrush="#999999" Width="50" Height="50" BorderThickness="1" Margin="5 0">
                                                <Image Source="{Binding}" Width="40" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                            </Border>
                                            <Image Source="/Images/Close.png" Width="16" Height="16" MouseLeftButtonUp="ReMoveCaptrue_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 2 0 0">
                                                <Image.Style>
                                                    <Style TargetType="Image">
                                                        <Style.Triggers>
                                                            <Trigger Property="IsMouseOver" Value="true">
                                                                <Setter Property="Effect">
                                                                    <Setter.Value>
                                                                        <DropShadowEffect ShadowDepth="0" Color="Red" Opacity="1" BlurRadius="5"/>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Trigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                        </Grid>
                                    </StackPanel>
                                </Border>
                           </DataTemplate>
                     </ItemsControl.ItemTemplate>
               </ItemsControl>
        </ScrollViewer>
 </StackPanel>

上面ItemsControl設置了ItemsPanel，由於我們的列表展示是橫向的，所以設置StackPanel，並將Orientation設置為Horizontal。

里面有兩個事件，添加圖片UpLoadCaptrue_Click和移除圖片ReMoveCaptrue_Click。代碼如下：

public MainWindow()
{
      InitializeComponent();
      this.itemsControl.ItemsSource = Capture;
}

public ObservableCollection<string> Capture = new ObservableCollection<string>();

/// <summary>
/// 上傳截圖
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void UpLoadCaptrue_Click(object sender, MouseButtonEventArgs e)
{
      OpenFileDialog logoSelected = new OpenFileDialog();
      logoSelected.Filter = "圖片|*.jpg;*.png;*.bmp;*.gif";
      if (logoSelected.ShowDialog() ==true)
      {
           Capture.Add(logoSelected.FileName);
      }
}

/// <summary>
/// 移除截圖
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ReMoveCaptrue_Click(object sender, MouseButtonEventArgs e)
{
      Capture.Remove(((Image)sender).DataContext.ToString());
}

 控件中用到的素材：

 

1.2、基於ListBox實現用戶列表展示

下面的實例一般用於通訊軟件用戶列表展示。主要是通過修改ListBoxItem的樣式來實現。

先看下實現的效果：

大體思路：先定義ListBoxStyle，定義ListBox的Style是為了實現去掉列表項的間隙，默認的ListBox里面有Padding值。我們把Padding改為0；然后定義ListBoxItem項的Style樣式，因為我們是通過綁定數據的方式呈現，因此對於需要動態顯示的值我們把它放到一個類中。

 public List<UserInfo> UserList { get; set; }

 public class UserInfo
{
         public Brush UserBackground { get; set; }
         public string Header { get; set; }
         public string Name { get; set; }
         public string Info { get; set; }
         public int Count { get; set; }
}

ListBoxItem樣式代碼如下：

 <Style x:Key="UserInfoStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid Height="50" x:Name="grid">
                            <Border Background="{Binding UserBackground}" Width="40" Height="40" CornerRadius="4" HorizontalAlignment="Left" Margin="5 0 0 0">
                                <TextBlock Text="{Binding Header}" FontSize="23" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                            <TextBlock Text="{Binding Name}" Margin="55 7 0 0" FontSize="13"/>
                            <TextBlock Text="{Binding Info}" Foreground="#808080" Margin="55 30 0 0"/>
                            <TextBlock Text="{Binding Count,StringFormat={}{0}人}" Foreground="#808080" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 5 0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="grid" Property="Background" Value="#fceeb9"/>
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="true">
                                <Setter TargetName="grid" Property="Background" Value="#fae388"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

ListBox樣式代碼如下：

<ListBox BorderThickness="1" ItemContainerStyle="{StaticResource UserInfoStyle}" x:Name="UserInfoList" BorderBrush="#eaeaeb" Background="Transparent" Width="280" Height="300" Margin="50 5 0 0">
        <ListBox.Style>
              <Style TargetType="ListBox">
                    <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBox">
                                    <Border x:Name="Bd"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0">
                                        <ScrollViewer Focusable="False">
                                            <ItemsPresenter />
                                        </ScrollViewer>
                                    </Border>

                                </ControlTemplate>
                         </Setter.Value>
                 </Setter>
            </Style>
      </ListBox.Style>
</ListBox>

后台C#代碼初始化數據，及設定數據源：

UserList = new List<UserInfo>()
            {
                new UserInfo(){
                    UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),
                    Header="群",
                    Name="DESKTOP-0N",
                    Info="我要像風一樣自由!",
                    Count=3
                },
                new UserInfo(){
                     UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),
                    Header="張",
                    Name="張三豐",
                    Info="我要像風一樣自由!",
                    Count=5
                },
                new UserInfo(){
                     UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#9d9d9d")),
                    Header="鬼",
                    Name="鬼見愁",
                    Info="我要像風一樣自由!",
                    Count=2
                },
            };
            this.UserInfoList.ItemsSource = UserList;

1.3、ListBoxView列表信息展示

ListBoxView信息展示有點像DataGrid控件，以下為ListBoxView基本樣式代碼：

  <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <GridViewRowPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" TargetName="Bd" Value="#FF866C"></Setter>
                                <Setter Property="Foreground" Value="White"></Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="Bd" Value="#FFEAE4"></Setter>
                                <Setter Property="Foreground" Value="Black"></Setter>
                            </Trigger>
                            <Trigger Property="Height" Value="Auto">
                                <Setter Property="MinHeight" Value="35" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
            <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource ListViewItemStyle}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListView}">
                        <ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
       
        <Style x:Key="GridViewColumnHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Background" Value="#FFEAE4" />
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Grid SnapsToDevicePixels="True" >
                            <Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="7"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
                                        <ContentPresenter x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Border>
                                </Grid>
                            </Border>
                            <Canvas>
                                <Thumb x:Name="PART_HeaderGripper">
                                    <Thumb.Style>
                                        <Style TargetType="{x:Type Thumb}">
                                            <Setter Property="Canvas.Right" Value="-9"/>
                                            <Setter Property="Width" Value="18"/>
                                            <Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="Background" Value="White"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                                        <Border Background="Transparent" Padding="{TemplateBinding Padding}">
                                                            <Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Canvas>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="#FF866B"/>
                                <Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="#FF866B"/>
                                <Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="Height" Value="Auto">
                                <Setter Property="MinHeight" Value="35"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

引用示例：

 <ListView x:Name="ListView"  Style="{StaticResource ListViewStyle1}" Width="500">
                <ListView.View>
                    <GridView  ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
                        <GridViewColumn Header="序號" DisplayMemberBinding="{Binding Num}" Width="100"/>
                        <GridViewColumn Header="名稱" DisplayMemberBinding="{Binding Name}"  Width="100"/>
                        <GridViewColumn Header="Template"  Width="auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <CheckBox Content="{Binding Template}"></CheckBox>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

后台代碼需要給ListBoxView綁定數據：

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ListViewDataList = new List<ListViewData>();
            for (int i = 0; i < 10; i++)
            {
                ListViewDataList.Add(new ListViewData()
                {
                    Num = i,
                    Name = "No_" + i.ToString(),
                    Template="Temlate:"+i.ToString()
                });
            }
            this.ListView.ItemsSource = ListViewDataList;
        }
        public List<ListViewData> ListViewDataList { get; set; }
        public class ListViewData
        {
            public int Num { get; set; }
            public string Name { get; set; }
            public string Template { get; set; }
        }

    }

 效果圖：

 

所有代碼已經上傳到github：https://github.com/cmfGit/WpfDemo.git