1

我在一个包含 4 个选项卡的Xamarin.Forms.Shell应用程序上工作。

在主选项卡上，我有：

  • 一个NavigationBar通过一个TitleView包含一个标志
  • 一个ScrollView包含一个Image作为背景的标题
  • aScrollView包含主要内容，可以覆盖 Header 使其完全可见

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="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>

像这样，它工作正常。

但我想：

  • 默认隐藏，只有在用户开始滚动主要内容后才显示NavigationBar
  • 背景的Image标题填充了顶部屏幕的所有空间：因此StatusBar应该在此图像上以透明方式显示

我已更改XAML以隐藏NavigationBar并通过否定在屏幕顶部显示 Header Margin：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            ...
            Shell.NavBarIsVisible="True"
            x:Name="homePage">
    <!-- TitleView -->
    <Shell.TitleView >
        ...
    </Shell.TitleView>
    <ContentPage.BindingContext>
        <vm:HomeViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid RowSpacing="0"
            BackgroundColor="{StaticResource Gray-050}"
            Margin="0,-20,0,0">

=> 这在 iOS 上运行良好，但在 Android 上并不完全，因为StatusBar它不透明。

最后，为了显示NavigationBar滚动后，我使用了一个ParallaxScrollView控件来获取此视图的一些引用。

我做这样的事情：

if (y <= -60)
{
    Shell.SetNavBarIsVisible(MainPage, true);
    Shell.SetNavBarHasShadow(MainPage, true);
    Shell.SetPresentationMode(MainPage, PresentationMode.Animated);
    }
}
else
{
    Shell.SetNavBarIsVisible(MainPage, false);
    Shell.SetNavBarHasShadow(MainPage, false);
    Shell.SetPresentationMode(MainPage, PresentationMode.Animated);
}

=> 在iOS上，显示的NavigationBar很好，但是当NavigationBar再次隐藏时，标题前还有剩余的间隙。在Android上，渲染是令人满意的。

这是iOS上的渲染。

似乎无法NavigationPage为 Xamarin.Forms.Shell 应用程序的主页创建自定义。那么有没有办法实现预期的行为？

4

0 回答 0