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. python4delphi 设置syspath

    详细看demo25的代码 These techniques are demonstrated in Demo25 in the examples folder of your Python for D ...

  2. 最长递增子序列问题 nyoj 17单调递增最长子序列 nyoj 79拦截导弹

    一,    最长递增子序列问题的描述 设L=<a1,a2,…,an>是n个不同的实数的序列,L的递增子序列是这样一个子序列Lin=<aK1,ak2,…,akm>,其中k1< ...

  3. RPM软件包管理的查询功能

    以后大家升级rpm包的时候,不要用Uvh了! 我推荐用Fvh 前者会把没有安装过得包也给装上,后者只会更新已经安装的包   总结:未安装的加上小写p,已安装的不需要加p   查询q    rpm {- ...

  4. 【转】 JSONObject使用方法

    随笔- 46  文章- 0  评论- 132 JSONObject简介 本节摘要:之前对JSON做了一次简单的介 绍,并把JSON和XML做了一个简单的比较:那么,我就在想,如果是一个json格式的字 ...

  5. eclipse原文件编码GBK-UTF8

    菜单Window-Preferences-General-Workspace,在右侧面板的Text file encoding选项中选择Other:UTF-8 上一步如果不起作用,可以尝试设置下: W ...

  6. makefile_1(初识make)

    Makefile有三个非常有用的变量.分别是$@,$^,$<代表的意义分别是: $@--目标文件,$^--所有的依赖文件,$<--第一个依赖文件. LIBS = -lmCFLAGS = - ...

  7. struts2 标签 --<<s:url >

    Struts2中的链接标签 <s:url>和<s:a> 普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page conten ...

  8. iOS开发网络篇—GET请求和POST请求(转)

    一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http:/ ...

  9. 好用的PHP分页类

    <?php class Page { private $total;      //总记录 private $pagesize;    //每页显示多少条 private $limit;     ...

  10. 微信第三方登陆,无需注册一键登录,获取用户信息,PHP实现方法

    今天讲讲利用微信oauth2实现第三方登陆的实现方法. 先说说前提吧! 首先你得是服务号,并且是经过认证的.这样微信会给你很多第三方接口的权限,如果是订阅号或者没有认证的服务号那就不用想了! 一开始你 ...