Lesson 3 - Creating a Card View

• Aug 25, 2022
• 3 minutes to read

Step 1 - Creating a new View and adding a RibbonControl

The ContactCollectionCardView is created in the same way that you created the ContactCollectionTableView in the previous lesson. Right-click the project in the Solution Explorer and select Add DevExpress Item | New Item, to invoke the DevExpress Template Gallery. Select the View (Blank User Control) template, and specify the name as ContactCollectionCardView.

Assign the ViewModel.

XAML

<UserControl x:Class="PersonalOrganizer.Views.ContactCollectionCardView"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:ViewModels="clr-namespace:PersonalOrganizer.ViewModels"
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModels:ContactCollectionViewModel}}" ...>
    ...
</UserControl>

Add a RibbonControl (as you did in ContactCollectionTableView) and define the following BarButtonItems within it: Refresh, Find and Delete.

XAML

<dxb:BarButtonItem x:Name="barButtonItem1" Content="Refresh" RibbonStyle="SmallWithText" 
Glyph="{dx:DXImage Image=Refresh_16x16.png}" LargeGlyph="{dx:DXImage Image=Refresh_32x32.png}" />

<dxb:BarButtonItem x:Name="barButtonItem2" Content="Find" RibbonStyle="SmallWithText" 
Glyph="{dx:DXImage Image=Find_16x16.png}" LargeGlyph="{dx:DXImage Image=Find_32x32.png}"/>

<dxb:BarButtonItem x:Name="barButtonItem3" Content="Delete" 
Glyph="{dx:DXImage Image=Delete_16x16.png}" LargeGlyph="{dx:DXImage Image=Delete_32x32.png}"/>

Step 2 - Adding a GridControl with Cards

Add a GridControl with a CardView to the form using the Instant Layout Assistant, bind the ItemsSource and SelectedItem properties, generate columns, and set the AutoGenerateColumns property to None.

Remove the unnecessary columns and change the column order by drag-and-drop.

Next, customize the Photo column and set the initial sort order.

XAML

<dxg:GridColumn FieldName="Photo" IsSmart="True" VisibleIndex="0">
    <dxg:GridColumn.EditSettings>
        <dxe:ImageEditSettings Stretch="UniformToFill"/>
    </dxg:GridColumn.EditSettings>
    <dxg:GridColumn.CellStyle>
        <Style TargetType="dxg:CellContentPresenter">
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="150"/>
        </Style>
    </dxg:GridColumn.CellStyle>
</dxg:GridColumn>
<dxg:GridColumn FieldName="FirstName" IsSmart="True" VisibleIndex="1" SortIndex="0"/>
<dxg:GridColumn FieldName="LastName" IsSmart="True" VisibleIndex="2" SortIndex="1"/>
<dxg:GridColumn FieldName="Email" IsSmart="True" VisibleIndex="3"/>
<dxg:GridColumn FieldName="Phone" IsSmart="True" VisibleIndex="4"/>

Bind the grid’s DataControlBase.ShowLoadingPanel property to IsLoading, so the Loading Panel is shown only while waiting for the callback response.

Customize the CardView element in the following manner.

XAML

<dxg:GridControl ItemsSource="{Binding Entities}" SelectedItem="{Binding SelectedEntity}" ShowLoadingPanel="{Binding IsLoading}">
    <dxg:CardView ShowGroupPanel="False" SeparatorThickness="0" CardAlignment="Center" CardMargin="30,20,30,20" MaxCardCountInRow="1">
        <dxg:CardView.CardHeaderTemplate>
            <DataTemplate>
               <TextBlock>
                   <Run Text="{Binding Data.FirstName}"/> <Run Text="{Binding Data.LastName}"/>
                </TextBlock>
            </DataTemplate>
        </dxg:CardView.CardHeaderTemplate>
    </dxg:CardView>
</dxg:GridControl>

Add the created View to the MainWindow and run the application to see the results.

Step 3 - Implementing Interaction

The process for implementing interaction is the same as for the ContactCollectionTableView. The code below binds the Refresh, Find, and Delete bar items and adds two EventToCommands, to enable data saving and row updating. It also adds the DXMessageBoxService to the View.

XAML

<UserControl x:Class="PersonalOrganizer.Views.ContactCollectionCardView" ...
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModels:ContactCollectionViewModel}}">
    <dxmvvm:Interaction.Behaviors>
        <dx:DXMessageBoxService/>
    </dxmvvm:Interaction.Behaviors>
    ...
      <dxr:RibbonControl ...>
        ...
            <dxb:BarButtonItem Content="Refresh" Command="{Binding RefreshCommand}" .../>
            <dxb:BarButtonItem Content="Find" Command="{Binding GridViewCommands.ShowSearchPanel, ElementName=cardView}" CommandParameter="True" .../>
            <dxb:BarButtonItem Content="Delete" Command="{Binding DeleteCommand}" CommandParameter="{Binding SelectedEntity}" .../>
        ...
      </dxr:RibbonControl>
      ...
        <dxg:GridControl ItemsSource="{Binding Entities}" SelectedItem="{Binding SelectedEntity}" ...>
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:EventToCommand SourceName="cardView" EventName="CellValueChanged" Command="{Binding UpdateSelectedEntityCommand}"/>
                <dxmvvm:EventToCommand SourceName="cardView" EventName="RowUpdated" Command="{Binding SaveCommand}" CommandParameter="{Binding SelectedEntity}"/>
            </dxmvvm:Interaction.Behaviors>
            ...
            <dxg:GridControl.View>
                <dxg:CardView x:Name="cardView" ...>
                  ...
                </dxg:CardView>
            </dxg:GridControl.View>
        </dxg:GridControl>
    ...
</UserControl>