c# WPF Filter list of controls

Question

Has anyone tried filtering lists of controls? I have some simple sample code that will illustrate an issue that I can't seem to get around. When filtering lists of text I have no issues but when I turn the list into an observable list of controls any filter I run effects the other filters. Here is some sample code that works

Code:

public partial class MainWindow : Window
{
    public ObservableCollection<string> testOC { get; set; }
    public MainWindow()
    {
        InitializeComponent();

        testOC = new ObservableCollection<string>();

        for (int i = 0; i < 20; i++)
        {
            testOC.Add("Test Stuff " + i);
        }

        ListCollectionView view1 = new ListCollectionView(testOC);
        ListCollectionView view2 = new ListCollectionView(testOC);
        view1.Filter = Filter1;
        view2.Filter = Filter2;
        leftGrid.ItemsSource = testOC;
        MiddleGrid.ItemsSource = view1;
        rightGrid.ItemsSource = view2;
    }

    private bool Filter1(object test)
    {
        try
        {
            var testStuff = test as string;

            if (testStuff.Contains("1"))
            {
                return true;
            }
            return false;
        }
        catch (Exception)
        {
            throw;
        }
    }
    private bool Filter2(object test)
    {
        try
        {
            var testStuff = test as string;

            if (testStuff.Contains("2"))
            {
                return true;
            }
            return false;
        }
        catch (Exception)
        {
            throw;
        }
    }
}

XML:

<Window x:Class="testTheFilter.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:testTheFilter"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="775"/>
    </Grid.RowDefinitions>
    <ItemsControl Name="leftGrid" Grid.Column="0" Grid.RowSpan="2"/>
    <ItemsControl Name="MiddleGrid" Grid.Column="1" Grid.RowSpan="2"/>
    <ItemsControl Name="rightGrid" Grid.Column="2" Grid.RowSpan="2"/>
</Grid>

Screenshot of code working:

This works as it should, you get three lists the first list contains all strings, the second contains only strings with 1's, and the third list contains only strings with 2's.

Now if I take that exact same code and change it to a list of controls it gets wonky

Here is code part:

public partial class MainWindow : Window
{
    public ObservableCollection<Button> testOC { get; set; }
    public MainWindow()
    {
        InitializeComponent();

        testOC = new ObservableCollection<Button>();

        for (int i = 0; i < 20; i++)
        {
            Button btn = new Button();
            btn.Content = "Test Stuff " + i;
            testOC.Add(btn);
        }

        ListCollectionView view1 = new ListCollectionView(testOC);
        ListCollectionView view2 = new ListCollectionView(testOC);
        view1.Filter = Filter1;
        view2.Filter = Filter2;
        leftGrid.ItemsSource = testOC;
        MiddleGrid.ItemsSource = view1;
        rightGrid.ItemsSource = view2;
    }

    private bool Filter1(object test)
    {
        try
        {
            var testStuff = test as Button;

            if (testStuff.Content.ToString().Contains("1"))
            {
                return true;
            }
            return false;
        }
        catch (Exception)
        {
            throw;
        }
    }
    private bool Filter2(object test)
    {
        try
        {
            var testStuff = test as Button;

            if (testStuff.Content.ToString().Contains("2"))
            {
                return true;
            }
            return false;
        }
        catch (Exception)
        {
            throw;
        }
    }
}

Here is a screenshot of code not working:

Has anyone seen this behavior before and does anyone know how to fix this? I've spent hours researching this and can't seem to find a fix.

Thanks in advance

Answer 1

As you can't add one visual element (Button) to different parents at the same time, why not use DataTemplates? If you keep the code from your frist example, just edit the XAML and you're ready to go:

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="itemTemplate">
            <Button>
                <ContentPresenter Content="{Binding}" />
            </Button>
        </DataTemplate>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="775"/>
    </Grid.RowDefinitions>
    <ItemsControl Name="leftGrid" Grid.Column="0" Grid.RowSpan="2" ItemTemplate="{StaticResource itemTemplate}" />
    <ItemsControl Name="MiddleGrid" Grid.Column="1" Grid.RowSpan="2" ItemTemplate="{StaticResource itemTemplate}" />
    <ItemsControl Name="rightGrid" Grid.Column="2" Grid.RowSpan="2" ItemTemplate="{StaticResource itemTemplate}" />
</Grid>