Question

在我的MasterDetailPage.Detail中，我具有默认代码，我想进行一些更改，而是要有一个NavigationPage，我要有一个ContentPage，以创建一个在所有页面中显示的按钮，但是我不能调用该函数<views:ItemsPage />和<Button Text="Hello World!"/>同时出现。

默认代码如下：

<MasterDetailPage.Detail>
        <NavigationPage>
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>
</MasterDetailPage.Detail>

我想要这样的东西：

<MasterDetailPage.Detail>
        <ContentPage>
            <ContentPage.Content>
                <Button Text="Hello World!" />
                <views:ItemsPage />
            </ContentPage.Content>
        </ContentPage>
</MasterDetailPage.Detail>

MainPage.xaml.cs

public partial class MainPage : MasterDetailPage
    {
        SortedDictionary<int, Category> categorias = new SortedDictionary<int, Category>();
        Dictionary<int, NavigationPage> MenuPages = new Dictionary<int, NavigationPage>();

        private int posicao = 0;

        public MainPage()
        {
            InitializeComponent();

            MasterBehavior = MasterBehavior.Popover;

            //MenuPages.Add((int)MenuItemType.Browse, (NavigationPage)Detail);
        }

        public async Task NavigateFromMenu(int id)
        {
            if (!MenuPages.ContainsKey(id))
            {
                switch (id)
                {
                    case (int)MenuItemType.Browse:
                        MenuPages.Add(id, new NavigationPage(categorias[posicao].Page));
                        break;
                    case (int)MenuItemType.About:
                        MenuPages.Add(id, new NavigationPage(new AboutPage()));
                        break;
                }
            }

            var newPage = MenuPages[id];

            if (newPage != null && Detail != newPage)
            {
                Detail = newPage;

                if (Device.RuntimePlatform == Device.Android)
                    await Task.Delay(100);

                IsPresented = false;
            }
        }
}

ItemPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RestaurantManagerUI.Views.ItemsPage"
              Title="{Binding Title}"
             x:Name="BrowseItemsPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Clicked="AddItem_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="UWP" Value="add.png"/>
                </OnPlatform>
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

    <StackLayout>
        <ListView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"
                VerticalOptions="FillAndExpand"
                HasUnevenRows="true"
                RefreshCommand="{Binding LoadItemsCommand}"
                IsPullToRefreshEnabled="true"
                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                CachingStrategy="RecycleElement"
                ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="10">
                            <Label Text="{Binding Id}" 
                                LineBreakMode="NoWrap" 
                                Style="{DynamicResource ListItemTextStyle}" 
                                FontSize="16" />
                            <Label Text="{Binding Name}" 
                                LineBreakMode="NoWrap"
                                Style="{DynamicResource ListItemDetailTextStyle}"
                                FontSize="13" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

ItemPage.xaml.cs

public partial class ItemsPage : ContentPage
    {
        Dictionary<int, Models.Category> _categorias;

        ItemsViewModel viewModel;

        public ItemsPage()
        {
            InitializeComponent();

            BindingContext = viewModel = new ItemsViewModel();
        }

        public ItemsPage(Dictionary<int, Models.Category> categorias)
        {
            InitializeComponent();

            _categorias = categorias;

            BindingContext = viewModel = new ItemsViewModel();
        }

        async void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
        {
            var item = args.SelectedItem as Models.Category;

            if (item == null)
                return;

            var selected = _categorias.GetOrAdd(item.Id, item);
        }

        async void AddItem_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new NavigationPage(new NewItemPage()));
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            if (viewModel.Items.Count == 0)
                viewModel.LoadItemsCommand.Execute(null);
        }        
    }

    public static class DictionaryGetOrAdd
    {
        public static V GetOrAdd<K, V>(this Dictionary<K, V> dict, K key, V value)
        {
            if (!dict.ContainsKey(key)) 
                dict.Add(key, value);

            return value;
        }
}

但是在最后的代码中，我出现两个错误：“属性'Content'设置不止一次”和“属性'Content'不支持'ItemsPage'类型的值”。我该如何处理？

Answer 1

ContentPage.Content只能有一个直子，因此只需将其包装在StackLayout

中

<ContentPage>
        <ContentPage.Content>
         <StackLayout>
          <Button Text="Hello World!" />
            <views:ItemsPage />
         </StackLayout>
        </ContentPage.Content>
</ContentPage>

Answer 2

您可以先在XAML中创建详细信息页面。然后使用后面的代码添加商品页面。这是XAML代码：

<MasterDetailPage.Detail>
    <ContentPage>
        <StackLayout x:Name="ContentLayout">
            <Button Text="Hello World!"/>
        </StackLayout>
    </ContentPage>
</MasterDetailPage.Detail>

添加项目页面：

public MyMasterDetailPage()
{
    InitializeComponent();

    // ...

    var itemsPage = new ItemsPage();
    ContentLayout.Children.Add(itemsPage.Content);

    var viewModel = new ItemsViewModel();
    ContentLayout.BindingContext = viewModel;
    itemsPage.viewModel = viewModel;
    // Add some data here
    if (viewModel.Items.Count == 0)
        viewModel.LoadItemsCommand.Execute(null);
}

您需要将当前布局的绑定上下文设置为ItemsViewModel，而不是在ItemsPage的构造函数中进行设置。

创建一个按钮并在我的MasterDetailPage.Detail中调用视图

2 个答案: