WinUI コントロール
グリッド
コントロール > FlexGrid > グリッド

This topic discusses about various operations that require handling at the grid level.

Display Context Menu

Context menus can be helpful to the user as they provide shortcuts for actions that are frequently used. In order to show context menu, you have to initially define the context menu by creating an instance of MenuFlyout object. Menu Flyouts are an evolved version of traditional pop-up menus. It is designed to implement menus so you do not have to place your menu items into any stackpanel or column. Further, you need to use the PrepareCellForEdit event of the FlexGrid class. This event occurs when an editor cell is created and prior to it becomes active.

Refer to the クイックスタート for creating the data source. In this case, note that the Customer class is used as the data source.

Use the code below to display context menu in WinUI FlexGrid in edit mode.

MenuFlyout editMenu;
public ContextMenu()
{
    this.InitializeComponent();
    var data = Customer.GetCustomerList(100);

    // FlexGridをバインドします
    flexGrid1.ItemsSource = data;
    flexGrid1.MinColumnWidth = 85;

    // 選択モードを設定します
    flexGrid1.SelectionMode = GridSelectionMode.Cell;

    // セルの編集モードで表示されるContextMenuを定義します
    editMenu = new MenuFlyout();
    var item1 = new MenuFlyoutItem();
    var item2 = new MenuFlyoutItem();
    item1.Text = "Add Row";
    item2.Text = "Delete Row";
    item1.Click += MenuFlyoutItem_Click;
    item2.Click += MenuFlyoutItem_Click1;
    editMenu.Items.Add(item1);
    editMenu.Items.Add(item2);
}

private void MenuFlyoutItem_Click1(object sender, RoutedEventArgs e)
{
    // 選択を取得します
    var cr = flexGrid1.Selection;
    // クリックされたインデックスの行を削除します
    flexGrid1.Rows.RemoveAt(cr.Row);
}

private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // 選択を取得します
    var cr = flexGrid1.Selection;
    flexGrid1.Rows.Insert(cr.Row, new GridRow());
}

// エディタのContextFlyoutプロパティを使用して、コンテキストメニューを編集モードに設定します
private void flexGrid1_PrepareCellForEdit(object sender, GridCellEditEventArgs e)
{
    var tb = (TextBox)e.Editor;
    tb.ContextFlyout = editMenu;
}
<c1:FlexGrid Name="flexGrid1" ShowSelectionMenu="False" PrepareCellForEdit="flexGrid1_PrepareCellForEdit" HeadersVisibility="All">
      <c1:FlexGrid.ContextFlyout>
         <MenuFlyout x:Name="UnEditedMenu">
             <MenuFlyoutItem Text="Add Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem>
             <MenuFlyoutItem Text="Delete Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem>
         </MenuFlyout>
      </c1:FlexGrid.ContextFlyout>
</c1:FlexGrid>           

Keyboard Navigation

With built-in keyboard support, FlexGrid lets you perform the basic navigation operations such as moving the focus, entering or exiting the edit mode etc. with a perfect ease just by using keys. Below tables list the supported keys and their corresponding operations in non-edit as well as in edit mode of the cell.

Non-edit Mode

Key Sequence Key Action
    
 
    
Moves focus to the adjacent cell in direction indicated by the arrow key.
Shift + Arrow
Selects adjacent cells in direction indicated by the arrow key.
F2

Grid is editable: Toggles the cell to edit mode. If a value exists in the cell, it gets selected. Else, the grid simply displays a cursor in the cell.  

Grid is not editable: No action.

Enter

Grid is editable: Toggles the cell to edit mode. If a value exists in the cell, it gets selected. Else, the grid simply displays a cursor in the cell.

Grid is not editable: Moves the selection down to the next visible row.

Home
Moves focus to the first cell of row.
End
Moves focus to the last cell of row.
Ctrl + Home
Moves focus to the first cell of column.
Ctrl + End
Moves focus to the last cell of column.
Tab
By default, grid ignores the Tab key press and lets it cycle through the controls on the form.
Ctrl + C
Ctrl + X
Ctrl + V
Performs usual clipboard operations, that is, copy(Ctrl+C), cut(Ctrl+X) and paste(Ctrl+V).

Edit Mode

Key Sequence Key Action
    
    
Moves focus to the adjacent cell in the direction indicated by arrow key.
 
Moves cursor by one character in the direction indicated by arrow key. When cursor is on the first or last character, moves focus to the adjacent cell in the direction of arrow key.
Enter

Toggles the cell to non-edit mode and moves focus to the cell below.

Esc

Cancels editing and exits the edit mode.

Tab
By default, grid ignores the Tab key press and lets it cycle through the controls on the form.