Best way for a 3 fold toolbar layout with fullscreen background image

I am struggling with a universal toolbar layout which should have:

  • an icon in the top left corner, that is invariant to display zoom settings (lets say 1cm in square)
  • another icon at the top right corner, also invariant to display zoom settings
  • a header label filling the gap in the middle between the icons (so the height should be the same as for the icons, but the width should take, whatever the 2 icons leave empty
  • a fullscreen background image

My root layout is an AbsoluteLayout 0,0,1,1 for the fullscreen background image

For the toolbar I have so far tried AbsoluteLayout 0,0,1,1 for the 2 icons, that work well, but how to seamlessly fill the gab between with the text label?
Next, I have tried Grid with HorizontalOption=FillAndExpand; Auto, *, Auto, But it does not position the right icon correctly (not glued to the top right corner)
Therefore I tried StackLayout with HorizontalOptions="FillAndExpand" and first icon StartAndExpand, middle textlabel CenterAndExpand, but has the same issue with the not filling the full width- It would require a "CenterAndFill" option...

So, I am close to what I need, but it is still not perfect! Filling the gap between 2 icons seems to be the problem..
Can someone please give me a hint, what needs to be done in order to achieve this layout?

Best Answer

  • hermannhermann US ✭✭
    Accepted Answer

    I have found a solution for my problem-
    I an AbsoluteLayout with 0,0,1,1 and
    a StackLayout with ContentViews as (one for the left icon, one for the middle part with FillAndExpand and another ContentView for the right icon

Answers

  • Sumit_SharmaSumit_Sharma USMember ✭✭✭

    Can you share the UI?

  • hermannhermann USMember ✭✭
    Accepted Answer

    I have found a solution for my problem-
    I an AbsoluteLayout with 0,0,1,1 and
    a StackLayout with ContentViews as (one for the left icon, one for the middle part with FillAndExpand and another ContentView for the right icon

Sign In or Register to comment.