hubtile的几点心得说法

wp8中，首先这个控件是toolkit带的（下载安装toolkit，添加命名空间步骤就略过了。命名空间：xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"）红色部分为我的心得，绿色部分为方便读者理解加的注释，蓝色部分为可替代（忽略）代码。粉色部分为后来新增内容

1.首先要说一下压下效果，这个控件和wp7不同，在wp8中只有了2种效果，这个控件的压下效果（toolkit：tilteffect.istiltenabled,true表示有这效果，false表示没有），和除了这个控件之外的控件的压下效果（suppresstilt），wp7中还有压下的深度tilestrength，和程度pressstrength（这个是参考自林政的深入浅出wp8资料）

2.翻转效果，是否翻转，是由IsFrozen="True"这句所决定的.是否翻转是由视觉状态中的"Flipped"状态决定的。

3。磁帖的本质是一个2个正方块竖直摞起来的长方块，下面的默认是collapsed，当经过一定时间之后，下面的翻转180度上来。

外观上我们看到的默认样式是：

正面：上（image图片）下（title）

反面：上（message）下（notification），反面的不太确定。

用blend绘制一个hubtile，我们几个比较关注的几个地方：

（1）首先是反转的速度。

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
<!--0.618为更改的磁帖翻转用时-->
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.618" Value="180.0"/>
</DoubleAnimationUsingKeyFrames>

（2）其次，由于Border里的那个TextBlock默认绑定的是title，这样的话，我们只能显示title和Message两种信息，而我需要的是tile、Message、Notification，这个怎么办呢，hubtile属性里有一个DisplayNotification，给他设置为true，Notification就可以显示了，但是这样的话Message就没了，我们把模板中Border下的TextBlock绑定为Message就可以同时显示三个信息。参考自：http://www.cnblogs.com/jacklandrin/archive/2012/11/11/2765139.html

<Grid x:Name="TitlePanel" Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border Background="{TemplateBinding Background}" Grid.Row="0">
<!--下面的texeblock是正面磁帖的文字，这里做过修改，为了显示message，title（默认绑定的是title），notification三个信息，需要把xaml代码 DisplayNotification="True"，然后把绑定的title改成message-->
<!--<TextBlock Foreground="{TemplateBinding Foreground}" FontSize="25" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="48" Margin="10,0,0,6" TextWrapping="Wrap" Text="{TemplateBinding Message}" VerticalAlignment="Bottom"/>-->
<TextBlock FontSize="20" TextWrapping="Wrap" VerticalAlignment="Bottom" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23" Margin="10,0,0,0">本信息由XXXX提供</TextBlock>
</Border>
<Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Visibility="Collapsed" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--NotificationBlock为背部的notification样式-->
<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}" HorizontalAlignment="Left"/>
<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}"/>
<!--backtitleblock是背部的title的样式-->
<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" HorizontalAlignment="Left"/>
</Grid>
<Border x:Name="Image" Height="173" Width="173" Background="{TemplateBinding Background}" Grid.Row="1">
<!--<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>-->
<!--<TextBlock FontSize="20" TextWrapping="Wrap" VerticalAlignment="Center" Margin="2">本信息由XXXX提供</TextBlock>-->

<!--注意这里可以任意的修改了，如果冻结掉tile的话，只显示这里的消息-->

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Foreground="{TemplateBinding Foreground}" FontSize="25" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="48" Margin="10,0,0,6" TextWrapping="Wrap" Text="{TemplateBinding Title}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Foreground="{TemplateBinding Foreground}" FontSize="25" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="48" Margin="10,0,0,6" TextWrapping="Wrap" Text="{TemplateBinding Message}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="2" Foreground="{TemplateBinding Foreground}" FontSize="25" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="48" Margin="10,0,0,6" TextWrapping="Wrap" Text="{TemplateBinding Notification}" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>

<Style TargetType="toolkit:HubTile">
<!--更改磁帖大小开始-->
<Setter Property="Height" Value="173"/>
<Setter Property="Width" Value="173"/>
<!--更改磁帖大小结束-->

(3)最后是xaml磁帖的设置

<!--这里做过修改， DisplayNotification="True"-->
<toolkit:HubTile x:Name="hubTile_index" Title="{Binding Title}" Source="{Binding Image}"
Margin="3"
Notification="{Binding Notification}"
DisplayNotification="True"
Message="{Binding Message}"
GroupTag="{Binding GroupTag}" Tap="WrapPanel_Tap" toolkit:TiltEffect.IsTiltEnabled="True" IsFrozen="False"></toolkit:HubTile>

因为某种原因这段xaml代码需要重新设计了，吧以前的粘出来了，自己感觉说的有点乱，可能有不对的地方希望大家指正。（动画部分别的都未列出。）

 

经过我的测试，wp8QQ的名片效果和系统自带的是不一样的，QQ名片效果，大约持续时间是13.65s，系统自带的是12.15s，就是说QQ肯定是自己改的

转载于:https://www.cnblogs.com/defoliate/archive/2013/06/13/3134392.html