• WP8.1 Windows Phone 8.1开发:何如定义Pivot头部样式、定义Pivot头部颜色


    Windows Phone 8.1 ,如何自定义Pivot头部样式?用Pivot控件完成这样的效果。

                       image

    网上找了好久,只找到了windows phone 8的解决方案。 终于一个大神给支了招,我觉得我有必要跟诸位开发者分享一下经验。Windows Phone 8.1的开发资料实在太少了。我决定,用一个假期把我知道的都分享出来。

    如果你支持我的做法。请点赞或者评论本条博客、或者去 windows phone 应用商店 下载一个叫【有点意思】的app、再或者遥祝大黑兔减肥成功。 大黑兔将非常高兴。有点意思:http://www.windowsphone.com/zh-cn/store/app/%e6%9c%89%e7%82%b9%e6%84%8f%e6%80%9d/f2e705b4-5fd6-4c69-826b-c2f05c825ef0

    好了,扯淡结束,开始工作。

    1. 在App.xaml里定义自己的Pivot控件样式。下面的代码加在Application.Resources节点下,这样你的每一个页面就都能用到这个样式了。

      1 <Style TargetType="Pivot">
      2 
      3     <Setter Property="Template">
      4 
      5         <Setter.Value>
      6 
      7             <ControlTemplate TargetType="Pivot">
      8 
      9                 <Grid 
     10 
     11                     x:Name="RootElement" 
     12 
     13                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
     14 
     15                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
     16 
     17                     Background="{TemplateBinding Background}">
     18 
     19                     <VisualStateManager.VisualStateGroups>
     20 
     21                         <VisualStateGroup x:Name="Orientation">
     22 
     23                             <VisualState x:Name="Portrait">
     24 
     25                                 <Storyboard>
     26 
     27                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
     28 
     29                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
     30 
     31                                     </ObjectAnimationUsingKeyFrames>
     32 
     33                                 </Storyboard>
     34 
     35                             </VisualState>
     36 
     37                             <VisualState x:Name="Landscape">
     38 
     39                                 <Storyboard>
     40 
     41                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
     42 
     43                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
     44 
     45                                   </ObjectAnimationUsingKeyFrames>
     46 
     47                               </Storyboard>
     48 
     49                           </VisualState>
     50 
     51                       </VisualStateGroup>
     52 
     53                   </VisualStateManager.VisualStateGroups>
     54 
     55                   <Grid.RowDefinitions>
     56 
     57                               <RowDefinition Height="Auto" />
     58 
     59                               <RowDefinition Height="*" />
     60 
     61                           </Grid.RowDefinitions>
     62 
     63                   <Border Background="Red">
     64 
     65                       <ContentControl x:Name="TitleContentControl"
     66 
     67                                       Style="{StaticResource PivotTitleContentControlStyle}"
     68 
     69                                       Content="{TemplateBinding Title}"
     70 
     71                                       ContentTemplate="{TemplateBinding TitleTemplate}"/>
     72 
     73                   </Border>
     74 
     75                   <ScrollViewer
     76 
     77                       x:Name="ScrollViewer"
     78 
     79                       Margin="{TemplateBinding Padding}"
     80 
     81                       Grid.Row="1"
     82 
     83                       HorizontalSnapPointsType="MandatorySingle"
     84 
     85                       HorizontalSnapPointsAlignment="Center"
     86 
     87                       HorizontalScrollBarVisibility="Hidden"
     88 
     89                       VerticalScrollMode="Disabled"
     90 
     91                       VerticalScrollBarVisibility="Disabled"
     92 
     93                       VerticalSnapPointsType="None"
     94 
     95                       VerticalContentAlignment="Stretch"
     96 
     97                       ZoomMode="Disabled"
     98 
     99                       Template="{StaticResource ScrollViewerScrollBarlessTemplate}">
    100 
    101                       <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
    102 
    103                           <PivotHeaderPanel x:Name="Header" Background="Red">
    104 
    105                               <PivotHeaderPanel.RenderTransform>
    106 
    107                                   <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0" />
    108 
    109                               </PivotHeaderPanel.RenderTransform>
    110 
    111                           </PivotHeaderPanel>
    112 
    113                           <ItemsPresenter x:Name="PivotItemPresenter">
    114 
    115                               <ItemsPresenter.RenderTransform>
    116 
    117                                   <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0" />
    118 
    119                               </ItemsPresenter.RenderTransform>
    120 
    121                           </ItemsPresenter>
    122 
    123                       </PivotPanel>
    124 
    125                   </ScrollViewer>
    126 
    127               </Grid>
    128 
    129           </ControlTemplate>
    130 
    131       </Setter.Value>
    132 
    133   </Setter>
    134 
    135 </Style>

    2.在调用Pivot的页面中定义,primitives的namespace,加入以下代码。

    xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"

    3.在要使用Pivot的页面里,给Pivot指定这个样式:

    <Pivot Style="{StaticResource DiaosbookPivotStyle}">
     
    等等别走,点个再走~
  • 相关阅读:
    前端进击的巨人(一):执行上下文与执行栈,变量对象
    读书笔记(06)
    前端博客收藏
    Nodejs-Can't set headers after they are sent
    Mac OS安装包管理工具Homebrew教程
    webpack自动化构建脚本指令npm run dev/build
    使用express搭建node中间件
    【转】基于localStorage的资源离线和更新技术
    web前端性能优化
    Vue生命周期详解
  • 原文地址:https://www.cnblogs.com/mcad/p/4124798.html
Copyright © 2020-2023  润新知