c# - 如何在 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 有一定的经验，非常感谢任何帮助。

标签： c#formsxamlxamarinxamarin.forms

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();