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. DICOM：DICOM3.0网络通信协议

    转载:http://blog.csdn.net/zssureqh/article/details/41016091 背景: 专栏取名为DICOM医学图像处理原因是:博主是从医学图像处理算法研究时开始接 ...

  2. 九度 OJ1008 hdu 3790

    #include<stdio.h> #include<string.h> struct node { int d; int p; }g[][]; #define inf 0x3 ...

  3. yum 配置

    1.配置yum本地源 # mount /dev/cdrom /mnt/ # vim /etc/yum.repos.d/rhel-source.repo 1 [rhel-source] 2 name=R ...

  4. 利用 ffmpeg + ImageMagick + 批处理 生成高品质gif动画

    这几天研究如何生成高品质 gif 动画,重新研究 ffmpeg, 目前有一些自动转换工具,效果不佳. Video_to_320x180.bat 把 out.avi 转换成320x180的 01.avi ...

  5. Java for LeetCode 036 Valid Sudoku

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  6. codeforces 476B.Dreamoon and WiFi 解题报告

    题目链接:http://codeforces.com/problemset/problem/476/B 题目意思:给出两个字符串str1, str2,其中,str1 只由 '+' 和 '-' 组成,而 ...

  7. hdu 1232 畅通工程 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集入门题.最近在学并查集,它无非包括三个操作:make_set(x).union_set(x ...

  8. How to Optimize Battery Health?

    1. click on the battery icon from taskbar next to the date and time. 2. click "More power optio ...

  9. vm 负责虚拟机出现“”适配器 的mac地址在保留地址范围内‘’

    我自己在windows中文件中,直接将一个虚拟机进行复制了一份,后用vm打开, 选择我已经移到,结果会出现了一下的情况, 导致了我无法ping 通,故我看到一下提示: 原来是我两台虚拟机的MaC ,即 ...

  10. KVM中Linux虚拟机的硬盘添加方法

    [root@cache01 ~]# df -hT Filesystem Type Size Used Avail Use% Mounted on /dev/mapper/VolGroup-lv_roo ...