如何在 Xamarin Forms 的 Master-Detail 詳細信息頁面下添加網格視圖？

Question

我正在嘗試在屏幕底部添加一個網格視圖，其中包含有關媒體播放器中正在播放的媒體的“當前播放”信息。 問題是，無論頁面可見，我都希望此視圖存在。

主布局是導航菜單面板的主從頁面，其中詳細頁面應包含所有內容。

詳情頁可以是內容頁、導航頁（大部分）或模態內容頁。 但是，如果我只能選擇一個，我會選擇它作為導航頁面。

所以，只要我想做的事情是這樣的：

<MasterDetailPage.Detail>
        <ContentPage>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Page x:Name="viewPort" Grid.Row="0">
                    <!--This page source is dynamically set from the code behind...-->
                </Page>

                <Grid Grid.Row="2">
                    <!--Here should be the rest of my grid structure...-->
                </Grid>
            </Grid>
        </ContentPage>
</MasterDetailPage.Detail>

但是將一個頁面包裝在另一個視圖/頁面中是不可能的，我還嘗試修改 Master-Detail 頁面控件模板以在詳細信息頁面底部添加該網格並顯示其上方的任何頁面，但沒有找到原始模板甚至為 Master-Detail 布局設置模板...

我是 Xamarin 的新手，但對 c# 和 xaml 有點經驗，非常感謝任何幫助。

Answer 1

您可以將ContentPresenter與控件模板一起使用。

在 App.xaml>Application.Resources>ResourceDictionary 中創建控件模板。

  <!--  Grid Template -->
        <ControlTemplate x:Key="GridTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <ContentPresenter Grid.Row="0" />
                <Label
                    Grid.Row="1"
                    BackgroundColor="Accent"
                    Text="Grid Template" />
            </Grid>
        </ControlTemplate> 

然后在詳細頁面中使用它。

ControlTemplate="{StaticResource GridTemplate}"

我已將項目上傳到 GitHub 上供您參考。 https://github.com/WendyZang/Test/tree/master/ControlTemplate_ContentPresenter/MasterDetailPageDemo

更新：

對於控件模板的數據綁定，您可以使用TemplateBinding 。

創建一個 AppViewModel：

 public class AppViewModel
{
    public string Name { get; set; } = "Name_A";

    public AppViewModel()
    {

    }
}

應用程序.xml：

   <ControlTemplate x:Key="GridTemplate">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <ContentPresenter Grid.Row="0"  />
                <Label Grid.Row="1" BackgroundColor="Accent" Text="{TemplateBinding BindingContext.Name}" />

            </Grid>
        </ControlTemplate>

在使用控件模板的每個頁面中設置綁定。

  this.BindingContext = new AppViewModel();