首页 > 解决方案 > 创建一个按钮并在我的 MasterDetailPage.Detail 中调用视图

问题描述

在我的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;
            }
        }
}

项目页面.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'类型的值”。我该如何管理?

标签: c#xamlxamarin.forms

解决方案


ContentPage.Content只能有一个直接孩子,所以只需将其全部包装在一个StackLayout

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

推荐阅读