Articles in this section
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”

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied