WPF-Animation: Koordinaten dynamisch in TextBox ausgeben

Anksunamun

Hi,

ich steige gerade um von WinForms auf WPF und hätte eine Frage zu Animationen.
In eine Textbox gebe ich eine Soll-Koordinate ein und drücke einen Button um die Animation zu starten. Während der Animation (bewegtes Rechteck) soll in einer anderen TextBox die Ist-Position dynamisch angezeigt werden. Wie macht man das am besten?

Grüsse

KPC

Hi,

du solltest die Text Eigenschaft der Textbox direkt an die X-Property des Rechtecks binden können. Ungetestet:

<TextBox Text={Binding X, ElementName=NameOfRectangle} />

Alternativ kannst du auch die X-Koordinate des Rechtecks an eine Property des Viewmodels binden und damit zwischenspeichern und dann die TextBox an diese Property binden.

mfG
KaPtainCugel

Anksunamun

Hi KPC,

erstmal Danke für die Antwort.

Es scheint aber leider so zu sein, dass unter WPF graphische Objekte keine X- oder Y-Property mehr haben, sondern die Position nur noch über den Abstand zum Rahmen bestimmt wird.

Ich habe es erstmal ohne Canvas mit dieser Bindung versucht:

Binding bindung = new Binding("Margin.Left");
bindung.ElementName = "Rechteck";
txtIstwert.SetBinding(TextBox.TextProperty, bindung);

Dann mal mit Canvas so:

Binding bindung = new Binding("Canvas.Left");

In beiden Fällen bleibt die Ausgabe bei Null (Startwert vor der Animation).
Ich such schon die ganze Zeit aber finde keine Property die den Abstand während der Animation anzeigt

Beim Ausführen der Animation

translation.BeginAnimation(TranslateTransform.XProperty, doubleanimation);

müsste ich irgendwie an die "XProperty" rankommen, weiss aber nicht wie.

Grüsse

KPC

Hi,

probier es mal mit dem folgenden Code, vielleicht hilft dir das weiter:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Margin="15">
            <Button>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="0" To="400" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="rect" Duration="0:0:10"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                </Button.Triggers>
                Animiere
            </Button>
            <TextBlock Margin="5,0,0,0" Text="Koordinate: " />
            <TextBlock Margin="5,0,0,0" Text="{Binding ElementName=rect, Path=(Canvas.Left)}" />
        </StackPanel>
        <Canvas Grid.Row="1" Margin="15">
            <Rectangle x:Name="rect" Grid.Row="1" Fill="Aqua" Width="100" Height="100" Canvas.Left="0"/>
        </Canvas>
    </Grid>
</Window>

Anksunamun

@KPC,

ja, super, genau das brauche ich.
Mit XAML kenne ich mich leider gar nicht aus und wäre da auch überfordert das neben C# auch noch zu lernen. Ich versuche das Beispiel daher als C# Code zu adaptieren.

Anscheinend mus ich die Animation in ein Storyboard einbinden. Das klappt noch nicht und vielleicht kann mir Du oder wer anders da noch helfen.

Ich hab also einen Button "btnStart", ein Label "lblAusgabe" und ein Rectangle "Rechteck":

private void btnStart_Click(object sender, RoutedEventArgs e)
{
    Storyboard sb = new Storyboard();
    DoubleAnimation da = new DoubleAnimation(0, 200, TimeSpan.FromSeconds(5));
    TranslateTransform tt = new TranslateTransform();
    Rechteck.RenderTransform = tt;
    Storyboard.SetTarget(da, Rechteck);
    Storyboard.SetTargetName(da, Rechteck.Name);
    Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));

    // Binding für Koordinaten-Ausgabe
    Binding binding = new Binding();
    binding.Path = new PropertyPath("Canvas.Left");
    binding.ElementName = "Rechteck";
    lblAusgabe.SetBinding(TextBox.TextProperty, binding);

    // Animation starten
    //sb.Begin();
    tt.BeginAnimation(TranslateTransform.XProperty, da);
}

Ich glaube ich muss die Animation eigentlich mit sb.Beginn starten, aber das geht nicht. Irgendwas stimmt da am Storyboard nicht.

Grüsse

KPC

Hi,

der folgende Code funktioniert bei mir:

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();
            DoubleAnimation da = new DoubleAnimation(0, 200, TimeSpan.FromSeconds(5));

            TranslateTransform tt = new TranslateTransform();

            rect.RenderTransform = tt;
            Storyboard.SetTarget(da, rect);
            Storyboard.SetTargetName(da, rect.Name);
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
            sb.Children.Add(da);

            Binding binding = new Binding();
            binding.Path = new PropertyPath("(Canvas.Left)");
            binding.ElementName = "rect";
            lblAusgabe.SetBinding(TextBlock.TextProperty, binding);

            // Animation starten
            sb.Begin();
        }

Ich kann dir allerdings nur raten dir XAML anzugucken, das ist dort wesentlich einfacher und schöner lösbar!

Anksunamun

@KPC
Vieeeelen Dank, mir fällt ein Stein vom Herzen, jetzt kann ich endlich weitermachen

War ich ja schon nah dran, nur das children.add hat noch gefehlt. TextBlock ging bei mir nicht, aber mit TextBox geht's.

Und Du hast schon recht, langfristig werd ich um XAML wohl nicht rumkommen, vor allem weil die meisten WPF-Tipps im Netz im XAML-Format sind, da steht man als reiner C#-Coder etwas im Regen.

Grüsse