Different view mode for each group

Question

I have a data items organized into groups and want to display all groups at once. Each group has specified if it has to be displayed as

Icons/Widgets (eg creating Icon View mode for ListView WPF Wrap Panel

or

normal list, each item one row (eg Custom ListViewItem in ListView).

Is it possible to select View Mode for every group in one ListView? Or should I create different ListView for every group? Or use ListBox and Icons view would be embedded as one item with wrappanel?

Group 1
------------------------------
Item11  Item12  Item13  Item14
Item15  Item16

Group 2
------------------------------
Item21
Item22
Item23
Item24

Group 3
------------------------------
Item31  Item32  Item33  Item34
Item35  Item36

"I have a data items organized into groups." do you have a collection of collections or a single collection of items that are grouped in xaml by using PropertyGroupDescription? — Milan, Jan 13 '18 at 17:13
@Milan Collection of collections is right. Collection of groups, every group has its own name, set of items and one enum telling if it is list view or icons view. — Michal Dobrodenka, Jan 14 '18 at 11:30

score 1 · Accepted Answer · answered Jan 13 '18 at 17:01

MainViewModel Code:

namespace Question48240657
{
    public class MainViewModel
    {
        public List<object> Groups { get; set; }

        public List<Data> MainData { get; set; }

        public MainViewModel()
        {
            MainData = GetData();
            Groups = GetGroups(MainData);
        }

        private List<object> GetGroups(List<Data> mainData)
        {
            var groups = new List<object>()
            {
                new Group1() { DataList = mainData.Where(x => x.GropuName == "Group1").ToList() },
                new Group2() { DataList = mainData.Where(x => x.GropuName == "Group1").ToList() },
                new Group3() { DataList = mainData.Where(x => x.GropuName == "Group1").ToList() },
            };
            return groups;
        }

        public List<Data> GetData()
        {
            var dataList = new List<Data>()
            {
                new Data() { Name = "Data1", GropuName = "Group1" },
                new Data() { Name = "Data2", GropuName = "Group1" },
                new Data() { Name = "Data3", GropuName = "Group1" },
                new Data() { Name = "Data4", GropuName = "Group2" },
                new Data() { Name = "Data5", GropuName = "Group2" },
                new Data() { Name = "Data6", GropuName = "Group2" },
                new Data() { Name = "Data7", GropuName = "Group3" },
                new Data() { Name = "Data8", GropuName = "Group3" },
                new Data() { Name = "Data9", GropuName = "Group3" },
            };
            return dataList;
        }
    }

    #region Classes from directory "Model"

    public class Data
    {
        public string Name { get; set; }

        public string GropuName { get; set; }
    }

    public class Group1
    {
        public List<Data> DataList { get; set; }
    }

    public class Group2
    {
        public List<Data> DataList { get; set; }
    }

    public class Group3
    {
        public List<Data> DataList { get; set; }
    }

    #endregion
}

Xaml Code:

<Window x:Class="Question48240657.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:Question48240657"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:Group1}">
            <TabControl ItemsSource="{Binding DataList}" DisplayMemberPath="Name"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Group2}">
            <ListBox ItemsSource="{Binding DataList}" DisplayMemberPath="Name"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Group3}">
            <ItemsControl ItemsSource="{Binding DataList}" DisplayMemberPath="Name">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ItemsControl ItemsSource="{Binding Groups}"/>
    </Grid>
</Window>

Example Image

So it's embedding ListBoxes etc into ItemsControl. It works! Thank you. — Michal Dobrodenka, Jan 14 '18 at 11:37

score 0 · Answer 2 · answered Jan 13 '18 at 14:54

0

You can do this using the DataTemplate and set the DataType property.

Example:

<DataTemplate  DataType="{x:Type local:Foo}">
    <TextBlock Text="I am a Foo" />
</DataTemplate>
<DataTemplate  DataType="{x:Type System:String}">
    <TextBlock Text="I am a String" />
</DataTemplate>

answered Jan 13 '18 at 14:54

Сергей Игнахин

144
4

How to switch different layout for items in every group with this? Lines vs WrapPanel grid. – Michal Dobrodenka Jan 13 '18 at 15:51
1

@Michal Dobrodenka: Added response with implementation example. – Сергей Игнахин Jan 13 '18 at 17:05

Different view mode for each group

2 Answers2