Vfrdtyky

With this class:

Public Class PageBetModel

Private _name As String



Public Property Name As String

    Get

        Return _name

    End Get

    Set(ByVal value As String)

        _name = value

    End Set

End Property



Private _group As String



Public Property Group As String

    Get

        Return _group

    End Get

    Set(ByVal value As String)

        _group = value

    End Set

End Property

End Class

I want to create an style with an ItemsControl, painting the Name Property,
and grouping by Group property.

<ItemsControl ItemsSource="{Binding Path=Model}" ItemsPanel="{DynamicResource MyPanel}" ItemTemplate="{DynamicResource MyTemplate}"/>



<DataTemplate x:Key="MyTemplate">

    <Border MinHeight="100" BorderThickness="0,0,0,2" BorderBrush="#dfe1e0">



            <TextBlock x:Name="RadioButtonText" Margin="16,40,16,16" Width="287" Text="{Binding Path=Name}" FontFamily="Arial" FontSize="17" Foreground="#474747" FontWeight="SemiBold" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>



    </Border>

</DataTemplate>

I want to display this simple design but grouping the different names with an Expander by the Group Property.

Set the ItemsSource to a grouped CollectionViewSource:

<CollectionViewSource x:Key="cvs" Source="{Binding Path=Model}">

    <CollectionViewSource.GroupDescriptions>

        <PropertyGroupDescription PropertyName="Group" />

    </CollectionViewSource.GroupDescriptions>

</CollectionViewSource>

...and define a GroupStyle that contains an Expander:

<ItemsControl ItemsPanel="{DynamicResource MyPanel}"

            ItemsSource="{Binding Source={StaticResource cvs}}"

            ItemTemplate="{DynamicResource MyTemplate}">

    <ItemsControl.GroupStyle>

        <GroupStyle>

            <GroupStyle.ContainerStyle>

                <Style TargetType="{x:Type GroupItem}">

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate>

                                <Expander IsExpanded="True">

                                    <Expander.Header>

                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />

                                    </Expander.Header>

                                    <ItemsPresenter />

                                </Expander>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </GroupStyle.ContainerStyle>

        </GroupStyle>

    </ItemsControl.GroupStyle>

</ItemsControl>