Style of RadHubTile control ?

3 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    May 2012

    Posted 21 Sep 2013 Link to this post

    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

  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 23 Sep 2013 Link to this post

    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
  3. DevCraft banner
  4. Todor
    Admin
    Todor avatar
    778 posts

    Posted 26 Sep 2013 Link to this post

    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 >>
Back to Top