zoukankan      html  css  js  c++  java
  • 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 几种模式
  • 相关阅读:
    BZOJ3413: 匹配
    BZOJ5084: hashit
    BZOJ2281: [Sdoi2011]黑白棋
    BZOJ4808: 马
    BZOJ3208: 花神的秒题计划Ⅰ
    BZOJ3714: [PA2014]Kuglarz
    BZOJ2102: [Usaco2010 Dec]The Trough Game
    JZOJ6676. 【2020.06.01省选模拟】查拉图斯特拉如是说 (第二类斯特林数+多项式多点求值)
    LOJ #3217. 「PA 2019」Desant(状压dp)
    JZOJ 5154.【NOI2017模拟6.20】树形图求和 (矩阵树定理)
  • 原文地址:https://www.cnblogs.com/my-tzc/p/3390964.html
Copyright © 2011-2022 走看看