Category / Section
How can I hide Header in the CardView control?
1 min read
You can hide header in the CardView control by setting ShowHeader property to False.
XAML
MainWindow.xaml
<Window.DataContext> <local:ViewModel/> </Window.DataContext> <Window.Resources> <Style TargetType="{x:Type syncfusion:CardViewItem}" x:Key="CardViewItemStyle"> <Setter Property="Header" Value="{Binding Header}"/> <Setter Property="Content" Value="{Binding Description}"/> </Style> </Window.Resources> <Grid> <syncfusion:CardView ShowHeader="False" Name="Card" ItemsSource="{Binding Coll}" ItemContainerStyle="{StaticResource CardViewItemStyle}" > </syncfusion:CardView> </Grid>
C#
MainWindow.xaml.cs
Card.ShowHeader = false;
Model
public class Model { public string Header { get; set; } public string Description { get; set; } }
ViewModel
public class ViewModel { public ViewModel() { Coll = new ObservableCollection<Model>(); Coll.Add(new Model() { Header = "NewEmail",Description="Create New Item" }); Coll.Add(new Model() { Header = "NewItems",Description="Create a new item such as Meeting or contact" }); Coll.Add(new Model() { Header = "Ignore",Description="Ignore Conversation" }); Coll.Add(new Model() { Header = "Delete",Description="Delete this item"}); Coll.Add(new Model() { Header = "Forward",Description="Forward this item to someone else" }); Coll.Add(new Model() { Header = "Reply",Description="Reply to the sender of the message" }); Coll.Add(new Model() { Header = "ReplyAll",Description="Reply Sender and all of the receipients" }); } private ObservableCollection<Model> coll; public ObservableCollection<Model> Coll { get { return coll; } set { coll = value; } } }
The following screenshot displays the Header Panel before the ShowHeader property is disabled.
Figure 1: Header panel before the ShowHeader property is disabled
The following screenshot hides the Header when ShowHeader=”False”
Figure 2: Header when ShowHeader=”False”