Category / Section
How to group the WPF CardView control starting at a new line?
25 mins read
This article explains how to customize the groups of the WPF CardView control starting at a new line.
You can group the CardView control starting at a new line by creating the custom style.You can define a custom style in resource section of the parent element of CardView control and assign it a unique key. Then, by utilizing that key in the style property of the CardView, you can apply the custom style to the CardView.
Step 1: In order to bind the data source to the ItemsSource property, first create a custom class (Model).
C#
public class Model
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
}
Step 2: Next step, define the properties to pass the data source to ItemsSource of CardView control in view model.
public class ViewModel : NotificationObject
{
public ObservableCollection<Model> CardViewItems
{
get { return cardViewItems; }
set
{
cardViewItems = value;
this.RaisePropertyChanged(nameof(CardViewItems));
}
}
public ViewModel()
{
CardViewItems = new ObservableCollection<Model>();
CardViewItems.Add(new Model() { FirstName = "John", LastName = "Paulin", Age = 23 });
CardViewItems.Add(new Model() { FirstName = "Mark", LastName = "Paulin", Age = 26 });
CardViewItems.Add(new Model() { FirstName = "Steven", LastName = "John", Age = 25 });
}
}
Step 3: In your XAML resource section, define a custom CardView style and assign it a unique key, such as “CardViewStyle”.
XAML
<Style x:Key="CardViewStyle" TargetType="{x:Type Sync_Resources:CardView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Sync_Resources:CardView}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource Office2007Blue_CardViewItem_HeaderBrush}" Height="50" Visibility="{Binding ShowHeader, Converter={StaticResource Converter}, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid x:Name="GroupPanel" AllowDrop="true" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="grouptext" Grid.Column="0" Grid.ColumnSpan="2" Foreground="Gray" HorizontalAlignment="Center" TextWrapping="WrapWithOverflow" Text="{Sync_Resources:ToolsLocalizationResource ResourceName=CardViewHeader}" VerticalAlignment="Center"/>
<ListBox x:Name="GroupBox" Background="Transparent" BorderBrush="Transparent" Grid.ColumnSpan="2" ItemsSource="{TemplateBinding GroupboxCollection}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="Black" Height="10" VerticalAlignment="Top" Visibility="{Binding CanInsert, Converter={StaticResource Converter}}" Width="4"/>
<ToggleButton Command="{Binding Sort, RelativeSource={RelativeSource AncestorType={x:Type Sync_Resources:CardView}}}" CommandParameter="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Content="{Binding Name}" HorizontalAlignment="Center" Margin="3" VerticalAlignment="Center"/>
<Border Background="Black" Height="10" VerticalAlignment="Top" Visibility="{Binding CanInsertAfterThis, Converter={StaticResource Converter}}" Width="4"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<ListBox x:Name="Group" Background="{StaticResource Office2007Blue_CardViewItem_HeaderBrush}" BorderBrush="Transparent" Grid.Column="2" ItemsSource="{TemplateBinding GroupNames}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="White" Width="1"/>
<ToggleButton x:Name="PART_Toggle" Grid.Column="1" IsTabStop="false" Margin="2" Style="{StaticResource ToggleButtonStyle1}" Width="10">
<Popup x:Name="PART_FilterPopup" AllowsTransparency="true" IsOpen="{Binding IsChecked, ElementName=PART_Toggle}" Placement="MousePoint" StaysOpen="false">
<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Sync_Resources:CheckListBox x:Name="PART_FilterBox" Background="WhiteSmoke" ItemsSource="{Binding FilterValues}" Padding="5" Tag="{Binding Name}"/>
<Button Command="{Binding ClearFilter, RelativeSource={RelativeSource AncestorType={x:Type Sync_Resources:CardView}}}" CommandParameter="{Binding DataContext, ElementName=PART_FilterBox}" Content="{Sync_Resources:ToolsLocalizationResource ResourceName=CardViewClearFilter}" HorizontalContentAlignment="Center" Grid.Row="1" Style="{StaticResource ButtonStyle1}"/>
</Grid>
</Popup>
</ToggleButton>
<Border Background="White" Grid.Column="2" Width="1"/>
<Sync_Resources:SortButton x:Name="normalSort" Command="{Binding NormalSort, RelativeSource={RelativeSource AncestorType={x:Type Sync_Resources:CardView}}}" Grid.Column="3" Content="{Binding Name}" IsTabStop="false" Margin="2" Style="{StaticResource SortButtonStyle1}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="false"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Border>
<ScrollViewer x:Name="scroll" ScrollViewer.HorizontalScrollBarVisibility="Auto" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Grid>
<ItemsPresenter x:Name="PART_Host"/>
</Grid>
</ScrollViewer>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel Width="{TemplateBinding Width}" Orientation="Horizontal">
</WrapPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="IsEnabled" TargetName="PART_Host" Value="false"/>
<Setter Property="Opacity" TargetName="PART_Host" Value="0.5"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="Visibility" TargetName="grouptext" Value="Collapsed"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" TargetName="scroll" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" TargetName="scroll" Value="Auto"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Orientation" Value="Horizontal"></Condition>
<Condition Property="IsGrouping" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" TargetName="scroll" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" TargetName="scroll" Value="Auto"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Step 4: Create a WPF application and add the CardView control to it. Apply the custom cardview style to the CardView control.
XAML
<syncfusion:CardView Style="{DynamicResource CardViewStyle}"
Orientation="Vertical"
ItemsSource="{Binding CardViewItems}"
BorderBrush="Gray"
BorderThickness="0.5"
Margin="10"
Grid.Column="0"
Name="cardView">
<syncfusion:CardView.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding FirstName}"/>
</DataTemplate>
</syncfusion:CardView.HeaderTemplate>
<syncfusion:CardView.ItemTemplate>
<DataTemplate >
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBoxItem Padding="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="First Name:" />
<TextBlock Grid.Column="1"
Text="{Binding FirstName,
UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</ListBoxItem>
<ListBoxItem Padding="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Last Name:" />
<TextBlock Grid.Column="1"
Text="{Binding LastName,
UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</ListBoxItem>
<ListBoxItem Padding="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Age:" />
<TextBlock Grid.Column="1"
Text="{Binding Age,
UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</ListBoxItem>
</ListBox>
</DataTemplate>
</syncfusion:CardView.ItemTemplate>
</syncfusion:CardView>
Output:
Figure 1 Default grouping in CardView control
Figure 2 Custom grouping in card view control using style
Conclusion
I hope you enjoyed learning about how to Group the WPF CardView Control Starting at a New Line.
You can refer to our WPF CardView’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF CardView documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WPF CardView and other WPF components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
