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 几种模式