How to make DataGrid looks like a CardView?

Question

I made some DataGrid Customization to be looks like a Cards View, i know there is some different ways to do this but for some other dependencies i need it a datagrid, i customized the Row Style as below:

  <Style x:Key="CardStyle" TargetType="{x:Type DataGridRow}">
                <Setter Property="BorderBrush" Value="Gray" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Margin" Value="2.5" />
                <Setter Property="Background" Value="White" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridRow}">
                            <Border x:Name="DGR_Border"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    SnapsToDevicePixels="True">
                                <SelectiveScrollingGrid>
                                    <SelectiveScrollingGrid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </SelectiveScrollingGrid.ColumnDefinitions>
                                    <SelectiveScrollingGrid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </SelectiveScrollingGrid.RowDefinitions>
<!-- Replacment of DataGridCellsPresenter -->                                        
<ContentControl
                                            Grid.Column="1"
                                            Content="{Binding}"
                                            ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource AncestorType=DataGrid}}"
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                        </ContentControl>
                                        <DataGridDetailsPresenter Grid.Column="1"
                                                  Grid.Row="1"
                                                  SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                                  Visibility="{TemplateBinding DetailsVisibility}" />
                                        <DataGridRowHeader Grid.RowSpan="2"
                                           SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                           Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                    </SelectiveScrollingGrid>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver"
                             Value="True">
                                        <Setter TargetName="DGR_Border"
                                Property="Background"
                                Value="LightGray" />
                                    </Trigger>
                                    <Trigger Property="IsSelected"
                             Value="True">
                                        <Setter TargetName="DGR_Border"
                                Property="Background"
                                Value="Gray" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="Red" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="ItemsControl.AlternationIndex" Value="1" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="LightGray" />
                        </MultiTrigger>
                    </Style.Triggers>
                </Style>

and the DataGrid Xaml Code:

<DataGrid         HeadersVisibility="None"
                      SelectionUnit="FullRow"
                      RowStyle="{StaticResource CardStyle}"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <DataGrid.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding}"  HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
            </DataTemplate>
        </DataGrid.ItemTemplate>
        <DataGrid.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </DataGrid.ItemsPanel>
    </DataGrid>

I got this result:

Its looks like good, but i lost the Selection Behavior, when select an item no action. please help me.

Answer 1

For a while I was waiting for someone to answer my question but no one, i will post my workaround and i will accept it as an answer.

  <Style x:Key="CardsRowStyle" TargetType="{x:Type DataGridRow}">
    <Setter Property="Margin" Value="2.5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="DGR_Border"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    SnapsToDevicePixels="True">
                    <DataGridDetailsPresenter Grid.Column="1"
                                              Grid.Row="1"
                                              Content="{Binding}"
                                              ContentTemplate="{Binding CardTemplate,RelativeSource={RelativeSource AncestorType=local:ItemsView}}"
                                              SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <!--  IsSelected  -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <!--<Condition Binding="{Binding Path=(DataGridRowHelper.SelectionUnit), RelativeSource={RelativeSource Self}}" Value="FullRow" />-->
                <Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource MetroDataGrid.HighlightBrush}" />
            <Setter Property="BorderBrush" Value="{DynamicResource MetroDataGrid.HighlightBrush}" />
            <Setter Property="Foreground" Value="{DynamicResource MetroDataGrid.HighlightTextBrush}" />
        </MultiDataTrigger>

        <!--  IsSelected and Selector.IsSelectionActive  -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(DataGridRowHelper.SelectionUnit), RelativeSource={RelativeSource Self}}" Value="FullRow" />
                <Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
                <Condition Binding="{Binding Path=(Selector.IsSelectionActive), RelativeSource={RelativeSource Self}}" Value="false" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource MetroDataGrid.InactiveSelectionHighlightBrush}" />
            <Setter Property="BorderBrush" Value="{DynamicResource MetroDataGrid.InactiveSelectionHighlightBrush}" />
            <Setter Property="Foreground" Value="{DynamicResource MetroDataGrid.InactiveSelectionHighlightTextBrush}" />
        </MultiDataTrigger>

        <!--  IsMouseOver  -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(DataGridRowHelper.SelectionUnit), RelativeSource={RelativeSource Self}}" Value="FullRow" />
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource MetroDataGrid.MouseOverHighlightBrush}" />
            <Setter Property="BorderBrush" Value="{DynamicResource MetroDataGrid.MouseOverHighlightBrush}" />
        </MultiDataTrigger>

        <!--  IsEnabled  -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(DataGridRowHelper.SelectionUnit), RelativeSource={RelativeSource Self}}" Value="FullRow" />
                <Condition Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="false" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
        </MultiDataTrigger>

        <!--  IsEnabled and IsSelected  -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(DataGridRowHelper.SelectionUnit), RelativeSource={RelativeSource Self}}" Value="FullRow" />
                <Condition Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="false" />
                <Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource MetroDataGrid.DisabledHighlightBrush}" />
            <Setter Property="BorderBrush" Value="{DynamicResource MetroDataGrid.DisabledHighlightBrush}" />
            <Setter Property="Foreground" Value="{DynamicResource MetroDataGrid.HighlightTextBrush}" />
        </MultiDataTrigger>
    </Style.Triggers>
</Style>