2017-01-29 27 views
0

如何在MasterDetailView的標題欄中放置視圖? 我想盡可能使用xaml。xamarin.forms如何在標題欄中顯示視圖

我有一個MasterDetailView顯示主頁面和詳細信息頁面。 詳細信息頁面隨即顯示各個用戶操作更改的內容頁面。

我想要一個靜態標題視圖,我可以向用戶顯示各種統計信息。

enter image description here

我MasterDetailView.xaml

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"    
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
        x:Class="MyApp.Views.MasterDetailView" 
        IsGestureEnabled="True" 
        MasterBehavior="Popover" 
        Title="Master Detail View"> 
    <MasterDetailPage.Master> 
    </MasterDetailPage.Master> 
    <MasterDetailPage.Detail> 
    </MasterDetailPage.Detail> 
</MasterDetailPage> 

我MasterView.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="MyApp.Views.MasterView" 
      Title="Master View"> 
    <ContentPage.Content> 
    <StackLayout Orientation="Vertical"> 
     <Label Text="{Binding Item1}"/> 
     <Button Text="MasterView Options" Command="{Binding Option1Command}"/> 
    </StackLayout > 
    </ContentPage.Content> 
</ContentPage> 

我DetailView.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" 
      xmlns:views="clr-namespace:MyApp.Views" 
      x:Class="MyApp.Views.DetailView" 
      Title="Detail View"> 
    <ContentPage.ToolbarItems> 
    <ToolbarItem Text="Detail View Options" Icon="options_dots.png" Order="Primary" 
       Command="{Binding OptionsCommand}" /> 
    </ContentPage.ToolbarItems>  
    <ContentPage.Content> 
    </ContentPage.Content>  
</ContentPage> 

我TitleBarVie w.xaml

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:views="clr-namespace:MyApp.Views" 
      x:Class="MyApp.Views.TitleBarView"> 
    <ContentView.Content> 
    <StackLayout Orientation="Horizontal"> 
     <Label Text="{Binding Item1}"/> 
     <Button Text="TitleBar Options" Command="{Binding OptionsCommand}"/> 
    </StackLayout> 
    </ContentView.Content> 
</ContentView> 

我Page1View.xaml

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:views="clr-namespace:MyApp.Views" 
      x:Class="MyApp.Views.Page1View"> 
    <ContentView.Content> 
    <StackLayout Orientation="Vertical"> 
     <Label Text="{Binding Info}"/> 
     <Button Text="Go To Page 2" Command="{Binding GoToPage2Command}"/> 
    </StackLayout > 
    </ContentView.Content> 
</ContentView> 

我Page2View.xaml

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:views="clr-namespace:MyApp.Views" 
      x:Class="MyApp.Views.Page2View"> 
    <ContentView.Content> 
    <StackLayout Orientation="Vertical"> 
     <Label Text="{Binding Info}"/> 
     <Button Text="Go To Page 1" Command="{Binding GoToPage1Command}"/> 
     <Button Text="Show Popup" Command="{Binding ShowPopupCommand}"/> 
    </StackLayout > 
    </ContentView.Content> 
</ContentView> 

我控制導航throgh導航控制器

public NavigationController() 
{ 
    masterDetailView = new MasterDetailView(); 
    masterDetailViewModel = new MasterDetailViewModel(); 
    masterDetailView.BindingContext = masterDetailViewModel; 

    masterView = new MasterView(); 
    masterViewModel = new MasterViewModel(); 
    masterView.BindingContext = masterViewModel; 

    detailView = new DetailView(); 
    detailViewModel = new DetailViewModel(); 
    detailView.BindingContext = detailViewModel; 

    titleBar = new TitleBarView(); 
    titleBarVM = new TitleBarViewModel(); 
    titleBar.BindingContext = titleBarVM; 

    page1View = new Page1View(); 
    page1ViewModel = new Page1ViewModel(); 
    page1View.BindingContext = page1ViewModel; 

    page2View = new Page2View(); 
    page2ViewModel = new Page2ViewModel(); 
    page2View.BindingContext = page2ViewModel; 

    detailView.Content = new StackLayout() 
    { 
     Children = { page1View } 
    }; 

    currentView = page1View; 

    masterDetailView.Master = masterView; 
    masterDetailView.MasterBehavior = MasterBehavior.Popover; 
    masterDetailView.Detail = new NavigationPage(detailView); 
} 

public void GoToPage1() 
{ 
    if (currentView != page1View) 
    { 
     StackLayout sl = (StackLayout)detailView.Content; 
     sl.Children.Clear(); 
     sl.Children.Add(page1View); 
    } 
} 

public void GoToPage2() 
{ 
    if (currentView != page2View) 
    { 
     StackLayout sl = (StackLayout)detailView.Content; 
     sl.Children.Clear(); 
     sl.Children.Add(page2View); 
    } 
} 

回答

0

你可以」將標題視圖設置爲框w沒有擴展XF和編寫自定義渲染器,但是您可以將圖像設置爲頁面標題(如果頁面包含在NavigationPage中,則使用NavigationPage.TitleIconProperty

var page = new Page1View(); 
NavigationPage.SetIconTitle(page, "foo.png"); 
相關問題