Category / Section
How can I hide Header in the CardView control?
2 mins read
You can hide the header in the CardView control by setting the 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 shows the hidden Header when ShowHeader=”False”
Figure 2: Header when ShowHeader=”False”
