Windows Phone 创建HubTile元素并重写其样式
在最新的Windows Phone Toolkit中我们可以看到HubTile控件，这个控件可以允许我们添加生动的动态磁贴，其中可以包含图像，标题，信息，以及提示通知！并且也可以利用它的GroupTag属性进行分组！
接下来我们来演示HubTile控件的使用方法，这里需要注意的是HubTile控件遵循的是Metro UI的设计风格，它的默认大小为173*173.
如下：
可以看出，通过HubTile控件，我们很方便的可以做出像桌面一样的动态磁贴元素!
那么我们该如何使用HubTile呢？在使用之前，我们需要去http://silverlight.codeplex.com/下载最新的Windows Phone Toolkit DLL并添加到我们的项目引用中！之后我们便可以进行如下操作：
一、在XAML中添加命名空间：
1 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
二、在我们Xaml中编写HubTile代码
1 <Grid Width="370" Height="537"> 2 3 4 <Grid.RowDefinitions> 5 6 7 <RowDefinition Height="173*"/> 8 9 10 <RowDefinition Height="173*"/> 11 12 13 <RowDefinition Height="173*"/> 14 15 16 </Grid.RowDefinitions> 17 18 19 <Grid.ColumnDefinitions> 20 21 22 <ColumnDefinition Width="173*"/> 23 24 25 <ColumnDefinition Width="173*"/> 26 27 28 </Grid.ColumnDefinitions> 29 30 31 <StackPanel> 32 33 34 <toolkit:HubTile x:Name="btnPost1" Source="/Img/1.png" Title="房产领域" Message="关注黄金地段把握房产动向" /> 35 36 37 </StackPanel> 38 39 40 <StackPanel Grid.Column="1" Grid.Row="0"> 41 42 43 <toolkit:HubTile x:Name="btnPost2" Source="/Img/2.png" Title="汽车领域" Message="爱车*就来这里" /> 44 45 46 </StackPanel> 47 48 49 <StackPanel Grid.Column="0" Grid.Row="2"> 50 51 52 <toolkit:HubTile x:Name="btnPost3" Source="/Img/4.png" Title="婚庆领域" Message="秀秀我们的恩爱" /> 53 54 55 </StackPanel> 56 57 58 <StackPanel Grid.Column="1" Grid.Row="2"> 59 60 61 <toolkit:HubTile x:Name="btnPost4" Source="/Img/5.png" Title="金融领域" Message="随时随地掌握金融动向" /> 62 63 64 </StackPanel> 65 66 67 <StackPanel Grid.ColumnSpan="2" Grid.Row="1"> 68 69 70 <toolkit:HubTile x:Name="btnPost5" Source="/Img/3.png" Title="专属定制" Message="定制属于自己公司的APP" Style="{StaticResource HubTileStyle1}" Width="358" /> 71 72 73 </StackPanel> 74 75 76 </Grid>
在HubTile属性中有几个属性是我们需要了解的：
l Title:设置或获取HubTile实例的标题
l Message:设置或获取HubTile实例的信息，用小字体展示
l Source:ImageSource类型，设置或获取HubTile实例的图片源
l DisplayNotification:布尔值，它确定新提示的布尔标识
l Notification:设置或获取提示的内容，用大字体展示
l IsFrozen:布尔值，设置或获取那些没有处于Animated的图像的布尔标识
l GroupTag:设置或获取HubTile组的group tag。当你添加了多个HubTile，这时你可以把它们归为一组
可以看出、我在上面的最后一个HubTile中设置了Style属性。因为传统的HubTile大小是173*173的，即使改变的Width属性也不能改变HubTile元素的大小，所以我们要利用Blend来重写该HubTile的样式！ 修改后的HubTile的样式如下：
1 <phone:PhoneApplicationPage.Resources> 2 3 4 5 <Style x:Key="HubTileStyle1" TargetType="toolkit:HubTile"> 6 7 8 9 <Setter Property="Height" Value="173"/> 10 11 12 13 <Setter Property="Width" Value="173"/> 14 15 16 17 <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/> 18 19 20 21 <Setter Property="Foreground" Value="#FFFFFFFF"/> 22 23 24 25 <Setter Property="Template"> 26 27 28 29 <Setter.Value> 30 31 32 33 <ControlTemplate TargetType="toolkit:HubTile"> 34 35 36 37 <StackPanel x:Name="Viewport" Height="173" Width="358"> 38 39 40 41 <StackPanel.Resources> 42 43 44 45 <CubicEase x:Key="HubTileEaseOut" EasingMode="EaseOut"/> 46 47 48 49 </StackPanel.Resources> 50 51 52 53 <StackPanel.Projection> 54 55 56 57 <PlaneProjection x:Name="ViewportProjection" CenterOfRotationY="0.25"/> 58 59 60 61 </StackPanel.Projection> 62 63 64 65 <VisualStateManager.VisualStateGroups> 66 67 68 69 <VisualStateGroup x:Name="ImageStates"> 70 71 72 73 <VisualStateGroup.Transitions> 74 75 76 77 <VisualTransition x:Name="ExpandedToSemiexpanded" From="Expanded" GeneratedDuration="0:0:0.85" To="Semiexpanded"> 78 79 80 81 <Storyboard> 82 83 84 85 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 86 87 88 89 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-173.0"/> 90 91 92 93 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-79.0"/> 94 95 96 97 </DoubleAnimationUsingKeyFrames> 98 99 100 101 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 102 103 104 105 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 106 107 108 109 </DoubleAnimationUsingKeyFrames> 110 111 112 113 </Storyboard> 114 115 116 117 </VisualTransition> 118 119 120 121 <VisualTransition x:Name="SemiexpandedToCollapsed" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Collapsed"> 122 123 124 125 <Storyboard> 126 127 128 129 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 130 131 132 133 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-79.0"/> 134 135 136 137 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="0.0"/> 138 139 140 141 </DoubleAnimationUsingKeyFrames> 142 143 144 145 </Storyboard> 146 147 148 149 </VisualTransition> 150 151 152 153 <VisualTransition x:Name="CollapsedToExpanded" From="Collapsed" GeneratedDuration="0:0:0.85" To="Expanded"> 154 155 156 157 <Storyboard> 158 159 160 161 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 162 163 164 165 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 166 167 168 169 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-173.0"/> 170 171 172 173 </DoubleAnimationUsingKeyFrames> 174 175 176 177 </Storyboard> 178 179 180 181 </VisualTransition> 182 183 184 185 <VisualTransition x:Name="ExpandedToFlipped" From="Expanded" GeneratedDuration="0:0:0.85" To="Flipped"> 186 187 188 189 <Storyboard> 190 191 192 193 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 194 195 196 197 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-173.0"/> 198 199 200 201 </DoubleAnimationUsingKeyFrames> 202 203 204 205 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 206 207 208 209 <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/> 210 211 212 213 </ObjectAnimationUsingKeyFrames> 214 215 216 217 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 218 219 220 221 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 222 223 224 225 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="180.0"/> 226 227 228 229 </DoubleAnimationUsingKeyFrames> 230 231 232 233 </Storyboard> 234 235 236 237 </VisualTransition> 238 239 240 241 <VisualTransition x:Name="FlippedToExpanded" From="Flipped" GeneratedDuration="0:0:0.85" To="Expanded"> 242 243 244 245 <Storyboard> 246 247 248 249 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 250 251 252 253 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-173.0"/> 254 255 256 257 </DoubleAnimationUsingKeyFrames> 258 259 260 261 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 262 263 264 265 <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/> 266 267 268 269 </ObjectAnimationUsingKeyFrames> 270 271 272 273 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 274 275 276 277 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="180.0"/> 278 279 280 281 <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="360.0"/> 282 283 284 285 </DoubleAnimationUsingKeyFrames> 286 287 288 289 </Storyboard> 290 291 292 293 </VisualTransition> 294 295 296 297 </VisualStateGroup.Transitions> 298 299 300 301 <VisualState x:Name="Expanded"> 302 303 304 305 <Storyboard> 306 307 308 309 <DoubleAnimation Duration="0" To="-173.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 310 311 312 313 <DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/> 314 315 316 317 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 318 319 320 321 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/> 322 323 324 325 </ObjectAnimationUsingKeyFrames> 326 327 328 329 </Storyboard> 330 331 332 333 </VisualState> 334 335 336 337 <VisualState x:Name="Semiexpanded"> 338 339 340 341 <Storyboard> 342 343 344 345 <DoubleAnimation Duration="0" To="-79.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 346 347 348 349 </Storyboard> 350 351 352 353 </VisualState> 354 355 356 357 <VisualState x:Name="Collapsed"/> 358 359 360 361 <VisualState x:Name="Flipped"> 362 363 364 365 <Storyboard> 366 367 368 369 <DoubleAnimation Duration="0" To="-173.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 370 371 372 373 <DoubleAnimation Duration="0" To="180.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/> 374 375 376 377 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 378 379 380 381 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/> 382 383 384 385 </ObjectAnimationUsingKeyFrames> 386 387 388 389 </Storyboard> 390 391 392 393 </VisualState> 394 395 396 397 </VisualStateGroup> 398 399 400 401 </VisualStateManager.VisualStateGroups> 402 403 404 405 <Grid x:Name="TitlePanel" Height="346" RenderTransformOrigin="0.5,0.5" Width="358"> 406 407 408 409 <Grid.RowDefinitions> 410 411 412 413 <RowDefinition/> 414 415 416 417 <RowDefinition/> 418 419 420 421 </Grid.RowDefinitions> 422 423 424 425 <Grid.RenderTransform> 426 427 428 429 <CompositeTransform/> 430 431 432 433 </Grid.RenderTransform> 434 435 436 437 <Border Background="{TemplateBinding Background}" Grid.Row="0"> 438 439 440 441 <TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/> 442 443 444 445 </Border> 446 447 448 449 <Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="173" Grid.Row="1" Width="358"> 450 451 452 453 <Grid.Projection> 454 455 456 457 <PlaneProjection CenterOfRotationY="0.5" RotationX="180"/> 458 459 460 461 </Grid.Projection> 462 463 464 465 <Grid.RowDefinitions> 466 467 468 469 <RowDefinition Height="*"/> 470 471 472 473 <RowDefinition Height="Auto"/> 474 475 476 477 </Grid.RowDefinitions> 478 479 480 481 <TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/> 482 483 484 485 <TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/> 486 487 488 489 <TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/> 490 491 492 493 </Grid> 494 495 496 497 <Image x:Name="Image" Height="173" Grid.Row="1" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="358"/> 498 499 500 501 </Grid> 502 503 504 505 </StackPanel> 506 507 508 509 </ControlTemplate> 510 511 512 513 </Setter.Value> 514 515 516 517 </Setter> 518 519 520 521 </Style> 522 523 524 525 </phone:PhoneApplicationPage.Resources>
当我们引用了上面的样式之后我们预览下我们的整体效果如下，当然实际中这些小磁贴是会动的：
