WPF實現(xiàn)自定義一個自刪除的多功能ListBox

更新時間：2022年12月28日 08:27:42 作者：從南到北ss

這篇文章主要為大家詳細介紹了如何利用WPF實現(xiàn)自定義一個自刪除的多功能ListBox，文中示例代碼講解詳細，感興趣的小伙伴可以了解一下

我需要一個ListBox，他在界面上分為幾列，每列對應一系列的數(shù)據(jù)。第一行是各數(shù)據(jù)的標題，支持橫向滾動，豎向只支持數(shù)據(jù)源滾動，標題不隨之滾動。視覺上與ListView類似。支持等比拉伸，支持多選，支持從界面去更改內部數(shù)據(jù)源，支持子項從ListBox中刪除自己。為了實現(xiàn)這些功能，我決定自定義一個特殊的列表，當然他還是繼承自ListBox。

1.首先他支持等比拉伸，且數(shù)據(jù)分列顯示。首先想到Grid的ColumnDefinitions可以滿足。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="74*" />
    <ColumnDefinition Width="179*" />
    <ColumnDefinition Width="157*" />
</Grid.ColumnDefinitions>

2.支持從界面去更改內部數(shù)據(jù)源，支持子項從ListBox中刪除自己。

為了從界面上滿足功能，需要重寫ItemContainerStyle樣式，繪制出該子項Style。在Style中為了處理事件響應，可以通過在數(shù)據(jù)源子項中增加Command來對對應事件進行處理。但是處理邏輯可能有點繁雜，而且單從數(shù)據(jù)處理而言，子項無法從父項中刪除自己，只能通過視覺樹獲取父ListBox，實現(xiàn)該功能。這樣寫的話代碼耦合性會有點高，且數(shù)據(jù)處理時會調取界面處理。我希望數(shù)據(jù)源內部只是在處理數(shù)據(jù)，只能通過界面自上而下的訪問數(shù)據(jù)源，而不是數(shù)據(jù)源和界面都有循環(huán)調用。
第二種方法，我直接重寫一個控件繼承自ListBoxItem，將之前重寫ItemContainerStyle樣式復制到該控件前臺，并在后臺代碼中對相應事件進行處理。代碼如下：

public partial class TestItem : ListBoxItem
{
    public TestItem()
    {
        InitializeComponent();
    }

    private void Delete_Click(object sender, RoutedEventArgs e)
    {
    }
}

因為我是繼承自ListBoxItem的，所以可以通過

ItemsControl.ItemsControlFromItemContainer(this) is ListBox listBox

獲取到父listbox的對象，獲取到父對象后，就可以從ListBox中刪除自己?；蚴歉腖istBox中綁定的數(shù)據(jù)源。

3.我們還需要把這個自定義的ListBoxItem放到我們自定義的ListBox中，讓所有子項都應用這個自定義的ListboxItem，而不是默認的ListboxItem。代碼如下：

internal class TestListBox : ListBox
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new TestItem();
    }
}

4.為了實現(xiàn)數(shù)據(jù)與標題分離的滾動效果，我單獨將標題拿到外部，對標題進行單獨顯示，Listbox只顯示數(shù)據(jù)。外部滑動條支持整體橫向滑動，Listbox內部滑動條支持內部豎向滑動。給兩個滑動條都加上最小寬度。

<ScrollViewer
            Grid.Row="1"
            Margin="0,20,0,0"
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Disabled">
            <Border
                MinWidth="{Binding MinWidth, ElementName=listbox}"
                BorderBrush="#DFDFDF"
                BorderThickness="1">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="52" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="79*" />
                        <ColumnDefinition Width="104*" />
                        <ColumnDefinition Width="80*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.ColumnSpan="20" Background="#F2F2F2" />
                    <TextBlock Text="ID" />
                    <TextBlock Grid.Column="1" Text="編號" />
                    <TextBlock Grid.Column="2" Text="操作" />
                    <controls:TestListBox
                        x:Name="listbox"
                        Grid.Row="1"
                        Grid.ColumnSpan="3"
                        MinWidth="1100"
                        ItemsSource="{Binding ItemsSourceData}"
                        Style="{StaticResource BaseListBoxStyle.WithOutHorizontalScrollViewer}" />
                </Grid>
            </Border>
        </ScrollViewer>

在Listbox的樣式中取消了橫向滑動條的顯示。

 <Style x:Key="BaseListBoxStyle.WithOutScrollViewer" TargetType="ListBox">
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border
                        x:Name="Bd"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="true">
                        <ScrollViewer
                            Focusable="false"
                            HorizontalScrollBarVisibility="Disabled"
                            VerticalScrollBarVisibility="Auto">
                            <ItemsPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

到此這篇關于WPF實現(xiàn)自定義一個自刪除的多功能ListBox的文章就介紹到這了,更多相關WPF自刪除多功能ListBox內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: