如何使DataGrid看起来像一个CardView？

Question

我做了一些DataGrid Customization看起来像卡片视图，我知道有一些不同的方法来做到这一点，但对于一些其他依赖，我需要它一个数据网格，我自定义行样式如下：

  <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>

和DataGrid Xaml代码：

<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>

我得到了这个结果：

它看起来很好，但是当我选择一个没有动作的项目时，我失去了选择行为。请帮我。

Answer 1

有一段时间我在等人回答我的问题，但没有人，我会发布我的解决方法，我会接受它作为答案。

  <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>