Grid- Animation => From Left to Right

Hi,
ich würde gerne per Button Click Event ein Grid sichtbar machen und wenn dies sichtbar ist dann eine Grid Animation starten (Grid from Left to Right).
Und wenn der Button erneut geklickt wird dann Close Grid from Right to left.

Ich habe schon viel rumgespielt, aber bin unfähig und brauche eure Hilfe. ^^

Ich benutze im Canvas einen EventTrigger, den benutze icch bei Loaded, aber so wird nur einmal die Animation ausgeführt bei der Init und nicht immer. Und außerdem hat der Code so keine wirkliche
Funktionalität zum Button Click Event.
Das mit der Visibility ist eh Blödsinn oder nicht?Brauche ja nur den Button Click?.
Die Funktionalität wie im Absatz oben beschrieben möchte ich gerne haben.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="Grid Silding Test" FontSize="20"/>
        <Button Grid.Row="1" Content="Start Animation" Width="Auto" HorizontalAlignment="Left" Click="Button_Click"></Button>
        <Grid Grid.Row="2" x:Name="Grid1" HorizontalAlignment="Left">
            <Canvas Grid.Row="2" Background="Transparent" x:Name="canvas" Width="250" >
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Canvas.Loaded"> 
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
                                                                     Storyboard.TargetProperty="(Canvas.Left)"
                                                                     From="-250" To="0" Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>

                    </EventTrigger>
                </Canvas.Triggers>
                <Grid Name="ControlsGrid" Canvas.Left="-250" Height="{Binding ElementName=canvas, Path=ActualHeight}" Width="{Binding ElementName=canvas, Path=ActualWidth}" Background="Red">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="I'm a Grid......" />
                </Grid>
            </Canvas>
        </Grid>   
    </Grid>

 public MainWindow()
        {
            InitializeComponent();

            Grid1.Visibility = Visibility.Visible;
         }

  private void Button_Click(object sender, RoutedEventArgs e)
        {
            Grid1.Visibility = Grid1.Visibility == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed;
        }

Beste Grüße

<EventTrigger RoutedEvent="Canvas.Loaded">

Dein Trigger wird einmalig beim Loaded-Event der Canvas ausgelöst. Dort sollte wohl eher das Click-Event von deinem Button verwendet werden. Siehe dazu auch die Beispiele und die Anmerkungen in der Doku der EventTrigger.RoutedEvent-Eigenschaft.

Hi,
danke für die Antwort.

Ist das der richtige Weg?

    <Button x:Name="btn" Grid.Row="1" Content="Start Animation" Width="Auto" HorizontalAlignment="Left"/>


  <EventTrigger RoutedEvent="Button.Click" EventTrigger.SourceName="btn">

Naja, leider kann kein "FrameworkElement" mit dem Namen "btn" gefunden werden.
Was fehlt noch?

Schau dir doch bitte mal das Beispiel in der verlinkten Doku zum EventTrigger an.

Auch die Doku zu EventTrigger.SourceName ist eindeutig:

You can set this property to the name of any element within the scope of where the trigger collection (the collection that this EventTrigger is part of) is applied.

Dein Button wird außerhalb des Scopes liegen.