如何在Xamarin Forms的Master-Detail详细信息页面下添加网格视图? [英] How to add a grid view under Master-Detail detail page in Xamarin Forms?

问题描述

我正在尝试在屏幕底部添加一个网格视图，其中包含有关在媒体播放器中播放的媒体的当前播放"信息.问题是无论页面可见什么，我都希望该视图存在.

主布局是导航菜单面板的主从-细节"页面，其中细节页面应包含所有内容.

详细信息页面可以是内容页面，导航页面(大部分)或模式内容页面.但是，如果我可能只选择一个，那么我会选择它作为导航页面.

所以，我只想做像这样的事情:

 < MasterDetailPage.Detail>< ContentPage><网格>< Grid.RowDefinitions>< RowDefinition Height ="auto"/>< RowDefinition Height ="*"/>< RowDefinition Height ="auto"/></Grid.RowDefinitions>< Page x:Name ="viewPort" Grid.Row ="0"><！-此页面源是从后面的代码中动态设置的...--></Page>< Grid Grid.Row ="2"><！-这里应该是我的网格结构的其余部分...--></Grid></Grid></ContentPage></MasterDetailPage.Detail> 

但是不可能将页面包装在另一个视图/页面中，我还尝试了修改主从页面控件模板，以在详细页面的底部添加该网格并在其上方显示任何页面，但是找不到运气原始模板，甚至为主从布局设置模板...

我是Xamarin的新手，但是对c#和xaml有一定的经验，对您的帮助非常感谢.

解决方案

您可以将 ContentPresenter 与控制模板一起使用.

在App.xaml> Application.Resources> ResourceDictionary中创建一个控件模板.

 <！-网格模板->< ControlTemplate x:Key ="GridTemplate"><网格>< Grid.RowDefinitions><行定义/><行定义/></Grid.RowDefinitions>< ContentPresenter Grid.Row ="0"/><标签Grid.Row ="1"BackgroundColor ="Accent"Text =网格模板"/></Grid></ControlTemplate> 

然后在详细信息页面中使用它.

  ControlTemplate ="{StaticResource GridTemplate}" 

我已将该项目上传到GitHub上供您参考.

I'm trying to add a grid view at the bottom of the screen containing 'Current Playing' information about a media being played in a media player. The problem is that I want this view to be there no matter what is the page visible.

The main layout is a Master-Detail page for the navigation menu panel, where the detail page should contain everything.

The detail page can be a content page, a navigation page (mostly) or a modal content page. However, if I might only choose one, I would choose it to be a navigation page.

So, simply I want to do something like this:

<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>

But wrapping a page inside another view/page is not possible, I tried also modifying the Master-Detail page control template to add that grid at the bottom of the detail page and display whatever page above it, but no luck in finding the original template or even setting a template for Master-Detail layout...

I'm new to Xamarin but somewhat experienced with c# and xaml, any help is really appreciated.

解决方案

You could use ContentPresenter with control template.

Create a control template in 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> 

And then use it in detail page.

ControlTemplate="{StaticResource GridTemplate}"

I have uploaded the project on GitHub for your reference. https://github.com/WendyZang/Test/tree/master/ControlTemplate_ContentPresenter/MasterDetailPageDemo

Updated:

For data binding of control template, you could use TemplateBinding.

Create a AppViewModel:

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

    public AppViewModel()
    {

    }
}

App.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>

Set the binding in each page which use the control template.

  this.BindingContext = new AppViewModel();

这篇关于如何在Xamarin Forms的Master-Detail详细信息页面下添加网格视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！