Question

I have a Listbox DataTemplate which looks like this

<DataTemplate> 
  <StackPanel Margin="0,24,0,24">
      <StackPanel toolkit:TiltEffect.IsTiltEnabled="true">
        <toolkit:ContextMenuService.ContextMenu>
           <toolkit:ContextMenu>
             <toolkit:MenuItem Header="Do something" />
             <toolkit:MenuItem Header="Do something else" />
           </toolkit:ContextMenu>
        </toolkit:ContextMenuService.ContextMenu>
        <TextBlock Text="Some content" />
        <TextBlock Text="Some text" />
    </StackPanel>
    <Image Source="{Binding Url}" />
  </StackPanel>
</DataTemplate>

I am setting the Tilt Effect on the StackPanel which contains a context menu and two TextBlocks. I want the Tilt Effect to only affect the StackPanel. Unfortunately, with things set up this way, the Tilt Effect propagates further and affects the Image as well.

I tried the obvious ways of using the TiltEffect.SupressTilt=”True” on the Image, but it has no effect. 🙁

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

With this code you can individually apply tilt to elements as follows:

<Button 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 Silverlight applications, Metro effects should be subtle, they should not shout at you!