windows phone 网易云阅读hubtile效果实现

效果图

曾几何时，刚接触wp的时候做了一个类似的界面，不过是Rectangle实现的，还是一个个摆的。。囧啊

现在感觉这种应该是用hubtile实现的，Toolkit（http://silverlight.codeplex.com/）中的一个控件，很方便。

引用Microsoft.Phone.Controls.Toolkit.dll 到你项目中，在在XAML内声明命名空间：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

就可以使用hubtile控件了。

声明方式：（当然也可以用代码动态创建）

<toolkit:HubTile Title="HubTile Title" Message="This is HubTile message!" x:Name="hubTile"/>

关键属性：

• Title:设置或获取HubTile实例的标题
• Message:设置或获取HubTile实例的信息，用小字体展示
• Source:ImageSource类型，设置或获取HubTile实例的图片源
• DisplayNotification:布尔值，它确定新提示的布尔标识
• Notification:设置或获取提示的内容，用大字体展示
• IsFrozen:布尔值，设置或获取那些没有处于Animated的图像的布尔标识
• GroupTag:设置或获取HubTile组的group tag。当你添加了多个HubTile，这时你可以把它们归为一组。

说明：不设置DisplayNotification值时，Notification的值是不显示的，只有设置DisplayNotification=“True” 后 才会显示Notificationg的值，但是Message的值将不会在显示。

如何实现列表的样式，这样是可以实现的，不断地修改margin，我这么写过，太傻了，，，

<toolkit:HubTile x:Name="hubTile" Title="动态磁贴" Notification="Notification"
                 DisplayNotification="True" VerticalAlignment="Top" HorizontalAlignment="Left" />
<toolkit:HubTile x:Name="hubTile2" Title="动态磁贴" Notification="提示内容"
                 Message="This is HubTile message!" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="220,0,0,0"/>

改正,用ListBox订制模版实现：

<ListBox Height="400" HorizontalAlignment="Left" Margin="10,200,0,0"
                     Name="lbHubTile" VerticalAlignment="Top" Width="450"
                     ItemsSource="{Binding}">
                <!--实现水平方向列表，会自动换行-->
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate> <!--订制ListBoxItem样式-->
                    <DataTemplate>
                        <toolkit:HubTile Margin="10" Background="Blue"
                                         Message="{Binding Message}"
                                         Title="{Binding Title}"
                                         Notification="{Binding Notify}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

效果图：

实现的效果，tile在不停的反转，如何停止翻转效果，要靠HubTileService类来实现

实现一个例子，tap事件后tile停止翻转

HubTile tile = sender as HubTile;
            if (tile != null)
            {
                if (tile.IsFrozen)
                {
                    //HubTileService.FreezeGroup("Group") 操作一个HubTile组，参数为GroupTag的值
                    HubTileService.UnfreezeHubTile(tile);
                }
                else
                {
                    HubTileService.FreezeHubTile(tile);
                }
 
            }

通过style，改变hubtile的样式，如大小和翻转的速度，通过blend编辑，改变模版样式

我没有尝试，毕竟原本的设计应该能带给用户更好的使用体验

如何设置设置hubtile固定之前的状态，通过VisualStateManager来管理状态

VisualStateManager.GoToState(hubTile2, "Collapsed", true);
//Collapsed，Flipped，Semiexpanded，Expanded 几种模式