Xaml Xamarin.Forms.Shell:是否可以在Shell中使用自定义导航页面?
我在一个包含4个选项卡的Xamarin.Forms.Shell应用程序上工作 在主选项卡上,我有:Xaml Xamarin.Forms.Shell:是否可以在Shell中使用自定义导航页面?,xaml,navigationbar,custom-renderer,translucency,xamarin.forms.shell,Xaml,Navigationbar,Custom Renderer,Translucency,Xamarin.forms.shell,我在一个包含4个选项卡的Xamarin.Forms.Shell应用程序上工作 在主选项卡上,我有: 通过包含徽标的标题视图的导航栏 一个滚动视图包含一个图像作为背景的标题 一个滚动视图,包含主要内容,可以覆盖页眉使其完全可见 XAML如下所示: <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/
- 通过包含徽标的
标题视图的
导航栏
- 一个
包含一个滚动视图
作为背景的标题图像
- 一个
,包含主要内容,可以覆盖页眉使其完全可见滚动视图
<?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>
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上运行良好,但在Android上运行不太好,因为状态栏不透明。
最后,为了在滚动后显示导航栏
,我使用视差crollview
控件获取该视图的一些引用
我是这样做的:
<?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>
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上为y,导航栏
的显示效果良好,但当再次隐藏导航栏
时,标题前有剩余间隙。在Android上,渲染效果令人满意。
这是iOS上的最新版本
似乎不可能为Xamarin.Forms.Shell应用程序的主页取消创建自定义的导航页面。那么有没有办法实现预期的行为?