TiltEffect on TextBlock

Question

I am using TiltEffect provided by Microsoft. I am trying to use it with TextBlocks , however it does not work even if I add the TextBlock type to the list of Tiltable elements:

TiltEffect.TiltableItems.Add( typeof( System.Windows.Controls.TextBlock ) ); 

However, if I surround the TextBlock with a Border and move the Tap event to the border, it works correctly.

Are there any specific reasons for this behavior? It's not too elegant to surround all my hidden text boxes with borders.

UPDATE: The same applies to the shape of the rectangle.

UPDATE2: My current solution is a workaround, I defined a user control:

 <UserControl x:Class="MyApp.Controls.TiltableTextBlock" Name="tiltableTextBlock" ...> <Button Margin="0" Padding="0"> <Button.Template> <ControlTemplate> <TextBlock Margin="0" Padding="0" Text="{Binding Text, ElementName=tiltableTextBlock}" Style="{Binding Style, ElementName=tiltableTextBlock}" /> </ControlTemplate> </Button.Template> </Button> </UserControl> 

And in the code behind:

 public partial class TiltableTextBlock : UserControl { public TiltableTextBlock() { InitializeComponent(); } public string Text { get { return (string)GetValue( TextProperty ); } set { SetValue( TextProperty, value ); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register( "Text", typeof( string ), typeof( TiltableTextBlock ), new PropertyMetadata( String.Empty ) ); //NOTE: hiding the Style property of the base class, so the Style does not get applied to the UserControl, rather to the TextBlock. public new Style Style { get { return (Style)GetValue( StyleProperty ); } set { SetValue( StyleProperty, value ); } } public new static readonly DependencyProperty StyleProperty = DependencyProperty.Register( "Style", typeof( Style ), typeof( TiltableTextBlock ), new PropertyMetadata( new Style( typeof( TextBlock ) ) ) ); } 

Currently, I am not using any other TextBlock-specific property, just Text, so if TextWrapping, FontSize, etc. is required, it should be implemented in the same way.

However, I am not satisfied with this solution, so they are still looking for a more elegant workaround.

UPDATE3: the above approach is not perfect, I found that it is non-deterministically crashing with the “wrong parameter” exception (sometimes it occurs after the application starts, sometimes not).

Answer 1

I was not happy with the tilt effect of the Silverlight tool, especially the way it is “magically” applied to type-based elements. So I wrote an alternative. You can also adjust how much “tilt” you want to apply. Source code can be found here:

Metro in motion Part number 4: The effect of tilt

Then you can individually apply the tiles to the elements as follows:

 <TextBlock local:MetroInMotion.Tilt="6"/> 

In cases where an integer indicates how much slope is applied. I would recommend using rather low values, the intrinsic effect is rather subtle, however people are usually too extreme in their own silerlight applications, the Metro effects should be subtle, they should not yell at you!

Answer 2

If anyone else comes across this, I have another solution.

Just insert a TextBlock element with ListBoxItem tags.

eg.

 <ListBoxItem> <TextBlock> A Tilting Textblock </TextBlock> </ListBoxItem> 

Answer 3

If you want TiltEfect to probably mean that you use it as a button, you should just use a button or a hyperlink so that you only display text. This way you can take advantage of additional button properties, such as Command. Here is an example of a Style hyperlink button:

 <Style x:Key="NoUnderlineHyperlinkButtonStyle" TargetType="HyperlinkButton"> <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Padding" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="HyperlinkButton"> <Border Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Pressed"> <!--<Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard>--> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border Background="{TemplateBinding Background}" Margin="{StaticResource PhoneHorizontalMargin}" Padding="{TemplateBinding Padding}"> <TextBlock x:Name="TextElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> 

which you can use:

 <HyperlinkButton Style="{StaticResource NoUnderlineHyperlinkButtonStyle}" Content="My Text" Tap="UIElement_OnTap"/>