[WP] 控制HubTile的狀態行為

在Windows Phone Toolkit中HubTile控制項可以用來製作APP內的動態磚，而HubTile預設的狀態是會隨機進行更換的，所以HubTile有時會翻轉或者也可能很久都沒動靜等等，不過雖然HubTile並沒有提供相關的方法或屬性可以操控它的狀態，但其實可以透過VisualStateManager直接指定HubTile要變換到哪種狀態，就可以控制它的行為了

 

而要透過VisualStateManager去指定狀態，就必須要先了解HubTile有哪些的States，這個可以透過下載Windows Phone Toolkit 的Source Code後，在Microsoft.Phone.Controls.Toolkit.WP8這個專案底下的Themes\Generic.xaml 中找到關於HubTile的VisualState定義，可以看到如圖所示共有以下四種狀態: Expanded、Semiexpanded、Collapsed、Flipped

 

而在此範例則用4個HubTile，然後點選後分別變換到4種不同狀態，而要控制狀態就是使用VisualStateManager的GoToState方法，所以利用這樣簡單的方式就可以控制HubTile的狀態行為囉!

	<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	x:Class="HubtileStates.MainPage"
	mc:Ignorable="d">
	<Grid x:Name="LayoutRoot" Background="Transparent">
	<Grid x:Name="ContentPanel">
	<toolkit:HubTile HorizontalAlignment="Left" Margin="21,142,0,0" VerticalAlignment="Top" Message="Expanded" Size="Medium" Tap="HubTile_Tap" Source="/Assets/Elmo.jpg" Notification="Expanded" DisplayNotification="True" Title="Expanded"/>
	<toolkit:HubTile HorizontalAlignment="Left" Margin="236,142,0,0" VerticalAlignment="Top" Message="Semiexpanded" Size="Medium" Tap="HubTile_Tap" Source="/Assets/Elmo.jpg" Notification="Semiexpanded" DisplayNotification="True" Title="Semiexpanded"/>
	<toolkit:HubTile HorizontalAlignment="Left" Margin="21,385,0,0" VerticalAlignment="Top" Message="Flipped" Size="Medium" Tap="HubTile_Tap" Source="/Assets/Elmo.jpg" Background="Green" Notification="Flipped" DisplayNotification="True" Title="Flipped"/>
	<toolkit:HubTile HorizontalAlignment="Left" Margin="236,385,0,0" VerticalAlignment="Top" Message="Collapsed" Size="Medium" Tap="HubTile_Tap" Source="/Assets/Elmo.jpg" Notification="Collapsed" DisplayNotification="True" Title="Collapsed"/>
	</Grid>
	</Grid>
	</phone:PhoneApplicationPage>

view raw HubtileStates.xaml hosted with ❤ by GitHub

	using System.Windows;
	using Microsoft.Phone.Controls;
	namespace HubtileStates
	{
	public partial class MainPage : PhoneApplicationPage
	{
	public MainPage()
	{
	InitializeComponent();
	}
	private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
	{
	HubTile tile = sender as HubTile;
	switch (tile.Message)
	{
	case "Expanded":
	VisualStateManager.GoToState(tile, "Expanded", true);
	break;
	case "Semiexpanded":
	VisualStateManager.GoToState(tile, "Semiexpanded", true);
	break;
	case "Flipped":
	VisualStateManager.GoToState(tile, "Flipped", true);
	break;
	case "Collapsed":
	VisualStateManager.GoToState(tile, "Collapsed", true);
	break;
	}
	}
	}
	}

view raw HubtileStates.cs hosted with ❤ by GitHub