This is a migrated thread and some comments may be shown as answers.

[Solved] Style of RadHubTile control ?

2 Answers 146 Views

HubTile

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

2 Answers, 1 is accepted

answered on 23 Sep 2013, 07:02 PM

Hi Benjamin,

If you are trying to change the background of a RadHubTile when clicked by the user, you could implement the tap event of the HubTile and in it, change the tile's background property.

This is the XAML:

<Controls:RadHubTile Name="telerikTile" ImageSource="/Images/anyImage.png" Message="Tile Text" Tap="colorChange"/>

And this could be the implementation of the tap event, cycling through 4 different colors:

int colorCount = 0; //colors for hub tile!

private void colorChange(object sender, GestureEventArgs e)

{

//Cycles through 4 colors on the RadHubTile

switch (colorCount)

{

case 0:

telerikTile.Background = new SolidColorBrush(Color.FromArgb(255, 0, 255, 255));

break;

case 1:

telerikTile.Background = new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));

break;

case 2:

telerikTile.Background = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));

break;

case 3:

telerikTile.Background = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));

colorCount = -1;

break;

}

colorCount++;

}

Hope this helps,
Master Chief

answered on 26 Sep 2013, 06:28 AM

Hello Benjamin,

Here's the default style of RadHubTile:

<Style x:Key="BaseHubTileStyle"

TargetType="telerikPrimitives:HubTileBase">

<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>

<Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled"

Value="True"/>

<Setter Property="Width"

Value="171"/>

<Setter Property="Height"

Value="171"/>

<Setter Property="Margin"

Value="5"/>

<Setter Property="Foreground"

Value="White"/>

</Style>

<Style x:Key="HubTileStyle" TargetType="telerikPrimitives:RadHubTile"

BasedOn="{StaticResource BaseHubTileStyle}">

<Setter Property="Padding"

Value="12"/>

<Setter Property="FontSize"

Value="50"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikPrimitives:RadHubTile">

<Grid x:Name="PART_LayoutRoot">

<VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup>

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition From="NotFlipped"

To="Flipped">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="FrontProjection"

Duration="0:0:0.4"

From="0"

To="90"/>

<DoubleAnimation Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="BackProjection"

Duration="0:0:0.4"

BeginTime="0:0:0.4"

From="-90"

To="0"/>

</Storyboard>

</vsm:VisualTransition>

<vsm:VisualTransition From="Flipped"

To="NotFlipped">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="FrontProjection"

Duration="0:0:0.4"

BeginTime="0:0:0.4"

From="-90"

To="0"/>

<DoubleAnimation Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="BackProjection"

Duration="0:0:0.4"

From="0"

To="90"/>

</Storyboard>

</vsm:VisualTransition>

</vsm:VisualStateGroup.Transitions>

<VisualState x:Name="Flipped">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="FrontProjection">

<DiscreteDoubleKeyFrame KeyTime="0"

Value="90"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="BackProjection">

<DiscreteDoubleKeyFrame KeyTime="0"

Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="NotFlipped">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="FrontProjection">

<DiscreteDoubleKeyFrame KeyTime="0"

Value="0"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"

Storyboard.TargetName="BackProjection">

<DiscreteDoubleKeyFrame KeyTime="0"

Value="-90"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</vsm:VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Border Background="{TemplateBinding Background}"

BorderThickness="0"

x:Name="PART_Background">

<StackPanel Orientation="Horizontal"

HorizontalAlignment="Center">

<Image Source="{TemplateBinding ImageSource}"

Stretch="None"/>

<ContentControl x:Name="PART_Notification"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Content="{TemplateBinding Count}"

FontStretch="{TemplateBinding FontStretch}"

FontStyle="{TemplateBinding FontStyle}"

FontWeight="{TemplateBinding FontWeight}"

FontFamily="{TemplateBinding FontFamily}"

FontSize="{TemplateBinding FontSize}"

Margin="8, 0, 0, 0"/>

</StackPanel>

</Border>

<ContentControl x:Name="PART_Message"

HorizontalAlignment="Left"

VerticalAlignment="Top"

FontSize="{StaticResource PhoneFontSizeNormal}"

Content="{TemplateBinding Message}"

Margin="{TemplateBinding Padding}"/>

<ContentControl x:Name="PART_Title"

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

FontSize="{StaticResource PhoneFontSizeNormal}"

Content="{TemplateBinding Title}"

Margin="{TemplateBinding Padding}"/>

<Grid.Projection>

<PlaneProjection x:Name="FrontProjection"/>

</Grid.Projection>

</Grid>

<ContentControl FontSize="{StaticResource PhoneFontSizeNormal}"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch">

<ContentPresenter x:Name="PART_BackContent"

Content="{TemplateBinding BackContent}"

ContentTemplate="{TemplateBinding BackContentTemplate}">

<ContentPresenter.Projection>

<PlaneProjection x:Name="BackProjection"/>

</ContentPresenter.Projection>

</ContentPresenter>

</ContentControl>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

You will need the following namaspaces:

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

However, you will notice that there is no "pressed state", which you can use to alter the Background. You can change it by using Master Cheif's suggestion.

Let us know if you need further help.

Regards,
Todor
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>