Xamarin.Forms: is it possible to update Shell.TitleView in code-behind?

Question

I work on a Xamarin.Forms.Shell app containing 4 tabs.

On the main tab, I have:

• a TitleView containing the logo of the company
• s ScrollView containing an Image as Header
• a ScrollView containing the main content, that can cover the Header to be fully visible

The XAML looks like this:

<?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="AvilaShellAppSample.Views.HomePage"

            Shell.NavBarHasShadow="False"
            Shell.NavBarIsVisible="True"
            x:Name="homePage">
    <!-- TitleView -->
    <Shell.TitleView >
        <Grid>
            <ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.blackLogoTitle.svg"
                                            DownsampleHeight="6"
                                            HeightRequest="45"/>
        </Grid>
    </Shell.TitleView>
    <ContentPage.BindingContext>
        <vm:HomeViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid RowSpacing="0"
            BackgroundColor="{StaticResource Gray-050}"
            Margin="0,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid Grid.Row="1">
                <!--  Header ScrollView : Image  -->
                <ScrollView>
                    <ContentView x:Name="headerView"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <!--  Header Image  -->
                            <ffimageloading:CachedImage x:Name="headerImage"
                                            Grid.Row="0"
                                            Aspect="AspectFill"
                                            BackgroundColor="{DynamicResource Gray-200}"
                                            DownsampleToViewSize="true"
                                            HeightRequest="280"
                                            HorizontalOptions="FillAndExpand"
                                            VerticalOptions="Start"
                                            Source="resource://ShellAppSample.Resources.indoor.jpg">
                            </ffimageloading:CachedImage>
                        </Grid>
                    </ContentView>
                </ScrollView>

                <!--  Content ScrollView  -->
                <ScrollView>
                <ctrl:ParallaxScrollView HorizontalOptions="FillAndExpand"
                                        VerticalOptions="FillAndExpand"
                                        ParallaxHeaderView="{x:Reference headerView}"
                                        LogoHeaderView="{x:Reference logoHeaderView}"
                                        HiddenView="{x:Reference hiddenView}"
                                        MainPage="{Binding homePage}">
                    <Grid ColumnSpacing="0"
                        RowSpacing="0"
                        VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="220" /> 
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!-- Content -->
                    </Grid>
                </ctrl:ParallaxScrollView>
                </ScrollView>
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

I would like to display the header Image over the NavigationBar/StatusBar by default: so the NavigationBar would be hidden, and the StatusBar background would be the Image header. Then I would like to display the default NavigationBar/StatusBar only when the content cover the half of the Header: so the NavigationBar would be visible, and the StatusBar background would be the default background.

But I didn't found any way to access to the Shell.NavBarIsVisible property or to the Shell.TitleView in code-behind.

So I would like to know is this is possible?

Answer 1

You need to use the exposed methods in order to set the properties SetNavBarIsVisible() and SetTitleView()

Disabeling the navigation bar for a page in it code-behind:

Shell.SetNavBarIsVisible(this, false);

Setting a custom TitleView for a page in it code-behind:

Label r = new Label();
r.Text = "Hello World";
Shell.SetTitleView(this, (View)r);