Hubtile的应用

要实现的效果类似这样：

实现过程如下 ：

使用HubTile前请先引用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"/>

也可以用代码实现  方法如下：

HubTile hubTile = new HubTile();  
hubTile.Message = "This is HubTile message!";  
 hubTile.Title = "HubTile Title"; 

 

HubTile的几个关键属性有：

Title:设置或获取HubTile实例的标题

 Message:设置或获取HubTile实例的信息，用小字体展示

 Source:ImageSource类型，设置或获取HubTile实例的图片源

DisplayNotification:布尔值，它确定新提示的布尔标识

 Notification:设置或获取提示的内容，用大字体展示

 IsFrozen:布尔值，设置或获取那些没有处于Animated的图像的布尔标识

 GroupTag:设置或获取HubTile组的group tag。当你添加了多个HubTile，这时你可以把它们归为一组，如下面的代码

 <toolkit:HubTile Title="London" GroupTag="Cities"/>  
<toolkit:HubTile Title="NewYork" GroupTag="Cities"/> 

我们可以通过后台代码同时Freeze或者Unfreeze一个HubTile组：

 HubTileService.FreezeGroup("Cities");  
HubTileService.UnfreezeGroup("Cities"); 

 以下是一个完整的范例:

先定义一个类：

 public class TileItem  
    {  
       public string ImageUri 
        {   
            get;  
           set;  
      }       
       public string Title   
        {   
            get;  
           set;  
      }                
       public string Notification   
       {  
           get;   
            set;  
        }   
         public bool DisplayNotification  
         {   
             get { return !string.IsNullOrEmpty(this.Notification); }  
         }               
       public string Message  
       {  
         get;   
          set;   
      }  
   public string GroupTag   
       {  
            get;  
             set;  
       }  
  } 

再定义一个方法

void InitializeItem()  
  {  
  List<TileItem> tileItems = new List<TileItem>()

 {  
     new TileItem() { ImageUri = "/Images/chicken.jpg", Title = "Chicken", Notification = "$3.49", GroupTag = "TileGroup" },   
     new TileItem() { ImageUri = "/Images/wings.jpg", Title = "Wings", Notification = "Only $2.49", GroupTag = "TileGroup" },   
     new TileItem() { ImageUri = "/Images/bonfillet.jpg", Title = "Chicken\nFillet", Message = "哈哈哈哈哈." }, 
     new TileItem() { ImageUri = "/Images/burger.jpg", Title = "Burger", Notification = "$3.99" },   
     new TileItem() { ImageUri = "/Images/bucket.jpg", Title = "Chicken\nBucket", Notification = "$19.99" },   
     new TileItem() { ImageUri = "/Images/fries.jpg", Title = "Fries", Notification = "Only $1.99" },  
     new TileItem() { ImageUri = "/Images/caesar.jpg", Title = "Caesar Salad", Notification = "$4.99" },   
     new TileItem() { ImageUri = "/Images/corn.jpg", Title = "Corn", Notification = "Only $1.99" },

 }; 

  listBox1.DataContext = tileItems;
       

  } 

在XAML里面添加

    <ListBox ItemsSource="{Binding}" Grid.Row="0" x:Name="listBox1">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <toolkit:HubTile Title="{Binding Title}" Margin="3"   
                                 Notification="{Binding Notification}"  
                                  DisplayNotification="{Binding DisplayNotification}"     
                                     Message="{Binding Message}"  
                                     GroupTag="{Binding GroupTag}"   
                                      Source="{Binding ImageUri}">    
                  </toolkit:HubTile>  
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

然后在页面初始化的时候 加载方法

   public MainPage()
        {
            InitializeComponent();
            InitializeItem();     
        }

效果图如下：