我想定製Xamarin MasterDetail（Xamarin跨平臺項目）

-4

只需檢查下面的圖像。我想更改圖像上標記區域的顏色。該圖片是使用開發的UWP應用程序的屏幕截圖，xamarin表單跨平臺項目（PCL）。我正在使用MasterDetail頁面導航。我想定製Xamarin MasterDetail（Xamarin跨平臺項目）

現在顏色變爲按我的第一要求。

現在我要的是屏幕的設計類似下面

現在我得到的結果如下 結果第二屏幕即，後導航到股票入門頁面

源代碼

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

如果你想完整的源代碼，請參閱我的代碼被上載谷歌驅動器：https://drive.google.com/file/d/0B2XtD2dQvEhzb1NnNGdydG91S0k/view?usp=sharing

來源

2017-06-06 JINO SHAJI

你嘗試過什麼呢？ –

是啊！我已將導航欄顏色更改爲無花果上顯示爲深藍色。 –

我的意思是關於你問的另外兩個問題，你是否嘗試過任何代碼？或者'XAML'中的任何更改都不適合你？ –

如果你想保持標題欄的顏色，通過了ap p，那麼你可以在Xamarin中的App.xaml.cs的OnLaunched裏寫下如下代碼。UWP客戶端項目。更多請參考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; 
    } 
}

如果你想自定義工具欄的背景顏色，你可以設置NavigationPage的BarBackgroundColor。你可以做下面的代碼。

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

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

}

來源

2017-06-07 09:10:36

謝謝你的努力。我很感激。但在我的情況下，漢堡按鈕不在那裏。通過點擊主區域上的項目導航到另一個詳細信息頁面後，我可以如何解決它 –

但我的第一個屏幕沒問題。但是當我導航到另一個詳細頁面時，漢堡按鈕不在那裏。 –

只需參考我的代碼在Google驅動器上升級。 https://drive.google.com/file/d/0B2XtD2dQvEhzb1NnNGdydG91S0k/view?usp=sharing –

我想定製Xamarin MasterDetail（Xamarin跨平臺項目）

回答

相關問題