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. android 自定义Dialog背景透明及显示位置设置

    先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...

  2. PHP 遍历目录

    $dir = $_SERVER['DOCUMENT_ROOT'].'/test'; //var_dump($dir);exit; function my_scandir($dir) { $files ...

  3. js 函数定义三种方式

    <p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...

  4. 28. 字符串的全排列之第2篇[string permutation with repeating chars]

    [本文链接] http://www.cnblogs.com/hellogiser/p/string-permutation-with-repeating-chars.html [题目] 输入一个字符串 ...

  5. php开发网站编码统一问题

    一个良好的网站代码整洁,注释适当是最基本的,也是好的习惯,这可以避免以后的非常乱了自己感觉都乱,一旦重构麻烦就大了耗时耗力,其中网站整个体系的编码是最重要的一个方面,为了网站的稳定性建议php程序,H ...

  6. Java for LeetCode 031 Next Permutation

    Next Permutation Total Accepted: 33595 Total Submissions: 134095     Implement next permutation, whi ...

  7. 以普通用户登录 su root 用vncviewer:xxxxx 会报错！！exit 回到最初环境变的用户 问题解决！！！！

    [root@ok IT-DOC]# vncviewer : TigerVNC Viewer - built May :: Copyright (C) - TigerVNC Team and many ...

  8. 烟大 Contest1024 - 《挑战编程》第一章：入门 Problem C: The Trip（水题）

    Problem C: The Trip Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 19  Solved: 3[Submit][Status][Web ...

  9. jquery+php实现用户输入搜索内容时自动提示

    index.html <html> <head>     <meta charset=;} #search_auto li a:hover{background:#D8D ...

  10. hdu 4393 优先队列

    用优先队列储存每个人的初始距离和编号,每轮求出最快的人,然后pop掉 一开始想遍历队列的,后来发现队列没办法遍历,汗-_-! 题意,给几个第一秒冲出的距离和以后速度,求每秒后最前面人的编号,求完后最前 ...