Add Color Animation to Mah:Tile

156 Views Asked by At

I'm Using MahApps.Metro and I'm using a Tile Element which Is loaded with namespace 'MahCtrl'( xmlns:MahCtrl="http://metro.mahapps.com/winfx/xaml/controls). I want to apply ColorAnimation to the Tile on MouseEnter and MouseLeave.

Here is the xaml snippet I am Currently working on.

<UserControl xmlns:MahCtrl="http://metro.mahapps.com/winfx/xaml/controls">
   <MahCtrl:Tile Cursor="Hand" Background="Transparent" Height="200" Width="210"HorizontalContentAlignment="Center">     
        <MahCtrl:Tile.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Duration="0:0:0.200"   
                                Storyboard.TargetProperty="(MahCtrl:Tile.Background).Color" 
                                To="#fffccc" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                  Duration="0:0:0.250"   
                                  Storyboard.TargetProperty="(MahCtrl:Tile.Background).Color" 
                                  To="#ffffff" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
       </MahCtrl:Tile.Triggers>
    </MahCtrl:Tile>
</UserControl>

In the debug section, When I Enter mouse into the Tile the following exception occurs

System.InvalidOperationException: 'Cannot resolve all property references in the property path '(0).Color'. Verify that applicable objects support the properties.'

I have tried Using (Background).Color and a lot of other combinations to StoryBoard.TargetProperty But this method works when MahCtrl:Tile element is wrapped with a stack panel and applying event triggers MouseEnter and MouseLeave triggers with target (StackPanel.Background).Color to the StackPanel. How can I target background property of MahCtrl:Tile

It would be a great help if someone can refer to a documentation regarding this topic

Thank you very much,

0

There are 0 best solutions below