[英]Windows Phone 8.1 Pivot custom header style
我的目標是模仿這里看到的類似效果: http : //www.visuallylocated.com/post/2012/05/23/Changing-the-background-color-of-your-pivot-headers.aspx 。 網上有資源描述如何操作,但所有這些資源都適用於Windows Phone 8. 8.1更新帶來了嚴重的API更改,使代碼無用。
那么,我如何設置pivot頭? 我發現名稱空間Windows.UI.Xaml.Controls.Primitives ,其中包括類PivotHeaderPanel,這可能在這種情況下有用,但我找不到從XAML訪問此類的方法。 或許還有另一種方式?
如果您只想更改所有標題的背景顏色,可以在Window Phone 8.1中執行此操作。
首先,使用Expression Blend生成Pivot
控件的默認樣式。
<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" 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="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" 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}">
<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>
在下面找到這一行,我對默認樣式所做的唯一更改是將Background="{TemplateBinding BorderBrush}"
到PivotHeaderPanel
,后者是托管所有標題的面板。
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
我在這里使用TemplateBinding
的原因是因為這樣做可以讓我靈活地通過指定Pivot
的BorderBush
來更改標題背景。 由於BorderBrush
未在控件中的任何位置使用,因此如果我們更改它將不會有任何副作用。
所以,你需要在你的Pivot
做的就是這個。
<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">
這就是他們現在的樣子。
希望這可以幫助!
所以8.1殺了我以前做HeaderTemplates的方式。
我現在的解決方案是在PivotItem的Header元素中放置一個自定義的TextBlock或Control。
<Pivot>
<PivotItem>
<PivotItem.Header>
<Grid Background="Red">
<TextBlock Text="WHY DID YOU DO THIS MICROSOFT"/>
</Grid>
</PivotItem.Header>
</PivotItem>
...
</Pivot>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.