How to customize the appearance of WPF CardViewItems?
By default, Items of WPF CardView will be displayed in Rectangle shape but this shape can be modified using Template of the CardViewItem. The following code example demonstrates how to display CardViewItems in circle shape.
CardViewItem Style:
<Style x:Key="RoundCardViewItemStyle" TargetType="{x:Type syncfusion:CardViewItem}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:CardViewItem}">
<Border CornerRadius="50" BorderBrush="#FF6593CF" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="headerBackground" Grid.Row="0" HorizontalAlignment="Center" CornerRadius="10"
VerticalAlignment="Center" Margin="10">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE3EFFF" Offset="0"/>
<GradientStop Color="#FFC4DDFF" Offset="0.4"/>
<GradientStop Color="#FFADD1FF" Offset="0.4"/>
<GradientStop Color="#FFC0DBFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="PART_HeaderPresenter" HorizontalAlignment="Center" VerticalAlignment="Top" ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type syncfusion:CardView}}}" Content="{TemplateBinding Header}" Margin="2,5"/>
</Border>
<ContentPresenter x:Name="PART_ContentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type syncfusion:CardView}}}" Content="{TemplateBinding Content}" ContentSource="Content" Grid.Row="1"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="headerBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFFEE4" Offset="0"/>
<GradientStop Color="#FFFFE8A7" Offset="0.4"/>
<GradientStop Color="#FFFFD767" Offset="0.4"/>
<GradientStop Color="#FFFFE69E" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="headerBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF3C799" Offset="0.011"/>
<GradientStop Color="#FFFCD3A7" Offset="0.013"/>
<GradientStop Color="#FFFAA85B" Offset="0.371"/>
<GradientStop Color="#FFF98E2A" Offset="0.373"/>
<GradientStop Color="#FFFCDF94" Offset="0.939"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml:
<syncfusion:CardView ItemsSource="{Binding CardViewcollections}" ItemContainerStyle="{StaticResource RoundCardViewItemStyle}"
Name="Card" >
<syncfusion:CardView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
</StackPanel>
</DataTemplate>
</syncfusion:CardView.ItemTemplate>
<syncfusion:CardView.HeaderTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Header}"/>
</StackPanel>
</DataTemplate>
</syncfusion:CardView.HeaderTemplate>
<syncfusion:CardView.ItemsPanel>
<ItemsPanelTemplate>
<syncfusion:CardViewPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</syncfusion:CardView.ItemsPanel>
</syncfusion:CardView>
Model.cs
public class Model
{
//Properties
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string header;
public string Header
{
get { return header; }
set { header = value; }
}
}
ViewModel.cs :
public class ViewModel
{
private ObservableCollection<Model> collection;
public ObservableCollection<Model> CardViewcollections
{
get { return collection; }
set { collection = value; }
}
public ViewModel()
{
CardViewcollections = new ObservableCollection<Model>();
PopulateItems();
}
public void PopulateItems()
{
for (int i = 0; i <= 5; i++)
{
collection.Add(new Model() { Name = "Item" + i, Header = "Header" + i });
}
}
}
Screenshot:
Sample Link:
Conclusion
I hope you enjoyed learning about how to customize the appearance of CardViewItems.
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!
