XamarinフォームUWP電話デバイス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

画面を埋めるために選択したタブやストレッチタブを強調するためにどのように？

のために選択したタブに下線を引く、あなたは白にGrid境界線を設定し、PivotHeaderItemを選択すると下のBorderThicknessを表示（Selected状態を変更）するには、上記PivotHeaderItemスタイルを更新することができます。次のようにスタイルが更新されました：

<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を参照してください。