0

我有一个带有 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 屏幕截图 - 所需的外观

UWP 截图

4

1 回答 1

0

如何下划线选定的选项卡和拉伸选项卡以填满屏幕？

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

<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在运行时动态查找内部元素并设置宽度。有关如何查找元素，您可以参考此线程。对于 UWP 中的类似问题和解决方案，您可以参考此线程。

于 2017-12-19T09:33:35.543 回答