Style of RadHubTile control ?

[Benjamin]

Hello,

I wanna make an effect when user press a tile (not only the tilteffect, but a 'change color' effect).
So, I've tried to make a copy of the style (to change the visualstate "pressed") but i don't know why, i can't get the style.

Can you give me it ?

Thanks and sorry for my bad English,

Benjamin

[MasterChiefMasterChef]

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

[Todor]

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