2016-08-24 60 views
0

使用Xamarin.Forms,我如何獲得與下圖所示應用程序相同的效果,特別是在動作欄/頁面工具欄上顯示居中圖像(藍色部分框)? 我想在該部分有一個長寬的圖像,該解決方案必須適用於Android,iOS,Windows Phone和Universal Windows(即使它意味着編寫自定義渲染器或平臺特定的xamarin代碼)。Xamarin.Forms Action Bar - 中心對齊圖像

enter image description here

+2

。沒有跨平臺解決方案。如果它只是這一頁,您可以嘗試隱藏導航標題欄並在其中包含所需項目的佈局。 –

回答

0

我建議你創建你自己的看法Xamarin.Forms和處理自己的導航類似於這樣:你需要自定義動作條/標題欄在各自然項目

public class CustomBackNavigationBar : StackLayout 
{ 
    public Image BackIcon; 
    public Image Icon; 
    public Label IconTitle; 
    public StackLayout IconContainer; 

    public CustomBackNavigationBar(string title, string icon) 
    { 
     Padding = new Thickness(15,5); 
     HeightRequest = 40; 
     Orientation = StackOrientation.Horizontal; 
     VerticalOptions = LayoutOptions.Start; 
     BackgroundColor = StaticData.BlueColor; 
     Spacing = 15; 

     BackIcon = new Image 
     { 
      Source = StaticData.BackIcon, 
      HorizontalOptions = LayoutOptions.Start 
     }; 

     Label Title = new Label 
     { 
      Text = title, 
      TextColor = Color.White, 
      FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label)), 
      FontAttributes = FontAttributes.Bold, 
      VerticalTextAlignment = TextAlignment.Center 
     }; 

     Icon = new Image 
     { 
      Source = icon 
     }; 

     IconTitle = new Label 
     { 
      Text = StaticData.CallAgent, 
      TextColor = Color.White, 
      FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)), 
     }; 

     IconContainer = new StackLayout 
     { 
      HorizontalOptions = LayoutOptions.EndAndExpand, 
      Spacing = 2, 
      Children = { Icon, IconTitle } 
     }; 

     Children.Add(BackIcon); 
     Children.Add(Title); 
     Children.Add(IconContainer); 

     #region Events 

     BackIcon.GestureRecognizers.Clear(); 
     BackIcon.GestureRecognizers.Add(new TapGestureRecognizer 
     { 
      Command = new Command(PopAsync) 
     }); 

     #endregion 

    } 

    async void PopAsync() 
    { 
     await App.AppNavigation.PopAsync(); 
    } 
}