This question is locked. New answers and comments are not allowed.
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
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 Answers, 1 is accepted
0
MasterChiefMasterChef
Top achievements
Rank 2
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:
And this could be the implementation of the tap event, cycling through 4 different colors:
Hope this helps,
Master Chief
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
0
Hello Benjamin,
Here's the default style of RadHubTile:
You will need the following namaspaces:
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
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 >>
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 >>