http://blog.csdn.net/matrixcl/article/details/7057291 （转）

Toolkit(http://silverlight.codeplex.com/)中有一个不错的控件：HubTile。
但这个控件只能用于173*173的Tile，如果想放其他尺寸的的就麻烦一些了（一行并排3个显示的Tile）

下面是实现可重定义tile大小的完整代码

步骤1：写一个Converner类，用于缩放double类型的数值

需要命名空间：

using System.Globalization;
using System.Windows.Data;

  1. <span style="font-size:18px;">    public class DoubleScaleConverner : IValueConverter
  2. {
  3. public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4. {
  5. if (value is double && targetType == typeof(double))
  6. {
  7. double dbOrig = (double)value;
  8. if (parameter is string)
  9. {
  10. double dbParam;
  11. if (double.TryParse((parameter as string), out dbParam))
  12. {
  13. return Math.Round(dbOrig * dbParam);
  14. }
  15. }
  16. }
  17. return value;
  18. }
  19. public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  20. {
  21. return null;
  22. }
  23. }</span>

2. ResourceDictionary文件中，将converner声明出来

  1. <span style="font-size:18px;">xmlns:my="clr-namespace:HubTileTest"
  2. an>
  1. <span style="font-size:18px;">    <my:DoubleScaleConverner x:Key="doubleScaleConverner" /></span>

3. 用blend生成hubtile的style，并做修改成这样

  1. <span style="font-size:18px;"><Style x:Key="customHubTileStyle" TargetType="toolkit:HubTile">
  2. <Style.Setters>
  3. <Setter Property="Height" Value="173"/>
  4. <Setter Property="Width" Value="173"/>
  5. <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
  6. <Setter Property="Foreground" Value="#FFFFFFFF"/>
  7. <Setter Property="Template">
  8. <Setter.Value>
  9. <ControlTemplate TargetType="toolkit:HubTile">
  10. <StackPanel x:Name="Viewport"
  11. Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
  12. <StackPanel.Resources>
  13. <CubicEase EasingMode="EaseOut" x:Key="HubTileEaseOut"/>
  14. </StackPanel.Resources>
  15. <StackPanel.Projection>
  16. <PlaneProjection CenterOfRotationY="0.25" x:Name="ViewportProjection"/>
  17. </StackPanel.Projection>
  18. <VisualStateManager.VisualStateGroups>
  19. <VisualStateGroup x:Name="ImageStates">
  20. <VisualStateGroup.Transitions>
  21. <VisualTransition x:Name="ExpandedToSemiexpanded"
  22. From="Expanded" To="Semiexpanded"
  23. GeneratedDuration="0:0:0.85">
  24. <Storyboard>
  25. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  26. Storyboard.TargetName="TitlePanel">
  27. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  28. <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-0.45665}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  29. </DoubleAnimationUsingKeyFrames>
  30. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
  31. Storyboard.TargetName="ViewportProjection">
  32. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  33. </DoubleAnimationUsingKeyFrames>
  34. </Storyboard>
  35. </VisualTransition>
  36. <VisualTransition x:Name="SemiexpandedToCollapsed"
  37. From="Semiexpanded" To="Collapsed"
  38. GeneratedDuration="0:0:0.85">
  39. <Storyboard>
  40. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  41. Storyboard.TargetName="TitlePanel">
  42. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-0.45665}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  43. <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  44. </DoubleAnimationUsingKeyFrames>
  45. </Storyboard>
  46. </VisualTransition>
  47. <VisualTransition x:Name="CollapsedToExpanded"
  48. From="Collapsed" To="Expanded"
  49. GeneratedDuration="0:0:0.85">
  50. <Storyboard>
  51. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  52. Storyboard.TargetName="TitlePanel">
  53. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  54. <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  55. </DoubleAnimationUsingKeyFrames>
  56. </Storyboard>
  57. </VisualTransition>
  58. <VisualTransition x:Name="ExpandedToFlipped"
  59. From="Expanded" To="Flipped"
  60. GeneratedDuration="0:0:0.85">
  61. <Storyboard>
  62. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  63. Storyboard.TargetName="TitlePanel">
  64. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  65. </DoubleAnimationUsingKeyFrames>
  66. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
  67. Storyboard.TargetName="Image">
  68. <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
  69. </ObjectAnimationUsingKeyFrames>
  70. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
  71. Storyboard.TargetName="ViewportProjection">
  72. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  73. <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="180.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  74. </DoubleAnimationUsingKeyFrames>
  75. </Storyboard>
  76. </VisualTransition>
  77. <VisualTransition x:Name="FlippedToExpanded"
  78. From="Flipped" To="Expanded"
  79. GeneratedDuration="0:0:0.85">
  80. <Storyboard>
  81. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  82. Storyboard.TargetName="TitlePanel">
  83. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}" EasingFunction="{StaticResource HubTileEaseOut}"/>
  84. </DoubleAnimationUsingKeyFrames>
  85. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
  86. Storyboard.TargetName="Image">
  87. <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
  88. </ObjectAnimationUsingKeyFrames>
  89. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
  90. Storyboard.TargetName="ViewportProjection">
  91. <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="180.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  92. <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="360.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
  93. </DoubleAnimationUsingKeyFrames>
  94. </Storyboard>
  95. </VisualTransition>
  96. </VisualStateGroup.Transitions>
  97. <VisualStateGroup.States>
  98. <VisualState x:Name="Expanded">
  99. <Storyboard>
  100. <DoubleAnimation Duration="0" To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}"
  101. Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  102. Storyboard.TargetName="TitlePanel"/>
  103. <DoubleAnimation Duration="0" To="0.0"
  104. Storyboard.TargetProperty="RotationX"
  105. Storyboard.TargetName="ViewportProjection"/>
  106. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
  107. Storyboard.TargetName="Image">
  108. <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
  109. </ObjectAnimationUsingKeyFrames>
  110. </Storyboard>
  111. </VisualState>
  112. <VisualState x:Name="Semiexpanded">
  113. <Storyboard>
  114. <DoubleAnimation Duration="0" To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-0.45665}"
  115. Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  116. Storyboard.TargetName="TitlePanel"/>
  117. </Storyboard>
  118. </VisualState>
  119. <VisualState x:Name="Collapsed"/>
  120. <VisualState x:Name="Flipped">
  121. <Storyboard>
  122. <DoubleAnimation Duration="0" To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=-1}"
  123. Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
  124. Storyboard.TargetName="TitlePanel"/>
  125. <DoubleAnimation Duration="0" To="180.0"
  126. Storyboard.TargetProperty="RotationX"
  127. Storyboard.TargetName="ViewportProjection"/>
  128. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
  129. Storyboard.TargetName="Image">
  130. <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
  131. </ObjectAnimationUsingKeyFrames>
  132. </Storyboard>
  133. </VisualState>
  134. </VisualStateGroup.States>
  135. </VisualStateGroup>
  136. </VisualStateManager.VisualStateGroups>
  137. <Grid x:Name="TitlePanel"
  138. Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=2}"
  139. Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
  140. RenderTransformOrigin="0.5,0.5">
  141. <Grid.RenderTransform>
  142. <CompositeTransform/>
  143. </Grid.RenderTransform>
  144. <Grid.RowDefinitions>
  145. <RowDefinition/>
  146. <RowDefinition/>
  147. </Grid.RowDefinitions>
  148. <Border Grid.Row="0"
  149. Background="{TemplateBinding Background}">
  150. <TextBlock VerticalAlignment="Bottom"
  151. Margin="10,0,0,6"
  152. Text="{TemplateBinding Title}"
  153. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  154. FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=0.22}"
  155. Foreground="{TemplateBinding Foreground}"
  156. TextWrapping="NoWrap"
  157. LineStackingStrategy="BlockLineHeight"
  158. LineHeight="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height, Converter={StaticResource doubleScaleConverner}, ConverterParameter=0.20}">
  159. </TextBlock>
  160. </Border>
  161. <Grid x:Name="BackPanel"
  162. Grid.Row="1"
  163. Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
  164. Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
  165. Background="{TemplateBinding Background}">
  166. <Grid.RowDefinitions>
  167. <RowDefinition Height="*"/>
  168. <RowDefinition Height="Auto"/>
  169. </Grid.RowDefinitions>
  170. <Grid.Projection>
  171. <PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
  172. </Grid.Projection>
  173. <TextBlock x:Name="NotificationBlock" Grid.Row="0"
  174. Margin="8,8,0,6"
  175. Text="{TemplateBinding Notification}"
  176. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  177. FontSize="{StaticResource PhoneFontSizeLarge}"
  178. Foreground="{TemplateBinding Foreground}"
  179. TextWrapping="NoWrap"
  180. LineStackingStrategy="BlockLineHeight"
  181. LineHeight="32"/>
  182. <TextBlock x:Name="MessageBlock" Grid.Row="0"
  183. Margin="10,10,10,6"
  184. Text="{TemplateBinding Message}"
  185. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  186. FontSize="{StaticResource PhoneFontSizeNormal}"
  187. Foreground="{TemplateBinding Foreground}"
  188. TextWrapping="Wrap"
  189. LineStackingStrategy="BlockLineHeight"
  190. LineHeight="23.333"/>
  191. <TextBlock x:Name="BackTitleBlock" Grid.Row="1"
  192. VerticalAlignment="Bottom"
  193. Margin="10,0,0,6"
  194. FontFamily="{StaticResource PhoneFontFamilySemiBold}"
  195. FontSize="{StaticResource PhoneFontSizeNormal}"
  196. Foreground="{TemplateBinding Foreground}"
  197. TextWrapping="NoWrap"/>
  198. </Grid>
  199. <Image x:Name="Image" Grid.Row="1"
  200. Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
  201. Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
  202. Stretch="UniformToFill"
  203. Source="{TemplateBinding Source}"/>
  204. </Grid>
  205. </StackPanel>
  206. </ControlTemplate>
  207. </Setter.Value>
  208. </Setter>
  209. </Style.Setters>
  210. </Style></span>

4. 如果要使用一个136*136的tile，这样写个样式就行了

  1. <span style="font-size:18px;">    <Style x:Key="smallTileStyle" TargetType="toolkit:HubTile" BasedOn="{StaticResource customHubTileStyle}">
  2. <Setter Property="Height" Value="136" />
  3. <Setter Property="Width" Value="136" />
  4. <Setter Property="Background" Value="Purple" />
  5. </Style></span>

wp7 中 HubTile控件自定义大小。的更多相关文章

  1. MFC中改变控件的大小和位置

    用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  2. MFC中改变控件的大小和位置(zz)

    用CWnd类的函数MoveWindow()或SetWindowPos()能够改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  3. onCreate中获得控件的大小

    @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setC ...

  4. C# Winform 界面中各控件随着窗口大小变化

    在做一项工程中,由于不确定目标平台的分辨率,而正常使用要求铺满整个屏幕,所以界面中的各个控件必须能够适应窗口的变化. 首先想到的就是控件的百分比布局,但是再尝试写了几个控件的Location和Size ...

  5. 为Form中的控件增加自适应功能 转

    创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...

  6. MFC的停靠窗口中插入对话框，在对话框中添加控件并做控件自适应

    单文档程序添加了停靠窗口后,可能会在停靠窗口中添加一些控件.在这里我的做法是在对话框上添加控件并布局,然后将这个对话框插入到停靠窗口中. 步骤 1.插入对话框,在对话框中放入控件(我的为树形控件),并 ...

  7. WinForm编程时窗体设计器中ComboBox控件大小的设置

    问题描述: 在VS中的窗体设计器中拖放一个ComboBox控件后想调整控件的大小.发现在控件上用鼠标只能拖动宽度(Width)无法拖动(Height). 解决过程: 1.控件无法拖动,就在属性窗口中设 ...

  8. Android中动态改变控件的大小的一种方法

    在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...

  9. WPF中自定义的DataTemplate中的控件，在Window_Loaded事件中加载机制初探

    原文:WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探         最近因为项目需要,开始学习如何使用WPF开发桌面程序.使用WPF一段时间之后,感 ...

随机推荐

  1. Vmware虚拟机

    1.在虚拟机安装完系统后找到相对应的保存路径如:D:\VMware\VOS\Win7x64OS 2.该目录下面会有很多文件和文件夹,其中配置文件Windows 7 x64.vmx和硬盘文件Window ...

  2. linux文件分割（将大的日志文件分割成小的）

    linux文件分割(将大的日志文件分割成小的) linux下文件分割可以通过split命令来实现,可以指定按行数分割和安大小分割两种模式.Linux下文件合并可以通过cat命令来实现,非常简单. 在L ...

  3. How to: Set up Openswan L2TP VPN Server on CentOS 6

    Have you ever wanted to set up your own VPN server? By following the steps below, you can set up you ...

  4. java并发库 Lock 公平锁和非公平锁

    jdk1.5并发包中ReentrantLock的创建可以指定构造函数的boolean类型来得到公平锁或非公平锁,关于两者区别,java并发编程实践里面有解释 公平锁:   Threads acquir ...

  5. BFS:Meteor Shower(POJ 3669)

         奔跑吧,傻牛 题目大意:这只Bessie的牛又要来闹事了,这次她的任务就是来躲流星雨,流星雨就是在一定时间会从天上砸到Bessie的所在的正方形区域内(Bessie在0,0的位置),然后砸下 ...

  6. Intellj IDEA快捷键

    Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码 ...

  7. Ubuntu 更新源

    1.首先备份Ubuntu12.04源列表 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup (备份下当前的源列表) 2.修改更新源 ...

  8. linq lambda GroupBy 用法

    Linq 中按照多个值进行分组(GroupBy)   /// <summary>要查询的对象</summary> class Employee { public int ID ...

  9. TypeScript 1.5 Beta带来修饰元数据支持

    (此文章同时发表在本人微信公众号"dotNET每日精华文章") 今天由于有点小感冒,就不长篇大论了,简单介绍一下和VS 2015 RC一同发布的TypeScript 1.5 Bet ...

  10. 【Android】SlidingMenu属性详解（转）

    原文:http://my.eoe.cn/1169143/archive/21892.html SlidingMenu简介:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者 ...