Xamarin Forms UWP Phone Device TabbedPage - 如何下划线选定的选项卡和拉伸选项卡以填满屏幕？

Question

我有一个带有 PCL、Android、iOS 和 UWP 项目的跨平台 Xamarin Forms 应用程序。在 UWP 项目中，我正在尝试将选项卡式页面的样式设置为所选选项卡带有下划线的位置，就像在 Android 项目中一样，并且无论手机大小如何，选项卡都会占用屏幕上的空间。在 UWP App.xaml 中，我能够修改“PivotHeaderItem”样式以更改选项卡的颜色和宽度，但宽度当前是硬编码的，因此选项卡仅在 5" 模拟器和选项卡没有下划线。下面是我的代码和屏幕截图。提前致谢！

<!--11/28/17 | Style below removes extra unneeded padding on TabbedPage Children Pages-->
<Style TargetType="PivotItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="PivotItem">
            <Grid Background="{TemplateBinding Background}" 
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                      VerticalAlignment="{TemplateBinding 
VerticalAlignment}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="Pivot">
                        <VisualState x:Name="Right"/>
                        <VisualState x:Name="Left"/>
                        <VisualState x:Name="Center"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter HorizontalAlignment="{TemplateBinding 
HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding 
VerticalContentAlignment}" 
                                ContentTemplate="{TemplateBinding 
ContentTemplate}" 
                                Content="{TemplateBinding Content}" Margin="
{TemplateBinding Padding}"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

<!--11/28/17 | Style below changes the Background/Foreground of TabbedPage 
Tabs-->
<Style TargetType="PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource 
PivotHeaderItemFontSize}"/>
<Setter Property="FontFamily" Value="{ThemeResource 
PivotHeaderItemFontFamily}"/>
<Setter Property="FontWeight" Value="{ThemeResource 
PivotHeaderItemThemeFontWeight}"/>
<Setter Property="CharacterSpacing" Value="{ThemeResource 
PivotHeaderItemCharacterSpacing}"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
 <!--original value {ThemeResource SystemControlForegroundBaseMediumBrush}--
> 
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}"/>
<Setter Property="Height" Value="48"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="PivotHeaderItem">
            <Grid x:Name="Grid" Background="#2196F3" Width="180">
                <!-- original value {TemplateBinding Background}-->
                <Grid.Resources>
                    <Style x:Key="BaseContentPresenterStyle" 
TargetType="ContentPresenter">
                        <Setter Property="FontFamily" Value="Segoe UI"/>
                        <Setter Property="FontWeight" Value="SemiBold"/>
                        <Setter Property="FontSize" Value="15"/>
                        <Setter Property="TextWrapping" Value="Wrap"/>
                        <Setter Property="LineStackingStrategy" 
Value="MaxHeight"/>
                        <Setter Property="TextLineBounds" Value="Full"/>
                        <Setter Property="OpticalMarginAlignment" 
Value="TrimSideBearings"/>
                    </Style>
                    <Style x:Key="BodyContentPresenterStyle" 
TargetType="ContentPresenter" 
BasedOn="{StaticResource BaseContentPresenterStyle}">
                        <Setter Property="FontFamily" Value="{ThemeResource 
PivotHeaderItemFontFamily}"/>
                        <Setter Property="FontWeight" Value="{ThemeResource 
PivotHeaderItemThemeFontWeight}"/>
                        <Setter Property="FontSize" Value="{ThemeResource 
PivotHeaderItemFontSize}"/>
                    </Style>
                </Grid.Resources>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition From="Unselected" 
To="UnselectedLocked" GeneratedDuration="0:0:0.33"/>
                            <VisualTransition From="UnselectedLocked" 
To="Unselected" GeneratedDuration="0:0:0.33"/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="#2196F3"/> <!--| {ThemeResource 
SystemControlDisabledBaseMediumLowBrush} |-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unselected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="White"/> <!--original value {ThemeResource 
SystemControlHighlightAltBaseHighBrush}-->
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="#2196F3"/> <!--| #1769aa #C7CECA |-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="UnselectedLocked">
                            <Storyboard>
                                <DoubleAnimation 
Storyboard.TargetName="ContentPresenterTranslateTransform" 
Storyboard.TargetProperty="X" Duration="0" To="{ThemeResource 
PivotHeaderItemLockedTranslation}"/>
                                <DoubleAnimation 
Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="
(UIElement.Opacity)" Duration="0" To="0"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="White"/> <!--original value {ThemeResource 
SystemControlHighlightAltBaseHighBrush}-->
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="#2196F3"/> <!--| #C7CECA |-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="UnselectedPointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedPointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="UnselectedPressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="White"/> <!--| {ThemeResource 
SystemControlHighlightAltBaseMediumHighBrush} |-->
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="#2196F3"/> <!--|#1769aa {ThemeResource 
SystemControlHighlightTransparentBrush} |-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedPressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="ContentPresenter" 
Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="White"/> <!--| {ThemeResource 
SystemControlHighlightAltBaseMediumHighBrush} |-->
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames 
Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" 
Value="#2196F3"/> <!--| {ThemeResource 
SystemControlHighlightTransparentBrush} |-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter x:Name="ContentPresenter" Content="
{TemplateBinding Content}" ContentTemplate="{TemplateBinding 
ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="
{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" 
FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="
{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="
{TemplateBinding VerticalContentAlignment}">
                    <ContentPresenter.RenderTransform>
                        <TranslateTransform 
x:Name="ContentPresenterTranslateTransform"/>
                    </ContentPresenter.RenderTransform>
                </ContentPresenter>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Android Screenshot - Desired Look

UWP Screenshot

Answer 1

如何给选中的标签加下划线和拉伸标签以填满屏幕？

对于选中的选项卡下划线，您可以更新上面的PivotHeaderItem 样式以将Grid 边框设置为白色并在PivotHeaderItem 选中时显示底部BorderThickness（更改Selected 状态）。更新样式如下：

<Style TargetType="PivotHeaderItem">
       ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                <!-- Here set the Grid Border Brush to white -->
                    <Grid
                        x:Name="Grid"
                        HorizontalAlignment="Stretch"
                        Background="#2196F3"
                        BorderBrush="White">
                        <Grid.Resources>
                            <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                <Setter Property="FontFamily" Value="Segoe UI" />
                                <Setter Property="FontWeight" Value="SemiBold" />
                                <Setter Property="FontSize" Value="15" />
                                <Setter Property="TextWrapping" Value="Wrap" />
                                <Setter Property="LineStackingStrategy" Value="MaxHeight" />
                                <Setter Property="TextLineBounds" Value="Full" />
                                <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
                            </Style>
                            <Style
                                x:Key="BodyContentPresenterStyle"
                                BasedOn="{StaticResource BaseContentPresenterStyle}"
                                TargetType="ContentPresenter">
                                <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                                <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
                                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
                            </Style>
                        </Grid.Resources>

                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            FontFamily="{TemplateBinding FontFamily}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}">
                            <ContentPresenter.RenderTransform>
                                <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <VisualStateManager.VisualStateGroups>
                           ...

                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                            <!--
                                                original value {ThemeResource
                                                SystemControlHighlightAltBaseHighBrush}
                                            -->
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#2196F3" />
                                            <!--  | #C7CECA |  -->
                                        </ObjectAnimationUsingKeyFrames>

                                        <!-- Here set the Grid bottom Border thickness -->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="BorderThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" /> 
                                        </ObjectAnimationUsingKeyFrames> 
                                    </Storyboard>
                                </VisualState>

                               ...
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

对于拉伸标签填充屏幕，似乎无法直接设置内部样式。您可能需要动态查找内部 PivotHeaderItem 元素并在运行时设置宽度。关于如何查找元素，您可以参考this thread。对于 UWP 中的类似问题和解决方法，您可以参考this thread。