UWP: DataGrid, MenuFlyout щелкните правой кнопкой мыши

Проблема: я пытаюсь создать меню в 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);
}

1 ответ

Если я что-то упустил, это намного проще, чем ответ Нико. Все, что вам нужно сделать, это установить 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.
}

Если вы хотите добавить 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>
Другие вопросы по тегам