Xamarin.Forms 操作栏 - 居中对齐的图像答案

【问题标题】：Xamarin.Forms Action Bar - Center Aligned ImageXamarin.Forms 操作栏 - 居中对齐的图像
【发布时间】：2016-08-25 17:42:25
【问题描述】：

使用 Xamarin.Forms，我如何获得与下图所示应用程序相同的效果，特别是在操作栏/页面工具栏（蓝色框中的部分）上显示居中的图像？我想在该部分有一个长宽的图像，并且该解决方案必须适用于 Android、iOS、Windows Phone 和通用 Windows（即使这意味着编写自定义渲染器或特定于平台的 xamarin 代码）。

【问题讨论】：

您需要在各自的原生项目中自定义您的操作栏/标题栏。没有跨平台解决方案。如果它只是这一页，您可以尝试隐藏导航标题栏并在其中包含所需项目的布局。

标签： xamarin.ios xamarin.android xamarin.forms

【解决方案1】：

我建议您创建自己的 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();
    }
}

【讨论】：