|
In this article I will discuss about the Hubtile crontrol in Window Phone 7. Hubtile comes along with Silverlight Windows Phone Toolkit. Hubtile basically is animated tile which can contain text as well as image.
Let's see how we can use Hubtile.
Download Silverlight Windows Phone Toolkit
Step 1: Create a silverlight for Windows Phone project.
Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll
Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Step 4: Add 6 Hubtile controls inside ContentPanel grid of MainPage.xaml.
First Tile: We can set the color of tile using Background. The background of first tile is Maroon marked in bold.
Second Tile: The second tile is basic tile with Title and Message. The first and second tile has GroupTag and it is grouped with name Deserts. We will discuss the use of GroupdTag in later section of this article.
Third, Fourth and Fifth Tile: All these three tiles are same with Title, message and source property. Source property is used to set the image source.
Sixth Tile: It doesn't contain Title and Message. It has only source to add image. If title and message are not set, the tile won't animate.
<toolkit:HubTile Title="UnFreezed Title" Margin="-250, -400, 0, 0" Background="Maroon" x:Name="hubTile1" GroupTag="Deserts" />
<toolkit:HubTile Title="UnFreezed Title" Margin="120, -400, 0, 0" Message="My Hubtile!" x:Name="hubTile2" GroupTag="Deserts"/>
<toolkit:HubTile Title="Desert 1" Message="Yummy Desert1!" Source="/images/Desert1.png" Margin="-250, 0, 0,0 " />
<toolkit:HubTile Title="Desert 2" Message="Yummy Desert2!" Source="/images/Desert2.png" Margin="120, 0, 0,0 " />
<toolkit:HubTile Title="Desert 3" Message="Yummy Desert3!" Source="/images/Desert3.png" Margin="-250, 380, 0,0 " />
<toolkit:HubTile Title="Desert 4" Message="Yummy Desert4!" Source="/images/Desert4.png" Margin="120, 380, 0,0 " />
Step 5: Add application bar with two buttons which will freeze and unfreeze hubtiles.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Click="Freeze_Click" Text="Freeze"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Click="UnFreeze_Click" Text="UnFreeze"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Step 6: Add below code in the codebehind of MainPage.xaml.cs Freeze_Click will stop the animation of hubtile and UnFreeze_Click will start the animation of hubtile. We can freeze and unfreeze the groupd of tiles by singe statement if the hubtiles are grounped using GroupTag.
private void Freeze_Click(object sender, EventArgs e)
{
HubTileService.FreezeGroup("Deserts");
hubTile1.Title = "Freezed Tile";
hubTile2.Title = "Freezed Tile";
}
private void UnFreeze_Click(object sender, EventArgs e)
{
HubTileService.UnfreezeGroup("Deserts");
hubTile1.Title = "UnFreezed Tile";
hubTile2.Title = "UnFreezed Tile";
}
One can freeze single hubtile using FreezeHubTile method of HubTileService by pass hubtile name.
HubTileService.FreezeHubTile(this.hubTile1);
and to unfreeze the single hubtile, UnfreezeHubTile is used.
HubTileService.UnfreezeHubTile(this.hubTile1);
While animating when there is no image is set on hubtile, you will get hubtile shown in below image in between which is completely unreadable. 
As per my view hubtile needs to be improved in this prospect.
This ends the first part of Windows Phone HubTile.
|