Ich bin bemüht, meinen Pivot-Stil zu ändern, um keinen leeren Platz in den Headern zu bekommen. HierXAML Pivot Headerless

ist ein Bild von meiner Seite:

Blau Teil ist ein Steuerkopf von template10.

Der weiße Teil ist die Höhe des leeren Raums aus dem Pivot-Header.

Grüner Teil sind eine Befehle Bars (das ist in der Pivot).

Ich kann keinen negativen Rand im Pivot verwenden, da mein Pageheader ein sekundäres Menü enthält, und dieses Ergebnis blockiert.

Ich habe einen Stil geschrieben, um die Höhe des Pivot-Headers ohne gute Ergebnisse festzulegen.

<Page.Resources> 
    <Style x:Key="PivotHeaderless" TargetType="PivotItem"> 
     <Setter Property="Margin" Value="0"/> 
     <Setter Property="Header" Value=""/> 
     <Setter Property="Height" Value="0"/> 
    </Style> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 

     <Pivot x:Name="MainPivot"> 

      <PivotItem Style="{ThemeResource PivotHeaderless}"/> 
     </Pivot> 

    </StackPanel> 
</Grid>

Jede Hilfe wird geschätzt.

Quelle

2016-08-28 Julius

fügen sie das Stichwort „Template10“ besser helfen http://stackoverflow.com/questions/tagged/template10 – Ateik

Template10 zu bekommen, ist nicht Relevant ist hier vor allem die Pivot-Control-Vorlage. –

Um dies zu erreichen, müssen Sie die Vorlage des Steuerelements selbst ändern.

Wenn Sie C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDKVERSION>\Generic\generic.xaml navigieren, werden Sie feststellen, dass die Standardvorlage von Pivot Steuerung enthält folgende Komponenten:

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch"> 
<Grid x:Name="PivotLayoutElement"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <!-- ... more code --> 
</Grid>

Die erste Zeile des gird hat die Höhe von Auto. Dies bedeutet, dass seine Höhe so eingestellt ist, dass sie den enthaltenen Inhalt aufnimmt. Aber dieser Header enthält nicht nur die Header des Drehpunkts, sondern auch zwei Steuertasten zum Blättern - Previ:

<Button x:Name="PreviousButton" 
Grid.Column="1" 
Template="{StaticResource PreviousTemplate}" 
Width="20" 
Height="36" 
... /> 
<Button x:Name="NextButton" 
Grid.Column="1" 
Template="{StaticResource PreviousTemplate}" 
Width="20" 
Height="36" 
... />

Wie Sie sehen können, ist die Höhe dieser Tasten bis 36 Pixel fest einprogrammiert ist, was bedeutet, dass keine Egal, was Sie tun, wenn Sie nichts dagegen tun, wird der Header immer mindestens 36 Pixel groß sein.

Lösung

Die einfachste Lösung ist (durch Kopieren die Style Definition aus der generic.xaml Datei zum Beispiel) und Einstellen der ersten Grid ‚s Zeilenhöhe auf 0 eine Kopie der Standardvorlage der Pivot Steuerung zu schaffen. Dies wird es effektiv verstecken und unsichtbar machen. Um es noch effektiver, können Sie alle Steuerelemente löschen, die in der ersten Reihe sind, so dass sie nicht ausgebildet sind und Sie die Leistung verbessern:

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch"> 
<Grid x:Name="PivotLayoutElement"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RenderTransform> 
     <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" /> 
    </Grid.RenderTransform>   
    <ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3"> 
     <ItemsPresenter.RenderTransform> 
      <TransformGroup> 
       <TranslateTransform x:Name="ItemsPresenterTranslateTransform" /> 
       <CompositeTransform x:Name="ItemsPresenterCompositeTransform" /> 
      </TransformGroup> 
     </ItemsPresenter.RenderTransform> 
    </ItemsPresenter> 
</Grid> 
</PivotPanel>

Quelle

2016-08-28 10:24:47

Dank MZetko fand ich die perfekte headerless Stil, können Sie verwenden, um seine Methode selbst oder, wenn Ihr den Code nur kopieren bevorzugen, hier ist es:

<Style TargetType="Pivot" x:Key="PivotHeaderless"> 
     <Setter Property="Margin" Value="0" /> 
     <Setter Property="Padding" Value="0" /> 
     <Setter Property="Background" Value="{ThemeResource PivotBackground}" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <Grid /> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Pivot"> 
        <Grid x:Name="RootElement" 
         HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalAlignment}" 
         Background="{TemplateBinding Background}"> 
         <Grid.Resources> 
          <Style x:Key="BaseContentControlStyle" TargetType="ContentControl"> 
           <Setter Property="FontFamily" Value="XamlAutoFontFamily" /> 
           <Setter Property="FontWeight" Value="SemiBold" /> 
           <Setter Property="FontSize" Value="15" /> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="ContentControl"> 
              <ContentPresenter Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               Margin="{TemplateBinding Padding}" 
               ContentTransitions="{TemplateBinding ContentTransitions}" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               OpticalMarginAlignment="TrimSideBearings" /> 
             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 

         </Grid.Resources> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="Orientation"> 
           <VisualState x:Name="Portrait"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Landscape"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 

          <VisualStateGroup x:Name="HeaderStates"> 
           <VisualState x:Name="HeaderDynamic" /> 
           <VisualState x:Name="HeaderStatic"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <ContentControl x:Name="TitleContentControl" 
          IsTabStop="False" 
          Margin="{StaticResource PivotPortraitThemePadding}" 

          Visibility="Collapsed" 
          Content="{TemplateBinding Title}" 
          ContentTemplate="{TemplateBinding TitleTemplate}" /> 
         <Grid Grid.Row="1"> 

          <ScrollViewer x:Name="ScrollViewer" 
           Margin="{TemplateBinding Padding}" 
           HorizontalSnapPointsType="MandatorySingle" 
           HorizontalSnapPointsAlignment="Center" 
           HorizontalScrollBarVisibility="Hidden" 
           VerticalScrollMode="Disabled" 
           VerticalScrollBarVisibility="Disabled" 
           VerticalSnapPointsType="None" 
           VerticalContentAlignment="Stretch" 
           ZoomMode="Disabled" 
           Template="{StaticResource ScrollViewerScrollBarlessTemplate}" 
           BringIntoViewOnFocusChange="False"> 
           <!----> 
            <PivotPanel x:Name="Panel" VerticalAlignment="Stretch"> 
             <Grid x:Name="PivotLayoutElement"> 
              <Grid.RowDefinitions> 
               <RowDefinition Height="0" /> 
               <RowDefinition Height="*" /> 
              </Grid.RowDefinitions> 
              <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="Auto" /> 
               <ColumnDefinition Width="*" /> 
               <ColumnDefinition Width="Auto" /> 
              </Grid.ColumnDefinitions> 
              <Grid.RenderTransform> 
               <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" /> 
              </Grid.RenderTransform> 
              <ContentPresenter x:Name="LeftHeaderPresenter" 
              Content="{TemplateBinding LeftHeader}" 
              ContentTemplate="{TemplateBinding LeftHeaderTemplate}" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" /> 
              <ContentControl x:Name="HeaderClipper" 
              Grid.Column="1" 
              UseSystemFocusVisuals="True" 
              HorizontalContentAlignment="Stretch"> 
               <ContentControl.Clip> 
                <RectangleGeometry x:Name="HeaderClipperGeometry" /> 
               </ContentControl.Clip> 
               <Grid Background="{ThemeResource PivotHeaderBackground}"> 
                <Grid.RenderTransform> 
                 <CompositeTransform x:Name="HeaderOffsetTranslateTransform" /> 
                </Grid.RenderTransform> 
                <PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed"> 
                 <PivotHeaderPanel.RenderTransform> 
                  <CompositeTransform x:Name="StaticHeaderTranslateTransform" /> 
                 </PivotHeaderPanel.RenderTransform> 
                </PivotHeaderPanel> 
                <PivotHeaderPanel x:Name="Header"> 
                 <PivotHeaderPanel.RenderTransform> 
                  <CompositeTransform x:Name="HeaderTranslateTransform" /> 
                 </PivotHeaderPanel.RenderTransform> 
                </PivotHeaderPanel> 
               </Grid> 
              </ContentControl> 


              <ContentPresenter x:Name="RightHeaderPresenter" 
              Grid.Column="2" 
              Content="{TemplateBinding RightHeader}" 
              ContentTemplate="{TemplateBinding RightHeaderTemplate}" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" /> 
              <ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3"> 
               <ItemsPresenter.RenderTransform> 
                <TransformGroup> 
                 <TranslateTransform x:Name="ItemsPresenterTranslateTransform" /> 
                 <CompositeTransform x:Name="ItemsPresenterCompositeTransform" /> 
                </TransformGroup> 
               </ItemsPresenter.RenderTransform> 
              </ItemsPresenter> 
             </Grid> 
            </PivotPanel> 
           </ScrollViewer> 
          </Grid> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

Quelle

2016-08-28 21:22:28 Julius

XAML Pivot Headerless

Antwort

Lösung

Verwandte Themen