我一直在寻找一种在Xamarin Forms中自定义TabbedView的解决方案，以便可以在UWP的底部制作选项卡。在iOS和Android中，它排在最后，但对于UWP，则不起作用。我试图为UWP版本编写一个自定义渲染，以使其在屏幕底部。
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabRenderer))]
namespace TabbedPageWithNavigationPage.UWP.Renders
{
class CustomTabRenderer : TabbedPageRenderer
{
public CustomTabRenderer()
{
this.ElementChanged += CustomTabRenderer_ElementChanged;
}
private void CustomTabRenderer_ElementChanged(object sender, VisualElementChangedEventArgs e)
{
Control.HeaderTemplate = GetStyledTitleTemplate();
}
private Windows.UI.Xaml.DataTemplate GetStyledTitleTemplate()
{
string dataTemplateXaml = @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
<TextBlock
Text=""{Binding Title}""
FontFamily=""/Assets/Fonts/museosans-500.ttf#museosans-500""
FontSize =""25"" />
</DataTemplate>";
return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(dataTemplateXaml);
}
}
}
在研究中，我发现了与此相关的帖子，并发现了一些样式应用于Pivot以在底部制作选项卡。我正在努力通过自定义渲染类来应用它。您能帮我解决这个问题吗？
非常感谢您的考虑。
您需要自定义控件FormsPivot样式，以使标题显示在底部。请参考以下代码：
在您的UWP项目App.xaml中添加以下ControlTemplate：
命名空间（xmlns：uwp =“ using：Xamarin.Forms.Platform.UWP”）
<ControlTemplate TargetType="uwp:FormsPivot" x:Key="FormsPivotTemplate">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="NavigationButtonsVisibility">
<VisualState x:Name="NavigationButtonsHidden" />
<VisualState x:Name="NavigationButtonsVisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NextButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="NextButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PreviousButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="PreviousButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStates">
<VisualState x:Name="HeaderDynamic" />
<VisualState x:Name="HeaderStatic">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="StaticHeader">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="TopCommandBarArea" HorizontalAlignment="Stretch" Background="{TemplateBinding ToolbarBackground}">
<uwp:FormsCommandBar x:Name="CommandBar" Background="{TemplateBinding ToolbarBackground}" MinHeight="{ThemeResource TitleBarHeight}">
<uwp:FormsCommandBar.Content>
<Border x:Name="TitleArea" Visibility="{TemplateBinding TitleVisibility}" Height="{ThemeResource TitleBarHeight}">
<TextBlock Text="{TemplateBinding Title}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" />
</Border>
</uwp:FormsCommandBar.Content>
</uwp:FormsCommandBar>
</Border>
<Grid Grid.Row="1">
<Grid.Resources>
<ControlTemplate x:Key="NextTemplate" TargetType="Button">
<Border x:Name="Root" BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}" BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<FontIcon x:Name="Arrow" Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
<ControlTemplate x:Key="PreviousTemplate" TargetType="Button">
<Border x:Name="Root" BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}" BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<FontIcon x:Name="Arrow" Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Grid.Resources>
<ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="False" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="PivotLayoutElementTranslateTransform"/>
</Grid.RenderTransform>
<ContentPresenter x:Name="LeftHeaderPresenter"
ContentTemplate="{TemplateBinding LeftHeaderTemplate}"
Content="{TemplateBinding LeftHeader}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<ContentControl x:Name="HeaderClipper"
Grid.Column="1"
Grid.Row="1"
HorizontalContentAlignment="Stretch"
UseSystemFocusVisuals="True">
<ContentControl.Clip>
<RectangleGeometry x:Name="HeaderClipperGeometry"/>
</ContentControl.Clip>
<Grid Background="Transparent">
<PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed"/>
<PivotHeaderPanel x:Name="Header">
<PivotHeaderPanel.RenderTransform>
<TransformGroup>
<CompositeTransform x:Name="HeaderTranslateTransform"/>
<CompositeTransform x:Name="HeaderOffsetTranslateTransform"/>
</TransformGroup>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
</Grid>
</ContentControl>
<Button x:Name="PreviousButton"
Background="Transparent"
Grid.Column="1"
HorizontalAlignment="Left"
Height="36" IsTabStop="False"
Grid.Row="1"
IsEnabled="False"
Margin="{ThemeResource PivotNavButtonMargin}"
Opacity="0"
Template="{StaticResource PreviousTemplate}"
UseSystemFocusVisuals="False"
VerticalAlignment="Top"
Width="20"/>
<Button x:Name="NextButton"
Background="Transparent"
Grid.Column="1"
HorizontalAlignment="Right"
Height="36"
IsTabStop="False"
IsEnabled="False"
Margin="{ThemeResource PivotNavButtonMargin}"
Opacity="0"
Grid.Row="1"
Template="{StaticResource NextTemplate}"
UseSystemFocusVisuals="False"
VerticalAlignment="Top"
Width="20"/>
<ContentPresenter x:Name="RightHeaderPresenter"
ContentTemplate="{TemplateBinding RightHeaderTemplate}"
Content="{TemplateBinding RightHeader}"
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<ItemsPresenter x:Name="PivotItemPresenter"
Grid.ColumnSpan="3"
Grid.Row="0">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
<CompositeTransform x:Name="ItemsPresenterCompositeTransform"/>
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Grid>
</PivotPanel>
</ScrollViewer>
</Grid>
<Border x:Name="BottomCommandBarArea" Grid.Row="2" HorizontalAlignment="Stretch"></Border>
</Grid>
</ControlTemplate>
谢谢您在自定义渲染器中可以ControlTemplate按以下方式应用它：
class CustomTabRenderer : TabbedPageRenderer
{
public CustomTabRenderer()
{
this.ElementChanged += CustomTabRenderer_ElementChanged;
}
private void CustomTabRenderer_ElementChanged(object sender, VisualElementChangedEventArgs e)
{
if (Control != null)
{
Control.HeaderTemplate = GetStyledTitleTemplate();
Control.Template = (ControlTemplate)Application.Current.Resources["FormsPivotTemplate"];
}
}
private Windows.UI.Xaml.DataTemplate GetStyledTitleTemplate()
{
string dataTemplateXaml = @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
<TextBlock
Text=""{Binding Title}""
FontFamily=""/Assets/Fonts/museosans-500.ttf#museosans-500""
FontSize =""25"" />
</DataTemplate>";
return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(dataTemplateXaml);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句