按内容对ListBox项进行排序，其中ListBoxItem是具有子级的StackPanel

Question

I have what I believe to be a potentially unique situation.

My ListBox items consist of the following:

• StackPanel
• Image
• ListItem

The ListItem and Image are inserted into the StackPanel , then the StackPanel is the inserted into the ListBox for each item in the array.

Now the challenging part comes in sorting the content by the ListItem 's Content (text) as it's a child of the StackPanel . Naturally, the StackPanel does not contain a Content member, so using the below code fails.

this.Items.SortDescriptions.Add(new System.ComponentModel.SortDescription("Content",
        System.ComponentModel.ListSortDirection.Ascending));

So I figured, what if I set my StackPanel 's data context to my ListItem , then surely it will find it.

stackPanel.DataContext = this.Items;

However, that also fails.

I'm creating my ListItems programatically in the code behind, via data that is loaded in via Json.Net .

My goal here is to sort the items from AZ, based on the Items Content. I would prefer to keep my current implementation (creating the data programatically) as it gives me more control over the visuals. Plus, it's only about 20 lines of code.

Is it possible to use SortDescriptions when the ListItem 's content is a StackPanel ?

Thank you

PS: Only started with WPF today, but have been developing WinForms apps for nearly 2 months.

Answer 1

The WPF way to do it would be to bind your ListBox ItemsSource to an ObservableCollection containing your items.
You would then be able to sort your observableCollection liks so :

CollectionViewSource.GetDefaultView(YourObservableCollection).SortDescriptions.Add(new SortDescription("PropertyToSort", ListSortDirection.Ascending));

Here is a small project that highlights this :

XAML :

<Window x:Class="stackPanelTest.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:stackPanelTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

    <Grid>
        <ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Label Content="{Binding Image}" />
                        <TextBlock Text="{Binding Item.Content}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

</Window>

Code Behind :

public partial class MainWindow : Window
{
    public ViewModel Items { get; set; } = new ViewModel();
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }
}

ViewModel :

public class ViewModel : ObservableCollection<ListItem>
{
    public ViewModel()
    {
        populateItems();
        CollectionViewSource.GetDefaultView(this).SortDescriptions.Add(new SortDescription("Item.Content", ListSortDirection.Ascending));
    }

    private void populateItems()
    {
        addOneItem(0, "zero");
        addOneItem(1, "one");
        addOneItem(2, "two");
        addOneItem(3, "three");
        addOneItem(4, "four");
    }

    private void addOneItem(int img, string content)
    {
        ListItem item = new ListItem();
        item.Image = img;
        item.Item = new SomeItem { Content = content };

        Add(item);
    }
}

public class ListItem
{
    public int Image { get; set; }
    public SomeItem Item { get; set; }
}

public class SomeItem
{
    public string Content { get; set; }
}

I took the liberty of renaming your "ListItem" into a "SomeItem" class because I didn't know what it was.
Then I made a "ListItem" class which is used to contain a Image/SomeItem pair (which is what your ListBox is composed of).
Also I used an int instead of an actual image but that should be easily changable.

Here's a screenshot of what I get when executing this code :

Hope this helps, good luck.

PS : if your items values are susceptible to change, don't forget to implement INotifyPropertyChanged in "SomeItem" and "ListItem", otherwise the change won't be updated in your view.

Answer 2

Is it possible to use SortDescriptions when the ListItem's content is a StackPanel ?

No. You will have to implement the sorting logic yourself.

There is no easy way to apply custom sorting to the ItemCollection that is returned from the Items property of the ListBox so instead of adding items to this one you could add the items to a List<StackPanel> and sort this one.

You could still create the data programatically just as before.

Here is an example for you:

Code:

public partial class MainWindow : Window
{
    private List<StackPanel> _theItems = new List<StackPanel>();
    public MainWindow()
    {
        InitializeComponent();

    //create the items:
        StackPanel sp1 = new StackPanel();
        ListBoxItem lbi1 = new ListBoxItem() { Content = "b" };
        Image img1 = new Image();
        sp1.Children.Add(lbi1);
        sp1.Children.Add(img1);
        _theItems.Add(sp1);

        StackPanel sp2 = new StackPanel();
        ListBoxItem lbi2 = new ListBoxItem() { Content = "a" };
        Image img2 = new Image();
        sp2.Children.Add(lbi2);
        sp2.Children.Add(img2);
        _theItems.Add(sp2);

        StackPanel sp3 = new StackPanel();
        ListBoxItem lbi3 = new ListBoxItem() { Content = "c" };
        Image img3 = new Image();
        sp3.Children.Add(lbi3);
        sp3.Children.Add(img3);
        _theItems.Add(sp3);

        //sort the items by the Content property of the ListBoxItem
        lb.ItemsSource = _theItems.OrderBy(x => x.Children.OfType<ListBoxItem>().FirstOrDefault().Content.ToString()).ToList();
    }
}

XAML:

<ListBox x:Name="lb" />