UWP：DataGrid、MenuFlyout 右键单击

Question

问题： 右键单击一行时，我正在尝试在 DataGrid 上创建一个菜单。

目标： 右键单击一行时是否可以在 DataGrid 上创建菜单；我可以在单元格上创建一个吗？

<controls:DataGridTemplateColumn Header="OrderId">
    <controls:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="Copy" Icon="Copy" Click="MenuFlyoutItem_Copy" />
                        <MenuFlyoutSeparator />
                        <MenuFlyoutItem Text="Delete" Icon="Delete" Click="MenuFlyoutItem_Delete" />
                    </MenuFlyout>
                </Grid.ContextFlyout>
                <TextBlock Text="{Binding OrderId}" />
            </Grid>
        </DataTemplate>
    </controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>

private void MenuFlyoutItem_Copy(object sender, RoutedEventArgs e)
{
    ObservableCollection<SampleOrder> dataGrid = DataGrid.ItemsSource as ObservableCollection<SampleOrder>;

    MenuFlyoutItem mfi = sender as MenuFlyoutItem;
    SampleOrder seleted = mfi.DataContext as SampleOrder;

    var copiedItem = (SampleOrder)seleted.Clone();

    dataGrid.Add(copiedItem);
}

private void MenuFlyoutItem_Delete(object sender, RoutedEventArgs e)
{
    ObservableCollection<SampleOrder> dataGrid = DataGrid.ItemsSource as ObservableCollection<SampleOrder>;

    MenuFlyoutItem mfi = sender as MenuFlyoutItem;
    SampleOrder seleted = mfi.DataContext as SampleOrder;

    dataGrid.Remove(seleted);
}

Answer 1

除非我遗漏了什么，否则这比 Nico 的回答要容易得多。您需要做的就是像这样设置RowStyle 属性：

<controls:DataGrid.RowStyle>
    <Style TargetType="controls:DataGridRow">
        <Setter Property="controls:DataGridRow.ContextFlyout">
            <Setter.Value>
                <MenuFlyout>
                    <MenuFlyoutItem x:Name="MyMenuItem"
                                    Click="MyMenuItem_Click"
                                    Text="Do Things" />
                </MenuFlyout>
            </Setter.Value>
        </Setter>
    </Style>
</controls:DataGrid.RowStyle>

然后在你的处理程序中：

private void MyMenuItem_Click(object sender, RoutedEventArgs e)
{
    var item = (sender as FrameworkElement).DataContext as MyModel;
    // Do things with your item.
}

Answer 2

如果要在行中添加MenuFlyout，则需要自定义行样式并将ContextFlyout 添加到DataGridCellsPresenter。

<localprimitives:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1"
    localprimitives:DataGridFrozenGrid.IsFrozen="True" MinHeight="32"
    AutomationProperties.AccessibilityView="Raw">
        <localprimitives:DataGridCellsPresenter.ContextFlyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Copy" Icon="Copy" Click="MenuFlyoutItem_Copy" />
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="Delete" Icon="Delete" Click="MenuFlyoutItem_Delete" />
            </MenuFlyout>
        </localprimitives:DataGridCellsPresenter.ContextFlyout>
 </localprimitives:DataGridCellsPresenter>

以下是完整的DataGridRow样式，可以直接使用

<Style TargetType="controls:DataGridRow">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:DataGridRow">
                <localprimitives:DataGridFrozenGrid x:Name="RowRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Rectangle
                        x:Name="BackgroundRectangle"
                        Grid.ColumnSpan="2"
                        Fill="{ThemeResource SystemControlTransparentBrush}"
                        />
                    <Rectangle
                        x:Name="InvalidVisualElement"
                        Grid.ColumnSpan="2"
                        Fill="{ThemeResource DataGridRowInvalidBrush}"
                        Opacity="0"
                        />

                    <localprimitives:DataGridRowHeader
                        x:Name="RowHeader"
                        Grid.RowSpan="3"
                        localprimitives:DataGridFrozenGrid.IsFrozen="True"
                        />
                    <localprimitives:DataGridCellsPresenter
                        x:Name="CellsPresenter"
                        Grid.Column="1"
                        MinHeight="32"
                        localprimitives:DataGridFrozenGrid.IsFrozen="True"
                        AutomationProperties.AccessibilityView="Raw"
                        >
                        <localprimitives:DataGridCellsPresenter.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem
                                    Click="MenuFlyoutItem_Copy"
                                    Icon="Copy"
                                    Text="Copy"
                                    />
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem
                                    Click="MenuFlyoutItem_Delete"
                                    Icon="Delete"
                                    Text="Delete"
                                    />
                            </MenuFlyout>
                        </localprimitives:DataGridCellsPresenter.ContextFlyout>
                    </localprimitives:DataGridCellsPresenter>
                    <localprimitives:DataGridDetailsPresenter
                        x:Name="DetailsPresenter"
                        Grid.Row="1"
                        Grid.Column="1"
                        AutomationProperties.AccessibilityView="Raw"
                        Background="{ThemeResource DataGridDetailsPresenterBackgroundBrush}"
                        />
                    <Rectangle
                        x:Name="BottomGridLine"
                        Grid.Row="2"
                        Grid.Column="1"
                        Height="1"
                        HorizontalAlignment="Stretch"
                        />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="NormalAlternatingRow" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource SystemListLowColor}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NormalSelected">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridRowSelectedBackgroundColor}"
                                        Duration="0"
                                        />
                                    <DoubleAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="Opacity"
                                        To="{ThemeResource DataGridRowSelectedBackgroundOpacity}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridRowSelectedHoveredBackgroundColor}"
                                        Duration="0"
                                        />
                                    <DoubleAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="Opacity"
                                        To="{ThemeResource DataGridRowSelectedHoveredBackgroundOpacity}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOverUnfocusedSelected">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridRowSelectedHoveredUnfocusedBackgroundColor}"
                                        Duration="0"
                                        />
                                    <DoubleAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="Opacity"
                                        To="{ThemeResource DataGridRowSelectedHoveredUnfocusedBackgroundOpacity}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="UnfocusedSelected">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridRowSelectedUnfocusedBackgroundColor}"
                                        Duration="0"
                                        />
                                    <DoubleAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="Opacity"
                                        To="{ThemeResource DataGridRowSelectedUnfocusedBackgroundOpacity}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid" />
                            <VisualState x:Name="Invalid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="Visibility"
                                        Duration="0"
                                        >
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation
                                        Storyboard.TargetName="InvalidVisualElement"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.4"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </localprimitives:DataGridFrozenGrid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

请注意该样式包含很多 ThemeResource 来自 windows-community-toolkit。在使用上述样式之前，您需要将MergedDictionaries 添加到您的应用资源中。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/DataGrid/DataGrid.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

更新 2

获取执行菜单的行索引的正确方法是什么

@JamesEllis，您可以在MenuFlyoutItem_Copy 或MenuFlyoutItem_Delete 事件处理程序中获取行索引。请参考以下代码。

private void MenuFlyoutItem_Copy(object sender, RoutedEventArgs e)
{
    var menu = sender as MenuFlyoutItem;
    var item = menu.DataContext as Item;
    var items = dataGrid.ItemsSource as List<Item>;
    var index = items.IndexOf(item);
}