[WPF 自定義控制項]創建包含CheckBox的ListBoxItem

来源:https://www.cnblogs.com/dino623/archive/2020/02/17/Create_ListBoxIte_with_a_CheckBox.html
-Advertisement-
Play Games

1. 前言 Xceed wpftoolkit提供了一個 "CheckListBox" ,效果如下: 不過它用起來不怎麼樣,與其這樣還不如參考UWP的ListView實現,而且動畫效果也很好看: 它的樣式如下: 屬性是很多了,但這裡沒有自定義CheckBox樣式的方法,而且也沒法參考它的動畫如何實現。 ...


1. 前言

Xceed wpftoolkit提供了一個CheckListBox,效果如下:

不過它用起來不怎麼樣,與其這樣還不如參考UWP的ListView實現,而且動畫效果也很好看:

它的樣式如下:

<ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
    x:Name="Root"
    Control.IsTemplateFocusTarget="True"
    FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
    SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
    CheckBrush="{ThemeResource ListViewItemCheckBrush}"
    CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
    DragBackground="{ThemeResource ListViewItemDragBackground}"
    DragForeground="{ThemeResource ListViewItemDragForeground}"
    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
    FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
    PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
    PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
    SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
    SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
    SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
    PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
    SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
    ContentMargin="{TemplateBinding Padding}"
    CheckMode="{ThemeResource ListViewItemCheckMode}"
    RevealBackground="{ThemeResource ListViewItemRevealBackground}"
    RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
    RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">

屬性是很多了,但這裡沒有自定義CheckBox樣式的方法,而且也沒法參考它的動畫如何實現。幸好UWP還提供了一個ListViewItemExpanded樣式,裡面有完整的佈局、VisualState等,不過總共有差不多500行,只拿其中MultiSelectStates的部分也將近100行,這太過複雜了,這還是有些麻煩,在WPF中實現起來反而簡單很多。

2. 實現

微軟的文檔中有介紹如何Create ListViewItems with a CheckBox,原理十分簡單:

<DataTemplate x:Key="FirstCell">
  <StackPanel Orientation="Horizontal">
    <CheckBox IsChecked="{Binding Path=IsSelected, 
      RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}"/>
  </StackPanel>
</DataTemplate>

就是在控制項模板中添加一個CheckBox並且這個CheckBox通過FindAncestor的Binding方式綁定到ListViewItem的IsSelected屬性。雖然是ListView的方法,但它同樣適用於ListBox。所以我使用這個方式封裝了一個ListBox控制項,目前基本上沒什麼功能,就只是在每個ListBoxItem前面加上一個CheckBox。以前介紹過如何自定義ItemsControl,要自定義一個ListBox控制項,同樣需要三部:

  1. 定義ListBox
  2. 關聯ListBoxItem和ListBox
  3. 實現ListBox的邏輯
public class ExtendedListBox : ListBox
{
    public static readonly DependencyProperty IsMultiSelectCheckBoxEnabledProperty =
        DependencyProperty.Register(nameof(IsMultiSelectCheckBoxEnabled), typeof(bool), typeof(ExtendedListBox), new PropertyMetadata(true));

    public bool IsMultiSelectCheckBoxEnabled
    {
        get { return (bool)GetValue(IsMultiSelectCheckBoxEnabledProperty); }
        set { SetValue(IsMultiSelectCheckBoxEnabledProperty, value); }
    }

    protected override DependencyObject GetContainerForItemOverride()
    {
        return new ExtendedListBoxItem();
    }
}


public class ExtendedListBoxItem : ListBoxItem
{
    public ExtendedListBoxItem()
    {
        DefaultStyleKey = typeof(ExtendedListBoxItem);
    }
}

上面就是全部代碼。定義了ExtendedListBoxExtendedListBoxItem兩個類,然後重寫GetContainerForItemOverride關聯這兩個類,最後在ExtendedListBox的代碼里模仿UWP的ListView提供了IsMultiSelectCheckBoxEnabled屬性,其他功能主要由XAML提供:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Primitives:KinoResizer>
    <CheckBox Margin="{TemplateBinding Padding}"
              IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
              IsTabStop="False"
              x:Name="SelectionCheckMark"/>
</Primitives:KinoResizer>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1"
                  Margin="{TemplateBinding Padding}"/>

ControlTemplate使用Resizer包裝CheckBox,這是為了CheckBox隱藏或顯示時有過渡動畫。然後在ControlTemplate.Triggers里添加兩個DataTrigger,根據所屬的ListBox的IsMultiSelectCheckBoxEnabledSelectionMode顯示或隱藏SelectionCheckMark:

<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBox},Path=SelectionMode}"
             Value="Single">
    <Setter Property="Visibility"
            TargetName="SelectionCheckMark"
            Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBox},Path=IsMultiSelectCheckBoxEnabled}"
             Value="False">
    <Setter Property="Visibility"
            TargetName="SelectionCheckMark"
            Value="Collapsed" />
</DataTrigger>

最終效果如下:

3. 添加VisualState

WPF的Button的ControlTemplate沒有使用VisualState,但Button支持VisualState,用戶可以自定義使用VisualState的ControlTemplate。ExtendedListBoxItem也模仿UWP提供了MultiSelectEnabled和MultiSelectDisabled兩個VisualState,因為ListBoxItem需要知道承載它的ListBox的IsMultiSelectCheckBoxEnabled和SelectionMode,所以需要給ListBoxItem添加一個Owner屬性,並重載ListBox的PrepareContainerForItemOverride函數,在這個函數中為ListBoxItem的Owner賦值:

protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
    base.PrepareContainerForItemOverride(element, item);
    if (element is ExtendedListBoxItem listBoxItem)
        listBoxItem.Owner = this;
}

ListBoxItem中使用監視Owner的IsMultiSelectCheckBoxEnabled和SelectionMode的改變,併在這兩個值改變時更新VisualState:

protected virtual void OnOwnerChanged(ExtendedListBox oldValue, ExtendedListBox newValue)
{
    if (oldValue != null)
    {
        var descriptor = DependencyPropertyDescriptor.FromProperty(ListBox.SelectionModeProperty, typeof(ExtendedListBox));
        descriptor.RemoveValueChanged(newValue, OnSelectionModeChanged);

        descriptor = DependencyPropertyDescriptor.FromProperty(ExtendedListBox.IsMultiSelectCheckBoxEnabledProperty, typeof(ExtendedListBox));
        descriptor.RemoveValueChanged(newValue, OnIsMultiSelectCheckBoxEnabledChanged);
    }
    if (newValue != null)
    {
        var descriptor = DependencyPropertyDescriptor.FromProperty(ListBox.SelectionModeProperty, typeof(ExtendedListBox));
        descriptor.AddValueChanged(newValue, OnSelectionModeChanged);

        descriptor = DependencyPropertyDescriptor.FromProperty(ExtendedListBox.IsMultiSelectCheckBoxEnabledProperty, typeof(ExtendedListBox));
        descriptor.AddValueChanged(newValue, OnIsMultiSelectCheckBoxEnabledChanged);
    }
}

private void OnSelectionModeChanged(object sender, EventArgs args)
{
    UpdateVisualStates(true);
}

private void OnIsMultiSelectCheckBoxEnabledChanged(object sender, EventArgs args)
{
    UpdateVisualStates(true);
}

為了使用VisualState我在ControlTemplate多寫了80行代碼,因為沒有用上VisualTransition所以這個ControlTemplate有一些Bug,反正只是用來驗證添加的兩個VisualState是否有效。在ListBoxItem里用Trigger比使用VisualState更簡潔有效。

4. 使用同樣的原理為DataGrid的行添加ChechBox

DataGrid也可以用同樣的原理為每一行添加CheckBox,只不過DataGrid的Template會負責很多。

首先自定義一個DataGrid類:

public class ExtendedDataGrid : DataGrid, IMultiSelector
{
    // Using a DependencyProperty as the backing store for IsMultiSelectCheckBoxEnabled.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsMultiSelectCheckBoxEnabledProperty =
        DependencyProperty.Register(nameof(IsMultiSelectCheckBoxEnabled), typeof(bool), typeof(ExtendedDataGrid), new PropertyMetadata(true));

    public ExtendedDataGrid()
    {
        DefaultStyleKey = typeof(ExtendedDataGrid);
    }

    public bool IsMultiSelectCheckBoxEnabled
    {
        get { return (bool)GetValue(IsMultiSelectCheckBoxEnabledProperty); }
        set { SetValue(IsMultiSelectCheckBoxEnabledProperty, value); }
    }
}

然後定義一個RowHeaderTemplate

<DataTemplate x:Key="DataGridRowHeaderTemplate">
    <Grid>
        <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}, Mode=FindAncestor}}"
                      x:Name="SelectionCheckBox"/>
    </Grid>
</DataTemplate>

在DataGrid的Style上應用這個RowHeaderTemplate。最後再DataGrid的Style的Triggers中添加兩個DataTrigger:

<Trigger Property="SelectionMode" Value="Single">
    <Setter Property="HeadersVisibility"  Value="Column" />
</Trigger>
<Trigger Property="IsMultiSelectCheckBoxEnabled" Value="False">
    <Setter Property="HeadersVisibility"  Value="Column"/>
</Trigger>

HeadersVisibility是個DataGridHeadersVisibility的屬性,它用於控制DataGrid行和列的Header是否顯示,因為我在每一行的開頭放了CheckBox(就是使用上面定義的RowHeaderTempalte),所以定一隻只顯示Column的Header的話相當於隱藏了這個CheckBox,運行效果如下:

5. 結語

ListBox和DataGrid的自定義是個很大的話題,這裡只實現最簡單的功能,通常會根據業務需求逐漸增加更多需求。如果有更複雜的需求,我建議買商業的控制項,畢竟DataGrid的自定義可以很複雜,花時間不如花錢。

6. 參考

How to_ Create ListViewItems with a CheckBox - WPF _ Microsoft Docs

ListBox Class (System.Windows.Controls) _ Microsoft Docs

DataGrid Class (System.Windows.Controls) _ Microsoft Docs

7. 源碼

Kino.Toolkit.Wpf_ExtendedListBox.cs at master

Kino.Toolkit.Wpf_ExtendedDataGrid.cs at master


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 以控台的形式,運行.net core mvc 代碼, Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>();//指定網路主機要使用的啟動類型 ...
  • 通過上一章的學習,Geometry抽象類表示形狀或路徑。Drawing抽象類扮演了互補的角色,它表示2D圖畫(Drawing)——換句話說,它包含了顯示矢量圖像或點陣圖需要的所有信息。 儘管有幾類畫圖類,但只有GeometryDrawing類能使用已經學習過的幾何圖形。它增加了決定如何繪製圖形的畫筆和 ...
  • String類型很簡單,就不做示例演示了,這裡只貼出Helper類 /// <summary> /// 判斷key是否存在 /// </summary> /// <param name="key"></param> /// <param name="db"></param> /// <returns ...
  • 過濾漢字 Regex.Replace(inputStr,@"[\u4e00-\u9fa5]",string.Empty); 提取漢字: Regex.Replace(inputStr,@"[^\u4e00-\u9fa5]",string.Empty);//註意這裡多了個^符號 ...
  • //從第1個開始,依次向左插入值。如果鍵不存在,先創建再插入值 隊列形式 先進後出,後進先出 //插入後形式 <-- 10,9,8,7,6,5,4,3,2,1 <-- 方向向左依次進行 stopwatch.Start(); for (int i = 0; i < 10; i++) { var get ...
  • 前言 IdentityServer4(以下簡稱 Id4) 是 Asp.Net Core 中一個非常流行的 OpenId Connect 和 OAuth 2.0 框架,可以輕鬆集成到 Asp.Net Core 應用中,並且與 Asp.Net Core Identity 也可以輕鬆集成。博客園也有大佬發 ...
  • 文章出處: https://www.cnblogs.com/dotnet261010/p/6275821.html 一、WPF簡介 WPF:WPF即Windows Presentation Foundation,翻譯為中文“Windows呈現基礎”,是微軟推出的基於Windows Vista的用戶界 ...
  • 定義委托 委托實例化 定義具體執行的方法 綁定方法 觸發委托 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...