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. django 架构点点滴滴

    前言: 零星发现一些,零星记录一些,因此可能整体比较混乱,因为显然不是一气呵成写的. 关于CBV(Class Based View): 首先吐槽下,cbv的整体继承结构,可真的不是很优美,可以查看这里 ...

  2. Kruskal vs Borůvka

    做了个对比.Borůvka算法对于稠密图效果特别好.这两个都是求生成森林的算法.Prim+heap+tarjan过于难写不写了. V=200,E=1000 Kruskal method 4875048 ...

  3. php __set() __get() __isset() __unset()四个方法的应用

    一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是,对属性的读取 和赋值操作是非常频繁的,因此在PHP5 中,预定义了两个函数“__get()”和“__set()”来获 取和赋值其 ...

  4. java 异常处理 Throwable Error 和Exception

    Java异常类层次结构图:       异常的英文单词是exception,字面翻译就是“意外.例外”的意思,也就是非正常情况.事实上,异常本质上是程序上的错误,包括程序逻辑错误和系统错误. 比如使用 ...

  5. Couchbase 介绍 - 更好的 Cache 系统

    在移动互联网时代,我们面对的是更多的客户端,更低的请求延迟,这当然需要对数据做大量的 Cache 以提高读写速度. 术语 节点:指集群里的一台服务器. 现有 Cache 系统的特点 目前业界使用得最多 ...

  6. Spring面试题集

    一.Spring简介       *  Spring框架有哪几部分组成? Spring框架有七个模块组成组成,这7个模块(或组件)均可以单独存在,也可以与其它一个或多个模块联合使用,主要功能表现如下: ...

  7. static_cast dynamic_cast const_cast reinterpret_cast总结对比

    [本文链接] http://www.cnblogs.com/hellogiser/p/static_cast-dynamic_cast-const_cast-reinterpret_cast.html ...

  8. 2.10 用最少次数寻找数组中的最大值和最小值[find min max of array]

    [本文链接] http://www.cnblogs.com/hellogiser/p/find-min-max-of-array.html [题目] 对于一个由N个整数组成的数组,需要比较多少次才能把 ...

  9. codeforces 374A Inna and Pink Pony 解题报告

    题目链接:http://codeforces.com/problemset/problem/374/A 题目意思:给出一个 n 行  m 列 的棋盘,要将放置在坐标点为(i, j)的 candy 移动 ...

  10. 给mysql数据库插入当前时间

    mysql相关的三个函数有: NOW()函数以`'YYYY-MM-DD HH:MM:SS'返回当前的日期时间,可以直接存到DATETIME字段中.CURDATE()以’YYYY-MM-DD’的格式返回 ...