Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TitleView #2586

Merged
merged 30 commits into from Jun 25, 2018

Conversation

Projects
@samhouts
Copy link
Member

samhouts commented May 2, 2018

Description of Change

TitleView, like TitleIcon, is an attached property on NavigationPage. You can set it on any Page, and when that Page is pushed onto a NavigationPage, it will respect the value of the property.

Xaml:

<?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="Xamarin.Forms.Controls.GalleryPages.TitleView">

	<NavigationPage.TitleView>
		<StackLayout>
			<Label Text="This is my TitleView" />
			<Label Text="I can be a subtitle" />
		</StackLayout>
	</NavigationPage.TitleView>
	
	<StackLayout>
		<Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
	</StackLayout>
</ContentPage>

C#:

NavigationPage.SetTitleView(this, CreateTitleView());

With TitleView, you can add any Xamarin.Forms View to the navigation bar of a NavigationPage. However, you are limited to the standard Height of the navigation bar, with the exception of Android. If you would like to increase the BarHeight of the NavigationPage on Android, you may use the new Android.AppCompat platform configuration.

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific.AppCompat;

navPage.On<Android>().SetBarHeight(450);

To give the impression of an extended navigation bar, you may also try putting some of your header content in a view at the very top of your Page's content and color match the navigation bar area. As an example, please see the NavigationBarGallery SearchBarTitlePage in this PR (7027da2).

If you want to do the extended navigation bar on iOS, you will probably want to remove the separator line and shadow that is at the bottom of the navigation bar by default. You can use the new iOS platform configuration to do that.

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

navPage.On<iOS>().SetHideNavigationBarSeparator(true);

Note: We did hope to implement BarHeight on iOS and UWP, but there are platform limitations. iOS does not support changing the height of the navigation bar at all, although Apple has indicated that if the demand is great enough, they may consider adding it as a feature in a later version. UWP's CommandBar does support changing the Height, but design guidelines prevent the entire content of the CommandBar from being shown unless the CommandBar is open. Thus, the extended content is clipped while the CommandBar is closed. UWP recommends hooking into the Opening and Closing events of the CommandBar to show and hide the content, but that is currently outside the scope of this feature. Some alternatives may be considered in the future.

As part of this enhancement, we have also enabled TitleIcon on Android FormsAppCompatActivity and UWP.

Known Issues/Limitations

  • SearchBar needs to be wrapped in a Layout with HorizontalOptions = LayoutOptions.Fill and VerticalOptions = LayoutOptions.Fill OR a specificed WidthRequest and HeightRequest to display properly on iOS.
  • TitleView is not supported on Android FormsApplicationActivity. You must use Android FormsAppCompatActivity.
  • Content may not be larger than the default size of the navigation bar on iOS/UWP. Clipping will occur.
  • Since BackTitle, Title, TitleIcon, and TitleView all occupy the same space on the navigation bar, you can expect that there will be conflicts and limited space to support all of these properties at the same time. This will vary by platform and screen size. You may find that you can better achieve your desired design by using just TitleView instead of attempting to use a combination of properties.

Screenshots

iOS 11+

Note that iOS TitleViews show is a different position depending on whether Large Titles is enabled.

iOS 10

Android

Note that Android supports BarHeight

UWP

capture

capture2

capture3

Bugs Fixed

  • Fixes #1716
  • TitleIcon now works on Android AppCompat
  • TitleIcon now works on UWP

API Changes

Added:

  • NavigationPage.On<Android>().SetBarHeight(int);
  • int NavigationPage.On<Android>().GetBarHeight();
  • NavigationPage.On<iOS>().SetHideNavigationBarSeparator(bool);
  • bool NavigationPage.On<iOS>().GetHideNavigationBarSeparator();
  • View NavigationPage.TitleView { get; set; } //bindable property

Behavioral Changes

  • UWP's ViewToRendererConverter now applies Margin

PR Checklist

  • Has tests (if omitted, state reason in description)
  • Rebased on top of the target branch at time of PR
  • Changes adhere to coding standard
  • Consolidate commits as makes sense

@samhouts samhouts added this to Ready in v3.1.0 via automation May 2, 2018

@samhouts samhouts changed the title Fix 1716 TitleView May 2, 2018

@samhouts samhouts moved this from Ready to In Review in v3.1.0 May 2, 2018

NavigationPage.TitleView="{StaticResource MyTitleView}">

<ContentPage.Resources>
<ResourceDictionary>

This comment has been minimized.

@StephaneDelcroix

StephaneDelcroix May 3, 2018

Member

packing views in RDs is not something we want to encourage. I fixed the sample in the PR description accordingly. no need to actually fix the sample

@@ -27,6 +27,8 @@ public class NavigationPage : Page, IPageContainer<Page>, INavigationPageControl

public static readonly BindableProperty TitleIconProperty = BindableProperty.CreateAttached("TitleIcon", typeof(FileImageSource), typeof(NavigationPage), default(FileImageSource));

public static readonly BindableProperty TitleViewProperty = BindableProperty.CreateAttached("TitleView", typeof(VisualElement), typeof(NavigationPage), null, propertyChanged: TitleViewPropertyChanged);

This comment has been minimized.

@StephaneDelcroix

StephaneDelcroix May 3, 2018

Member

you mean View not VisualElement, right ? or can I pack a Page in there ?

This comment has been minimized.

@samhouts

samhouts May 3, 2018

Author Member

...I had a very good reason for changing it from View to VisualElement, but I cannot for the life of me remember what it was.

@@ -125,6 +145,11 @@ public static FileImageSource GetTitleIcon(BindableObject bindable)
return (FileImageSource)bindable.GetValue(TitleIconProperty);
}

public static VisualElement GetTitleView(BindableObject bindable)

This comment has been minimized.

@StephaneDelcroix
@@ -222,6 +247,11 @@ public static void SetTitleIcon(BindableObject bindable, FileImageSource value)
bindable.SetValue(TitleIconProperty, value);
}

public static void SetTitleView(BindableObject bindable, VisualElement value)

This comment has been minimized.

@StephaneDelcroix
@@ -93,7 +93,7 @@ protected override Windows.Foundation.Size MeasureOverride(Windows.Foundation.Si
result = new Windows.Foundation.Size(request.Width, request.Height);
}

_view.Layout(new Rectangle(0, 0, result.Width, result.Height));
Layout.LayoutChildIntoBoundingRegion(_view, new Rectangle(0, 0, result.Width, result.Height));

This comment has been minimized.

@samhouts

samhouts May 3, 2018

Author Member

These two changes to ViewToRendererConverter allow the view to be sized properly when there are margins on the container. Before this, the text of the TitleView was not centered properly.

Before:

before

After:

after

@samhouts samhouts moved this from In Review to In Progress in v3.1.0 May 3, 2018

@samhouts samhouts added this to In Progress in vCurrent (3.6.0) May 4, 2018

@rmarinho rmarinho force-pushed the fix-1716 branch from d7a982b to 48acbbb May 7, 2018

@samhouts samhouts removed this from In Progress in v3.1.0 May 7, 2018

@xamarindevelopervietnam

This comment has been minimized.

Copy link

xamarindevelopervietnam commented May 9, 2018

well done @samhouts

@samhouts

This comment has been minimized.

Copy link
Member Author

samhouts commented Jun 20, 2018

Last failing UI tests are not related

@rmarinho

This comment has been minimized.

Copy link
Member

rmarinho commented Jun 25, 2018

Failing tests not related

@rmarinho rmarinho merged commit 4d5a1f5 into master Jun 25, 2018

11 of 13 checks passed

VSTS: iOS10 Validation UITests Finished
Details
VSTS: iOS11 Validation UITests Finished
Details
VSTS: Android API19 Validation Fast Renderers UITests Finished
Details
VSTS: Android API19 Validation Legacy Renderers UITests Finished
Details
VSTS: Android API23 Validation Fast Renderers UITests Finished
Details
VSTS: Android API23 Validation Legacy Renderers UITests Finished
Details
VSTS: Android API25 Validation Fast Renderers UITests Finished
Details
VSTS: Android API25 Validation Legacy Renderers UITests Finished
Details
VSTS: Xamarin Forms (PR Builds) PR-2586 - (1785481) succeeded
Details
VSTS: Xamarin Forms OSX PR-2586 - (1785578) succeeded
Details
VSTS: Xamarin Forms Windows VS2017 PR-2586 - (1785488) succeeded
Details
VSTS: iOS9 Validation UITests Finished
Details
license/cla All CLA requirements met.
Details

@samhouts samhouts added this to Done in v3.2.0 Jun 26, 2018

@b1mn

This comment has been minimized.

Copy link

b1mn commented Jul 10, 2018

@samhouts @StephaneDelcroix @rmarinho
When this feature will become available in Stable or Nightly build?

@samhouts samhouts deleted the fix-1716 branch Jul 17, 2018

@15mgm15

This comment has been minimized.

Copy link

15mgm15 commented Jul 17, 2018

@samhouts I am curious about this, can we expect a pre release soon?

@samhouts

This comment has been minimized.

Copy link
Member Author

samhouts commented Jul 17, 2018

3.2.0-pre1 is available on nuget now!

@plamenkoyovchev

This comment has been minimized.

Copy link

plamenkoyovchev commented Jul 27, 2018

Have you planned a stable release soon ?

@DamienDoumer

This comment has been minimized.

Copy link

DamienDoumer commented Jul 28, 2018

This seems not to appear on UWP. I'm using Xamarin.Forms 3.2.0.6347442 and here is a test code I'm trying to run.
`

<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal">
        <Label FontSize="Large" Text="Big Title" />
        <Entry WidthRequest="200" />
    </StackLayout>
</NavigationPage.TitleView>

<ContentPage.Content>
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage.Content>

`

But the TitleView does not show on UWP I tested it on Android and it was alright

@AArayeshi

This comment has been minimized.

Copy link

AArayeshi commented Aug 6, 2018

The binding in The TitleView not working.

@xamarindevelopervietnam

This comment has been minimized.

Copy link

xamarindevelopervietnam commented Aug 6, 2018

same problem here.

@xamarindevelopervietnam

This comment has been minimized.

Copy link

xamarindevelopervietnam commented Aug 6, 2018

gesture also is not working.

@AArayeshi

This comment has been minimized.

Copy link

AArayeshi commented Aug 6, 2018

It is not useful without binding and gesture.

@samhouts

This comment has been minimized.

Copy link
Member Author

samhouts commented Aug 6, 2018

@DamienDoumer @AArayeshi @xamarindevelopervietnam Would you mind opening issues for your respective problems with sample projects? We'll try to get them resolved ASAP! Thanks!

@AArayeshi

This comment has been minimized.

Copy link

AArayeshi commented Aug 17, 2018

@samhouts, I have opened following issue with sample project.

#3596

@IoTFier

This comment has been minimized.

Copy link

IoTFier commented Aug 22, 2018

Hi @samhouts, I am using XF 3.2.0.759530 -pre2 in my App. I added a custom Nav bar in a TabbedPage before defining TabbedPage.Children as below as below,?
<NavigationPage.TitleView>
<local:CustomNavBar />
</NavigationPage.TitleView>

What I see now is that there is a margin on both sides of my Navigation Bar (TitleView) in iOS 8 Plus. iPhone X emulator and iPhone SE emulator, But in Android on my physical device it shows only on the left side. Is it an expected bahavior? If yes, I don't like that. I need the provided Title View spread across entire breadth of the phone screen. How do I do that ?

Thanks,

@samhouts samhouts modified the milestone: 3.2.0 Sep 12, 2018

@alex-relov

This comment has been minimized.

Copy link

alex-relov commented Sep 23, 2018

Hello. I'm using XF 3.2.0.839982. I want to make a shopping cart on the right side of the navigation bar. For the android application everything works, but for ios the basket does not align to the right. My code:

<NavigationPage.TitleView>
           <StackLayout Orientation="Horizontal">
                    <Label x:Name="title" VerticalOptions="Center" />
                    <AbsoluteLayout x:Name="Cart" VerticalOptions="Center" HorizontalOptions="EndAndExpand" Margin="0,5,10,0" />
           </StackLayout>
</NavigationPage.TitleView>

2018-09-23_17-51-34
2018-09-23_17-53-43

how to solve this issue?

@AmrAlSayed0

This comment has been minimized.

Copy link

AmrAlSayed0 commented Sep 24, 2018

@alex-relov Yes, this a know issue #3679

@galadril

This comment has been minimized.

Copy link

galadril commented Oct 1, 2018

Im having issues with the Titleview on IOS, not changing the size when the title or subtitle is changed.

So the titleview:

<NavigationPage.TitleView>
     <StackLayout
        x:Name="stackLayout"
        HorizontalOptions="FillAndExpand"
        Orientation="Vertical"
        Spacing="0"
        VerticalOptions="Center">
        <Label
           x:Name="title"
           HorizontalTextAlignment="{OnPlatform Android=Start,
                                                iOS=Center}"
           LineBreakMode="NoWrap"
           VerticalOptions="Center"
           VerticalTextAlignment="Center" />
        <Label
           x:Name="subtitle"
           HorizontalOptions="{OnPlatform Android=StartAndExpand,
                                          iOS=CenterAndExpand}"
           HorizontalTextAlignment="{OnPlatform Android=Start,
                                                iOS=Center}"
           IsVisible="False"
           LineBreakMode="NoWrap"
           VerticalOptions="Center"
           VerticalTextAlignment="Center" />
     </StackLayout>
  </NavigationPage.TitleView>

when you change the title or subtitle after loading the page, it doesn't make the titleview bigger.
See screenshots:

Initial values
afbeelding

Updating the values with longer versions
afbeelding

But when i rotate the device, it's corrected:
afbeelding

This only happens for me on iOS, and it works correctly on Android.
Any ideas and/or workarounds for this problem?

@PureWeen

This comment has been minimized.

Copy link
Contributor

PureWeen commented Oct 1, 2018

@galadril That will be fixed by #3939

@galadril

This comment has been minimized.

Copy link

galadril commented Oct 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.