第十九章：集合視圖（二十一）

一個TableView菜單

除了顯示資料或用作表單或設定對話框外，TableView也可以是菜單。 功能上，菜單是按鈕的集合，雖然它們可能看起來不像傳統的按鈕。 每個菜單項都是一個觸發程式操作的指令。

這就是TextCell和ImageCell具有Command和CommandParameter屬性的原因。 這些單元格可以觸發ViewModel中定義的指令，或者隻是ICommand類型的其他屬性。

MenuCommands程式中的XAML檔案将四個TextCell元素的Command屬性與名為MoveCommand的屬性綁定，并傳遞給名為“left”，“up”，“right”和“down”的MoveCommand參數：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MenuCommands.MenuCommandsPage"
             x:Name="page">
 
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
 
    <StackLayout>
        <TableView Intent="Menu"
                   VerticalOptions="Fill"
                   BindingContext="{x:Reference page}">
            <TableRoot>
                <TableSection Title="Move the Box">
                    <TextCell Text="Left"
                              Command="{Binding MoveCommand}"
                              CommandParameter="left" />
 
                    <TextCell Text="Up"
                              Command="{Binding MoveCommand}"
                              CommandParameter="up" />
 
                   <TextCell Text="Right"
                              Command="{Binding MoveCommand}"
                              CommandParameter="right" />
 
                    <TextCell Text="Down"
                              Command="{Binding MoveCommand}"
                              CommandParameter="down" />
                </TableSection>
            </TableRoot>
        </TableView>
 
        <AbsoluteLayout BackgroundColor="Maroon"
                        VerticalOptions="FillAndExpand">
            <BoxView x:Name="boxView"
                     Color="Blue"
                     AbsoluteLayout.LayoutFlags="All"
                     AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.2, 0.2" />
        </AbsoluteLayout>
    </StackLayout>
</ContentPage>           

但MoveCommand屬性在哪裡？ 如果檢視TableView的BindingContext，您将看到它引用了XAML檔案的根元素，這意味着可能會在代碼隐藏檔案中找到MoveCommand屬性作為屬性。

它是：

public partial class MenuCommandsPage : ContentPage
{
    int xOffset = 0; // ranges from -2 to 2
    int yOffset = 0; // ranges from -2 to 2
    public MenuCommandsPage()
    {
        // Initialize ICommand property before parsing XAML.
        MoveCommand = new Command<string>(ExecuteMove, CanExecuteMove);
        InitializeComponent();
    }
    public ICommand MoveCommand { private set; get; }
    void ExecuteMove(string direction)
    {
        switch (direction)
        {
            case "left": xOffset--; break;
            case "right": xOffset++; break;
            case "up": yOffset--; break;
            case "down": yOffset++; break;
        }
        ((Command)MoveCommand).ChangeCanExecute();
        AbsoluteLayout.SetLayoutBounds(boxView,
            new Rectangle((xOffset + 2) / 4.0,
                           (yOffset + 2) / 4.0, 0.2, 0.2));
    }
    bool CanExecuteMove(string direction)
    {
        switch (direction)
        {
            case "left": return xOffset > -2;
            case "right": return xOffset < 2;
            case "up": return yOffset > -2;
            case "down": return yOffset < 2;
        }
        return false;
    }
}           

Execute方法操縱XAML檔案中BoxView的布局邊界，使其在AbsoluteLayout周圍移動。 如果已将BoxView移動到其中一個邊緣，則CanExecute方法将禁用操作。

僅在iOS上，禁用的TextCell實際上顯示為典型的灰色，但在iOS和Android平台上，如果CanExecute方法傳回false，則TextCell不再起作用：

您還可以使用TableView作為頁面導航菜單或使用主/詳細頁面，對于這些特定的應用程式，您可能想知道ListView或TableView是否适合作業。 一般來說，如果你有一個項目集合應該以相同的方式顯示，那麼它就是ListView，或者TableView用于可能需要個别關注的較少項目。

可以肯定的是，你肯定會在前面的章節中看到更多的例子。