Grouping data into itemscontrol(s) with template

Question

following some examples and blogs, I've done a little project to test the grouping of some elements in my xaml. The code is:

<Window.Resources>
    <XmlDataProvider x:Key="data">
        <x:XData>
            <Devices xmlns="">
                <Terminal name="Gasoline" Code="00001001" />
                <Terminal name="cherosene" Code="00001002" />
                <Terminal name="Oil" Code="00001002" />
                <Terminal name="Wather" Code="00001003" />
                <Terminal name="cherosene" Code="00001003" />
                <Terminal name="Wather" Code="00001004" />
                <Terminal name="cherosene" Code="00001004" />
                <Terminal name="Oil" Code="00001004" />
                <Terminal name="cherosene" Code="00001004" />
                <Terminal name="alcohol" Code="00001005" />
            </Devices>
        </x:XData>
    </XmlDataProvider>

    <CollectionViewSource x:Key="TerminalByCodes" Source="{Binding Source={StaticResource data}, XPath=Devices/Terminal}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="@Code" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</Window.Resources>

<Grid>
    <DockPanel>
        <ScrollViewer DockPanel.Dock="Bottom"   VerticalScrollBarVisibility="Auto">
            <ItemsControl ItemsSource="{Binding Source={StaticResource TerminalByCodes}}" >
                <ItemsControl.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <GroupBox Header="{Binding Name}">
                                                <ItemsPresenter/>
                                            </GroupBox>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ItemsControl.GroupStyle>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding XPath=@name}" Background="#FFDBA8A8" Margin="0,0,10,0" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </DockPanel>
</Grid>

This code has this output:

As you can see, the data are written in the xaml. But, as you imagine, this isn't how I have to work. How can I update my code to make it work with "code-generated-data"? And how if is it made with a mvvm binding?

score 1 · Accepted Answer · answered Sep 24 '15 at 09:03

Salve Piero !

You can instanciate CollectionViewsSource in a view model class :

CollectionViewSource viewSource = new CollectionViewSource();

and provide some data to it :

    private List<Terminal> terminals = new List<Terminal>
    {
        new Terminal{  Code="00001001", Name= "Gasoline" },
        new Terminal{ Code="00001001", Name= "cherosene"},
        new Terminal{ Code="00001001", Name= "Oil"},
        new Terminal{ Code="00001003", Name= "Gasoline" },
        new Terminal{ Code="00001003", Name= "cherosene"},
        new Terminal{  Code="00001003", Name= "Oil"},
    };
terminalsViewSource.Source = terminals;

Create a property in a view model class so that Databinding can work :

    public Object TerminalsView
    {
        get { return terminalsViewSource.View; }
    }

In code behind you can create the ViewModel :

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }

Bind to it in .xaml :

<DataGrid x:Name="datagridTerminals" ItemsSource="{Binding TerminalsView}" AutoGenerateColumns="True" >

Additionaly in Viewmodel you can add, Filter, IsSorted, IsGrouped properties so that your data can be filtered (by name for instance), grouped (or not), and sorted.

For instance :

<TextBox x:Name="textboxFilter" Text="{Binding Filter}" />

Property in ViewModel :

    public String Filter
    {
        get { return filter; }
        set
        {
            filter = value;
            terminalsViewSource.View.Refresh();
        }
    }

All that works in the code sample here :

http://1drv.ms/1P8cMVc

Forza !

Grouping data into itemscontrol(s) with template

1 Answers1

Linked