0

I am using Xamarin.Forms 4.0 with a shell having a flyout at the left. I am trying to display an Image at the center of Shell.TitleView, however, I have no idea how to achieve this correctly. And the result is like what is suggest in the official page that the Image is not really at the center (but a bit at the right-hand side). This is probably because of the hamburger menu icon at the left, maybe(?)

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration#display-views-in-the-navigation-bar

I have tried to calculate the width of the hamburger menu icon after the view has been rendered and compensate at the margin of the Image, but since there is no page loaded event, at this moment I can only hard code a delay in the constructor of the ContentPage. But this is considered to be quite dirty and there will be a problem when there is an icon on the right-hand side.

public SomeContentPage()
{
    InitializeComponent();
    Device.StartTimer(new System.TimeSpan(0, 0, 0, 0, 500), () =>
            {
                var titleViewBound = Shell.GetTitleView(this).Bounds;
                DisplayInfo displayInfo = DeviceDisplay.MainDisplayInfo;
                double leftButtonWidth = displayInfo.Width / displayInfo.Density - titleViewBound.Width;
                TitleImage.Margin = new Thickness(0, 0, leftButtonWidth, 0);
                return false;
            });
}

I expect there will be some better way to center an image in the TitleView no matter there is a hamburger menu icon or other icons at the right-hand side. Thanks in advance!

---Added sample for reference ---

I have white labelled the app and put it on Github for everyone reference. Thanks! Sample for reference: https://github.com/ltin071/XFShellFlyoutSample

The TitleImage is not at the center until pressing the adjust button underneath (which do the calculation mentioned above). I hope that I have missed some standard way to achieve that.

Samuel Leung
  • 85
  • 2
  • 11
  • You have probably tried Horizontal and Vertical options but have you used it with expand!? – FreakyAli Jun 26 '19 at 09:39
  • @G.hakim Thanks for your help, I have just tried adding CenterAndExpand for Horizontal and Vertical option but that seems doesn't help. I have white labelled my project and put it on GitHub, please feel free to review the code. Thanks a lot! https://github.com/ltin071/XFShellFlyoutSample – Samuel Leung Jun 27 '19 at 02:44
  • have you try to define the position of the image in the titleview using absolute layout? – Leo Zhu Jul 03 '19 at 06:08
  • @LeoZhu-MSFT Thanks for the suggestion, I haven't try that, but I believe the problem will be the TitleView's position when we have a hamburger menu icon at the left and some arbitrary amount of ToolBarItems at the right. Using AbsoluteLayout inside the moving TitleView will probably not helping the situation I have. But I will let you know the result after I have tried that. Thanks! – Samuel Leung Jul 03 '19 at 09:02
  • I believe it is related to https://github.com/xamarin/Xamarin.Forms/issues/4848 – Samuel Leung Jul 03 '19 at 09:34

0 Answers0