2013-10-02 14 views
5

Ich habe ein seltsames Problem mit dem Styling meines Pivot-Steuerelements. Ich habe eine Kopie der Standardvorlage in Expression Blend bearbeitet, weil ich die gesamte Kopfzeile entfernen möchte.Windows Phone 8: Pivot-Header entfernen

Der adaptierte Stil:

<Style x:Key="PivotWithoutHeader" TargetType="phone:Pivot"> 
     <Setter Property="Margin" Value="0"/> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <Grid/> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="phone:Pivot"> 
        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/> 
         <!--<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>--> 
         <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/> 
         <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Und die Nutzung meines Stils:

<phone:Pivot Grid.Row="1" x:Name="Objects" ItemsSource="{Binding Profiles}" 
           Style="{StaticResource PivotWithoutHeader}"> 
         <phone:Pivot.ItemContainerStyle> 
          <Style TargetType="phone:PivotItem"> 
           <Setter Property="HorizontalAlignment" Value="Stretch" /> 
          </Style> 
         </phone:Pivot.ItemContainerStyle> 
         <phone:Pivot.ItemTemplate> 
          <DataTemplate> 
           <Grid> 
            <Image Source="Resources/homer.png"/> 
            <TextBlock Text="{Binding Name}"/> 
            <TextBlock Text="#Sample" /> 
            <Button Margin="347,0,0,0" Command="{Binding DataContext.SettingsCommand, ElementName=Objects}" CommandParameter="{Binding .}" /> 
           </Grid> 
          </DataTemplate> 
         </phone:Pivot.ItemTemplate> 
        </phone:Pivot> 

Mein Gedanke war einfach zu entfernen oder die Sichtbarkeit von <Primitives:PivotHeadersControl> zu kollabierten gesetzt, aber dann meine Anwendung abstürzt, ohne dass Ausnahme und folgende Meldung in meinem Ausgabefenster: "Das Programm '[2332] TaskHost.exe' wurde mit dem Code -1073741819 (0xc0000005) 'Zugriffsverletzung' beendet.

Ich lese einige Posts, um den Pivot nach oben zu bewegen, so dass die Kopfzeile aus dem Bildschirm ist, aber ich brauche meine benutzerdefinierte Pivot am unteren Rand meiner Seite mit einigen anderen Steuerelementen darüber.

Hat jemand eine Idee, wie man den Header entfernt?

EDIT: Aus Gründen der Klarheit möchte ich Titel und Header entfernen.

+1

Haben Sie herausfinden, wie dies zu tun? – halileohalilei

+0

Irgendeine Art von. Bitte sehen Sie sich die markierte Antwort an. – Danscho

Antwort

1

So den Header zu entfernen, und der Titel nicht mehr funktioniert auf Windows Phone 8. So portiert ich eine bestehende Steuerung von: http://www.codeproject.com/Articles/136786/Creating-an-Animated-ContentControl auf Windows Phone 8.

+0

Ich habe eine universelle App und das hat funktioniert http://StackOverflow.com/A/19148612/169714 nur nicht gab mir meine Speicherplatz –

+0

+1 für richtig darüber funktioniert es nicht, habe die Kontrolle nicht getestet. – koenmetsu

2

Die Vorlage des Pivot-Steuerelements wurde in WP8 geändert und erfordert jetzt, dass PivotHeadersControl in der Vorlage vorhanden sein muss. (Sie könnten es in WP7.x entfernen)
Haben Sie einfach eine Nullhöhe oder anderen "leeren" Inhalt in Ihrer Kopfzeile.

Ich bin mir nicht bewusst, dass dies öffentlich dokumentiert wurde, da die meisten Leute, die auf WP8 aufgerüstet haben, das Shim zu der alten Version des Steuerelements verwenden. Allerdings notierte ich dies am Ende eines Blog-Artikels unter http://blog.mrlacey.co.uk/2013/01/pivot-and-panorama-have-moved-and.html

+0

Danke matt für den Link. Ich möchte den Titel UND die Überschrift entfernen. Irgendwelche Vorschläge dafür? Ich habe bereits versucht, die Deckkraft und die Höhe einzustellen (der Titel ist immer noch hier, aber überlagert durch den Inhalt des Pivot-Elements). – Danscho

8

Sie können den PivotItem-Header auf dem Pivot-Steuerelement durch Ersetzen der Pivot.HeaderTemplate -Eigenschaft durch eine leere DataTemplate entfernen. Wenn Sie versuchen, den Titel und nicht die Kopfzeile zu entfernen, möchte ich auch die Lösung kennen. ^^

<phone:Pivot ItemsSource="{Binding Data}" ItemTemplate="{StaticResource CustomPivotItemTemplate}"> 
    <phone:Pivot.HeaderTemplate> 
     <DataTemplate/> 
    </phone:Pivot.HeaderTemplate> 
</phone:Pivot> 
+0

Ja Ich möchte den Titel und die Überschrift entfernen. Entschuldigung, meine Frage war nicht klar. – Danscho

+0

Ersetzen HeaderTemplate mit leeren DataTemplate sollte Header und Titel entfernen – PompolutZ

0

dBlisse Lösung für mich gearbeitet um die Header-Vorlage zu verstecken, aber für den Titel habe ich mit Margen gespielt und der folgende Trick funktionierte für mich, nicht sicher, ob das eine gute Idee ist, aber auf verschiedene Auflösungen geprüft und gut aussieht.

Hinweis der Margin="0,-39,0,0" für Stapelplatte unter:

<phone:Pivot Background="Transparent" Margin="-12,0"> 
    <phone:Pivot.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Margin="0,-39,0,0"> 
        YOUR CONTROLS HERE 
      </StackPanel> 
     </DataTemplate> 
    </phone:Pivot.ItemTemplate> 
    <phone:Pivot.HeaderTemplate> 
     <DataTemplate/> 
    </phone:Pivot.HeaderTemplate> 
</phone:Pivot> 
3

Versuchen Sie dieses:

<UserControl.Resources> 
    <ResourceDictionary> 
     <Thickness x:Key="PivotPortraitThemePadding">0,0,0,0</Thickness> 
     <Thickness x:Key="PivotLandscapeThemePadding">0,0,0,0</Thickness> 
     <Style x:Key="PivotWithoutHeaderStyle" TargetType="Pivot"> 
      <Setter Property="Margin" Value="0"/> 
      <Setter Property="Padding" Value="0"/> 
      <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <Grid/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Pivot"> 
         <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="Orientation"> 
            <VisualState x:Name="Portrait"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Landscape"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}" Height="0"/> 
          <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="0" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled"> 
           <PivotPanel x:Name="Panel" VerticalAlignment="Stretch"> 
            <PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}" Height="0" Margin="0" Visibility="Collapsed"> 
             <PivotHeaderPanel.RenderTransform> 
              <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/> 
             </PivotHeaderPanel.RenderTransform> 
            </PivotHeaderPanel> 
            <ItemsPresenter x:Name="PivotItemPresenter"> 
             <ItemsPresenter.RenderTransform> 
              <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/> 
             </ItemsPresenter.RenderTransform> 
            </ItemsPresenter> 
           </PivotPanel> 
          </ScrollViewer> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ResourceDictionary> 
</UserControl.Resources> 

...

<Pivot Style="{StaticResource PivotWithoutHeaderStyle}"> 

...

+0

Dies funktioniert perfekt auf einer Windows Phone 8.1-Lösung. Ich glaube, mit einer leeren Datenvorlage für Header kann dies auch für Universal-Apps verwendet werden. Vielen Dank! –

0

ich endlich gemustert es raus! (Ich baue eine Universal Windows 10 App und hatte die gleiche Frage.)

einen leeren Header auf Ihren Pivot-Steuerelemente hinzufügen Als dBlisse vorgeschlagen:

<Pivot ItemsPanel="{StaticResource ItemsPanelTemplate1}"> 
    <Pivot.HeaderTemplate> 
     <DataTemplate/> 
    </Pivot.HeaderTemplate> 
</Pivot> 

Und diese Vorlage in App.xaml hinzu:

<ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> 
    <Grid Margin="0,-48,0,0"/> 
</ItemsPanelTemplate>