Xamarin.forms: TitleView #2586 : ContentView assigned to TitleView doesn't stretch out across the width/height of the phonescreen

[IoTFier]

Description

Attn : @samhouts
I am using XF 3.2 Pre2 to display my custom navigation bar (CNB) in a TabbedPage by assigning the new property TitleView provided in the Navigation Page.

Steps to Reproduce

1. Create a Content View xaml - "CNB.xaml". Add a simple Grid with two labels on two rows

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="com.CNB"
             NavigationPage.HasNavigationBar="False">
  <ContentView.Content>
      <StackLayout>
            <Grid BackgroundColor="White"
                  HorizontalOptions="StartAndExpand"
                  VerticalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" 
                       BackgroundColor="{DynamicResource BarItemSelectedBackgroundColor}"
                       TextColor="{DynamicResource BarItemSelectedTextColor}">Hello</Label>
                <Label Grid.Row="1">Hello2</Label>
            </Grid>
        </StackLayout>
    </ContentView.Content>        
</ContentView>

1. Create a Content Page and assign to the NavigationPage.TitleView property in xaml as shown below after closing of the Content Page opening tab

    <!-- Custom Navigation Bar -->
    <NavigationPage.TitleView>
        <{your namespace alias}:CNB />
    </NavigationPage.TitleView> 

3.

Expected Behavior

My custom navigation bar to be stretched across the width of the screen

Actual Behavior

Rendering of my CNB doesn't map out to match / align with the left and right edges of the phonescreen - rather I see a margin of around 10-15 points on both ends in iOS; and in Android I see a Margin of 10-15 points on the left. See the attached screenshot.

Basic Information

• Version with issue:
• Last known good version:
• IDE: VS 15.8.1
• Platform Target Frameworks:
  
  
  
  • iOS: 11.4
  
  
  • Android: 8.0
  
  
  • UWP: n/a
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:
  iPhone and Android

Screenshots

Reproduction Link

[IoTFier]

Hi @pauldipietro, is there any update from the Triage?
Thanks

[pauldipietro]

@IoTFier This issue was automatically added to the Triage project upon creation, which is why you see my doing so above. You will see its state change on that board as it is triaged, depending on if the issue can be confirmed or if more information is needed.

[hartez]

@IoTFier Looks like we're missing part of your markup - there's an unmatched StackLayout tag. Can you post the complete markup?

[IoTFier]

[IoTFier]

Hi @hartez , are you able to reproduce the problem on your end ?

[IoTFier]

Hi @hartez , @pauldipietro , any update on this issue?

[rmarinho]

Hi @IoTFier we have identified that it's true that there's some default margins , but those are platform related, safe values that the platform provides for us to lay our TItleView and it's content.

We talked internally and we will be considering adding a enhancement to TitleView to allow in some fashion to override those margins given by each platform and allowing users drawing from edge to edge, we do also know in advance this is a high effort task.

[IoTFier]

Hi @rmarinho - any considerations to fix this issue on all platform in XF 3.4.x ??

Thanks

[jameslavery]

I'd be keen to see this fixed. With this bug, the TitleView is not usable - the gaps result in an unacceptable appearance.

[ValonK]

Any news on this? Cant use the TitleView with this issue

[jameslavery]

Just noticed that this is labelled as an _Enhancement_. I beg to differ. It's unusable in its current state, and I think should be marked as a _Bug_.

[ederbond]

I agree with @jameslavery, this should be thead as a Bug rather than an Enhancement.
TitleView with these default margins that we can't override is completely useless.
Any news on this @pauldipietro @davidortinau @rmarinho ?

Look what wird TitleView I had:

<?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="Mobile.Views.Main.MainPage"
             xmlns:views="clr-namespace:Mobile.Views;assembly=Mobile"
             xmlns:master="clr-namespace:Mobile.Views.Master;assembly=Mobile"
             xmlns:svg="clr-namespace:Mobile.Controls.Svg;assembly=Mobile"
             xmlns:controls="clr-namespace:Mobile.Controls;assembly=Mobile"
             Title="{Binding Title}">
  <!--ControlTemplate="{StaticResource MasterPageTemplate}"-->

  <NavigationPage.TitleView>
    <!--<master:TitleBar/>-->
    <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource PrimaryDarkColor}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                 Spacing="10" >

      <svg:Icon Path="Images.ai-icon-outlined.svg" HeightRequest="40" WidthRequest="40" Margin="10,0,0,0" VerticalOptions="Start" HorizontalOptions="Start"
                controls:TappedGestureAttached.Command="{x:Static views:GlobalCommands.PageBackCommand}" AutomationId="{x:Static views:MainAutomationIds.Logo}"/>

      <Label Text="XX.Mobile" TextColor="{StaticResource LightColor}" FontSize="{StaticResource XLargeFont}" FontAttributes="Bold" />

    </StackLayout>
  </NavigationPage.TitleView>

  <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Spacing="{StaticResource XLargeSpaceValue}">
    <Label Text="AI Mobile" AutomationId="{x:Static views:MainAutomationIds.MenuLabel}" />

    <Button Text="Start AIMobile" Command="{Binding StartAiMobileCommand}" AutomationId="{x:Static views:MainAutomationIds.StartButton}" />
    <Button Text="Prototypes" Command="{Binding NavigateToPrototypePageCommand}" AutomationId="{x:Static views:MainAutomationIds.PrototypeButton}" BackgroundColor="{StaticResource SecondaryColor}" />

    <StackLayout Orientation="Horizontal" Spacing="{StaticResource XLargeSpaceValue}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="{StaticResource SecondaryColor}" Padding="10">
      <Label Text="Create Test Data Locally" TextColor="{StaticResource LightColor}" />
      <Switch IsToggled="{Binding UseOnlyLocalData.Value}" OnColor="{StaticResource PrimaryLightColor}" AutomationId="{x:Static views:MainAutomationIds.LocalDataButton}" />
    </StackLayout>

    <Button Text="Remove All Assignment Data" Command="{Binding RemoveAllLocalAssignmentsCommand}" BackgroundColor="{StaticResource SecondaryColor}" AutomationId="{x:Static views:MainAutomationIds.RemoveAllAssignment}" />
    <Button Text="View Logs" Command="{Binding ViewLogsCommand}" BackgroundColor="{StaticResource SecondaryLightColor}" />

  </StackLayout>

</ContentPage>

[IoTFier]

Hi @hartez , @pauldipietro , @davidortinau any thoughts / update on this issue?

[toussam]

Hi @samhouts, @rmarinho, @hartez, @pauldipietro, @PureWeen,

I agree with the others: The TitleView is currently not providing a "natural display" with these default margins.

Even though this task may ask you a lot of effort, it will be worth it ! Indeed, customized ToolBar became quite common in today's applications. Not allowing the developers to do so could be seen as a negative thing for our technology.

We all thank you for your work and time !!
Best regards,

[samhouts]

Hi team! While we continue to consider this an enhancement for the reasons outlined in https://github.com/xamarin/Xamarin.Forms/issues/3644#issuecomment-417054539, it doesn't mean that we don't consider it important. This is work that we'll need to complete here as well as in Shell. Thank you for the feedback!

[nickerwalk]

A workaround for android that I'm using for this is to set the app:contentInsetLeft="0dp"
This is in my Toolbar.axml in the Android project.

Answer found here: https://stackoverflow.com/questions/27354812/android-remove-left-margin-from-actionbars-custom-layout

[jameslavery]

@nickerwalk Yes that's potentially a good workaround for android. Unfortunately my customer's main platform is iOS!

[toussam]

@nickerwalk : for me, this solution is a not good workaround. Here is why !

I am pushing (PushModalAsync) a NavigationPage into the navigation so I could open a page as a modal and that will display a Toolbar.

If I do set the contentInsetStart (contentInsetLeft one is not changing anything), all my previous pages displaying a Toolbar just fine would now display their title at the very beginning.

Still, thank you for sharing a solution that may work for others !!
Best regards,

[SagarPanwala]

A workaround for android that I'm using for this is to set the app:contentInsetLeft="0dp"
This is in my Toolbar.axml in the Android project.

Answer found here: https://stackoverflow.com/questions/27354812/android-remove-left-margin-from-actionbars-custom-layout

What about removing top and bottom margin of TitleView in Android ? Left margin is remove by the work around.

[IoTFier]

@samhouts - does XF 4.0 has the GA version of the titleView as you mentioned above in ref to #3644 ?

Thank you.

[samhouts]

@IoTFier Unfortunately, this is still an open enhancement for both Shell and NavigationPages. Thanks!

[TingtingAn]

I am using _toolbar.SetContentInsetsAbsolute(0, 0); for Android and it is working now. Any idea for iOS? Thanks!

[jrahma]

it is a bug.

I have the same problem with ContentPage on Android

<?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.AdDetails"
    Title="Ad Details">
    <NavigationPage.TitleView>
        <StackLayout BackgroundColor="{DynamicResource NavBarBackColor}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Image Source="back.png" Margin="10" WidthRequest="35" HeightRequest="35" HorizontalOptions="Start" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ImageTitleBarCloseTapped" NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
            </Image>

            <Label Text="Ad Details" TextColor="{DynamicResource NavBarTextColor}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalOptions="Center" />

            <Image Source="back.png" Margin="10" WidthRequest="35" HeightRequest="35" HorizontalOptions="End" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ImageTitleBarCloseTapped" NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>
    </NavigationPage.TitleView>

[Miksier]

Any news about this? Does anybody have some custom renderer fix? Waiting another year is not a great solution