TiltEffect on TextBlock

Question

I am using the TiltEffect util 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 items:

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 properly.

Is there any specific reason to this behaviour? It isn't too elegant to surround all my tappable TextBlocks with Borders.

UPDATE: The same applies to the Rectangle shape.

UPDATE2: My current solution is a workaround, I defined a custom 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 ) ) ) );
}

I currently do not use any other TextBlock-specific property, just Text, so if TextWrapping, FontSize, etc is needed, it has to be implemented in the same way.

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

UPDATE3: The above approach is not perfect, I found out that it nondeterministically crashes with a "parameter is incorrect" Exception (sometimes it is thrown after I start the application, sometimes not).

Answer 1

I was not happy with the Silverlight toolkit tilt effect, especially the way that it is'magically' applied to elements based on type. So I wrote an alternative. You can also configure how much 'tilt' you want to apply. The sourcecode can be found here:

Metro in Motion Part #4: Tilt Effect

You can then individually apply tile to elements as follows:

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

Where the integer specifies how much tilt to apply. I would recommend using quite low values, the native effect is quite subtle, however people tend to make it far too extreme in their own silerlight applications, Metro effects should be subtle, they should not shout at you!

Answer 2

In case somebody else comes across this, I have another solution.

Just enclose the TextBlock element with ListBoxItem tags.

e.g.

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