XAML Animasyon menü örneği



 <Canvas MouseDown="CommonClickHandler">
        <Rectangle x:Name="menu1" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50" Fill="Bisque" Stroke="Red" StrokeThickness="2" MouseLeave="menu1_MouseLeave">
         
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="story1">
                            <DoubleAnimation  Storyboard.TargetName="menu1"   Storyboard.TargetProperty="(Canvas.Left)"  From="10" To="200" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu1"   Storyboard.TargetProperty="Height"  From="10" To="30" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu1"   Storyboard.TargetProperty="Width"  From="10" To="50" Duration="0:0:2"/>
                            <DoubleAnimation    Storyboard.TargetName="menu1"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:2"         />
                            </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard x:Name="story2">
                            <DoubleAnimation    Storyboard.TargetName="menu1"    Storyboard.TargetProperty="Opacity"   From="0.2" To="1.0" Duration="0:0:2"         />
                       </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard x:Name="story3">
                            <DoubleAnimation    Storyboard.TargetName="menu1"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

        <Rectangle x:Name="menu2" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50" Fill="Bisque" Stroke="Red" StrokeThickness="2" MouseLeave="menu1_MouseLeave">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="story21">
                            <DoubleAnimation  Storyboard.TargetName="menu2"   Storyboard.TargetProperty="(Canvas.Left)"  From="10" To="150" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu2"   Storyboard.TargetProperty="Height"  From="10" To="30" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu2"   Storyboard.TargetProperty="Width"  From="10" To="50" Duration="0:0:2"/>
                            <DoubleAnimation    Storyboard.TargetName="menu2"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard x:Name="story22">
                            <DoubleAnimation    Storyboard.TargetName="menu2"    Storyboard.TargetProperty="Opacity"   From="0.2" To="1.0" Duration="0:0:2"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard x:Name="story23">
                            <DoubleAnimation    Storyboard.TargetName="menu2"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
        <Rectangle x:Name="menu3" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50" Fill="Bisque" Stroke="Red" StrokeThickness="2" MouseLeave="menu1_MouseLeave">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="story31">
                            <DoubleAnimation  Storyboard.TargetName="menu3"   Storyboard.TargetProperty="(Canvas.Left)"  From="10" To="100" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu3"   Storyboard.TargetProperty="Height"  From="10" To="30" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu3"   Storyboard.TargetProperty="Width"  From="10" To="50" Duration="0:0:2"/>
                            <DoubleAnimation    Storyboard.TargetName="menu3"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard x:Name="story32">
                            <DoubleAnimation    Storyboard.TargetName="menu3"    Storyboard.TargetProperty="Opacity"   From="0.2" To="1.0" Duration="0:0:2"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard x:Name="story33">
                            <DoubleAnimation    Storyboard.TargetName="menu3"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
        <Rectangle x:Name="menu4" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50" Fill="Bisque" Stroke="Red" StrokeThickness="2" MouseLeave="menu1_MouseLeave">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="story41">
                            <DoubleAnimation  Storyboard.TargetName="menu4"   Storyboard.TargetProperty="(Canvas.Left)"  From="10" To="50" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu4"   Storyboard.TargetProperty="Height"  From="10" To="30" Duration="0:0:2"/>
                            <DoubleAnimation  Storyboard.TargetName="menu4"   Storyboard.TargetProperty="Width"  From="10" To="50" Duration="0:0:2"/>
                            <DoubleAnimation    Storyboard.TargetName="menu4"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard x:Name="story42">
                            <DoubleAnimation    Storyboard.TargetName="menu4"    Storyboard.TargetProperty="Opacity"   From="0.2" To="1.0" Duration="0:0:2"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard x:Name="story44">
                            <DoubleAnimation    Storyboard.TargetName="menu4"    Storyboard.TargetProperty="Opacity"   From="1.0" To="0.2" Duration="0:0:0.7"         />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>


   private void CommonClickHandler(object sender, RoutedEventArgs e)
        {
            FrameworkElement feSource = e.Source as FrameworkElement;
            switch (feSource.Name)
            {
                case "menu1":
                    // do something here ...
                    MessageBox.Show("menu1");
                    break;
                case "menu2":
                    // do something ...
                    MessageBox.Show("menu2");
                    break;
                case "menu3":
                    // do something ...
                    MessageBox.Show("menu3");
                    break;
                case "menu4":
                    // do something ...
                    MessageBox.Show("menu4");
                    break;
            }
            e.Handled = true;
        }

Yorumlar