Xamarin表单UWP电话设备TabbedPage - 如何为选定的选项卡加下划线并拉伸选项卡以填充屏幕？

问题描述 投票：0回答：1

我有一个跨平台的Xamarin Forms应用程序，包含PCL，Android，iOS和UWP项目。在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

xamarin.forms uwp xamarin.uwp pivotitem tabbedpage
1个回答
0
投票

如何为选定的标签加下划线并拉伸标签以填充屏幕？

对于下划线选定的选项卡，您可以更新上面的PivotHeaderItem样式以将Grid边框设置为白色，并在选择BorderThickness时显示底部PivotHeaderItem（更改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。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.