我想自定义 Xamarin MasterDetail（Xamarin Crossplatform 项目）

Question

只需检查下图。我想更改图像上标记区域的颜色。该图像是使用 xamarin forms 跨平台项目 (PCL) 开发的 UWP 应用程序的屏幕截图。我正在使用 MasterDetail 页面导航。

现在根据我的第一个要求更改了颜色。

现在我想要的是如下图的画面设计

现在我得到如下结果 第二个屏幕的结果，即导航到股票输入页面后

源代码

1. MasterDetailsPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GST.Views.MasterDetailsPage"
             Title="Stock Manager"

                  MasterBehavior="SplitOnPortrait"
              BackgroundColor="#0063b1"
             xmlns:pages="clr-namespace:GST.Views;assembly=GST">

    <MasterDetailPage.Master >
        <pages:MasterDetailsPageMaster  x:Name="MasterPage" />
  </MasterDetailPage.Master>

    <MasterDetailPage.Detail>

        <NavigationPage >
      <x:Arguments>
        <pages:GST_Home  />

      </x:Arguments>
    </NavigationPage> 
  </MasterDetailPage.Detail>
</MasterDetailPage>

2。 MasterDetailsPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace GST.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterDetailsPage : MasterDetailPage
    {
        public MasterDetailsPage()
        {
            InitializeComponent();
            MasterPage.ListView.ItemSelected += ListView_ItemSelected;           
        }

        private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterDetailsPageMenuItem;
            if (item == null)
                return;



            var page = (Page)Activator.CreateInstance(item.TargetType);
            Detail.Title = item.Title;


            IsPresented = false;

             Detail.Navigation.PushAsync(page);

            MasterPage.ListView.SelectedItem = null;

        }
    }
}

3。 MasterDetailsPageDetail.xaml

     <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GST.Views.MasterDetailsPageDetail"
             BackgroundColor="{StaticResource Key=background-color}"
               Title="Master GST Title Detailed" >
  <StackLayout Padding="10">
    <Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it."/>
  </StackLayout>
</ContentPage>

4.MasterDetailsPageDetail.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace GST.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterDetailsPageDetail : ContentPage
    {
        public MasterDetailsPageDetail()
        {
            InitializeComponent();

           // NavigationPage.SetHasBackButton(this, false);
            // NavigationPage.SetHasNavigationBar(this, false);
        }
    }
}

5. MasterDetailsPageMaster.xaml

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GST.Views.MasterDetailsPageMaster"

             Title="Home">
  <StackLayout>
    <ListView x:Name="ListViewMenuItems"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
      <ListView.Header>
        <Grid BackgroundColor="#03A9F4">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="10"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
          </Grid.RowDefinitions>
          <Label
              Grid.Column="1"
              Grid.Row="2"
              Text="AppName"
              Style="{DynamicResource SubtitleStyle}"/>
        </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
              <Label VerticalOptions="FillAndExpand" 
                    VerticalTextAlignment="Center" 
                    Text="{Binding Title}" 
                    FontSize="24"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

6.MasterDetailsPageMaster.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace GST.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterDetailsPageMaster : ContentPage
    {
        public ListView ListView => ListViewMenuItems;

        public MasterDetailsPageMaster()
        {
            InitializeComponent();
            BindingContext = new ViewModels.MasterDetailsPageMasterViewModel();

        }

    }
}

7.MasterDetailsPageMenuItem.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace GST.Views
{

    public class MasterDetailsPageMenuItem
    {
        public MasterDetailsPageMenuItem()
        {
            TargetType = typeof(MasterDetailsPageDetail);
        }
        public int Id { get; set; }
        public string Title { get; set; }

        public Type TargetType { get; set; }
    }
}

8.GST_Home.xaml -- 首页短跑

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             NavigationPage.HasNavigationBar="False"
             Title="Home Dash"
             x:Class="GST.Views.GST_Home">

    <StackLayout Padding="10">
        <Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it."/>
    </StackLayout>
</ContentPage>

9.GST_Home.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;   
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace GST.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GST_Home : ContentPage
    {
        public GST_Home()
        {
            InitializeComponent();
        }
    }
}

如果你想要完整的源代码，请参考我上传到 Google 驱动器上的代码：https://drive.google.com/file/d/0B2XtD2dQvEhzb1NnNGdydG91S0k/view?usp=sharing

Answer 1

如果您希望在整个应用程序中保持标题栏的颜色，那么您可以在 Xamarin.UWP 客户端项目的 App.xaml.cs 中的 OnLaunched 中编写以下代码。更多请参考Customizing Title Bar and Status Bar in Universal Windows Platform (UWP).

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    if (titleBar != null)
    {
        titleBar.ButtonBackgroundColor = Colors.Red;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Red;
        titleBar.ForegroundColor = Colors.White;
    }
}

如果你想自定义工具栏的背景颜色，你可以设置BarBackgroundColor的NavigationPage。您可以执行类似以下代码的操作。

private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
 {
     ......   

     var nav = new NavigationPage();
     nav.PushAsync(page);
     nav.BarBackgroundColor = Color.MediumPurple;
     Detail = nav;

 }

我想自定义 Xamarin MasterDetail（Xamarin Crossplatform 项目）

I want to customize Xamarin MasterDetail (Xamarin Crossplatform project)

xamarin

xamarin.forms

uwp-xaml

master-detail