In WPF, how do I bind changeable values from codebehind into animation in XAML?

Question

0.00/5 (No votes)

See more:

The wanted state is like this:
There are notoverlaping containers (Borders) placed together on common canvas. When choosen Border is leftclicked, it is zoomed-in by animation and all other Borders are zoomed-out/moved at the same time. All Borders are fluently animated to new position/size from its last position/size.
When any Border is rightclicked, all Borders are animated (returned) to default place/size.
After the clicking on any Border, there is in codebehind defined different set of place/size values for each Border to finaly reach. Those new values are (should be) passed/binded to animation.

I am new in WPF and the state I have reached for this task is this:
Any first click in any Border right after the program starts will do the wanted animated place/size change. But any other followed clicks just repeats the first same again without CHANGING the values defined in codebehind after click event. More over, even this first FINAL positions/sizes are animated correctly, but the INITIAL values comes from "outthere"(behinscreen) like the animation is not reading the "ActualValues" from Borders.

I am not searching for better other solution using Wrappanel or using Styles. I am searching for solution how to pass dynamicaly changeable values from codebehind into XAML defined animation.

What I have tried:

This is simplified example of WPF:

Imports System.Windows.Media.Animation

Public Class Window_NAS_HVZ

    Public Property Border1_Wid As Double
    Public Property Border1_Hgh As Double
    Public Property Border1_Top As Double
    Public Property Border1_Left As Double
    Public Property Border2_Wid As Double
    Public Property Border2_Hgh As Double
    Public Property Border2_Top As Double
    Public Property Border2_Left As Double
    Public Property Border3_Wid As Double
    Public Property Border3_Hgh As Double
    Public Property Border3_Top As Double
    Public Property Border3_Left As Double

    Public Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Loaded
        DataContext = Me
    End Sub

    Public Sub Zoom_SIZE_default_Click(sender As Object, e As RoutedEventArgs)
        Border1_Wid = 400 : Border1_Hgh = 200 : Border1_Top = 20 : Border1_Left = 50
        Border2_Wid = 400 : Border2_Hgh = 200 : Border2_Top = 240 : Border2_Left = 50
        Border3_Wid = 400 : Border3_Hgh = 200 : Border3_Top = 460 : Border3_Left = 50
        BeginStoryboard(TryCast(FindResource("Borders_Resize"), Storyboard))
    End Sub

    Public Sub Zoom_SIZE_1_Click(sender As Object, e As RoutedEventArgs)
        Border1_Wid = 400 : Border1_Hgh = 500 : Border1_Top = 20 : Border1_Left = 50
        Border2_Wid = 200 : Border2_Hgh = 50 : Border2_Top = 540 : Border2_Left = 150
        Border3_Wid = 200 : Border3_Hgh = 50 : Border3_Top = 610 : Border3_Left = 150
        BeginStoryboard(TryCast(FindResource("Borders_Resize"), Storyboard))
    End Sub

    Public Sub Zoom_SIZE_2_Click(sender As Object, e As RoutedEventArgs)
        Border1_Wid = 200 : Border1_Hgh = 50 : Border1_Top = 20 : Border1_Left = 150
        Border2_Wid = 400 : Border2_Hgh = 500 : Border2_Top = 90 : Border2_Left = 50
        Border3_Wid = 200 : Border3_Hgh = 50 : Border3_Top = 610 : Border3_Left = 150
        BeginStoryboard(TryCast(FindResource("Borders_Resize"), Storyboard))
    End Sub
    Public Sub Zoom_SIZE_3_Click(sender As Object, e As RoutedEventArgs)
        Border1_Wid = 200 : Border1_Hgh = 50 : Border1_Top = 20 : Border1_Left = 150
        Border2_Wid = 200 : Border2_Hgh = 50 : Border2_Top = 90 : Border2_Left = 150
        Border3_Wid = 400 : Border3_Hgh = 500 : Border3_Top = 160 : Border3_Left = 50
        BeginStoryboard(TryCast(FindResource("Borders_Resize"), Storyboard))
    End Sub

End Class

And this is its XAML:

<Window x:Class="Window_NAS_HVZ"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="600" Height="800"  
        DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Window.Resources>
        <Storyboard x:Key="Borders_Resize">
            <DoubleAnimation Storyboard.TargetName="BORDER_1" Storyboard.TargetProperty="(Border.Height)" Duration="0:0:0.2" From="{Binding ActualHeight}" To="{Binding Path=Border1_Hgh}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_2" Storyboard.TargetProperty="(Border.Height)" Duration="0:0:0.2" From="{Binding ActualHeight}" To="{Binding Path=Border2_Hgh}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_3" Storyboard.TargetProperty="(Border.Height)" Duration="0:0:0.2" From="{Binding ActualHeight}" To="{Binding Path=Border3_Hgh}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_1" Storyboard.TargetProperty="(Border.Width)" Duration="0:0:0.2" From="{Binding ActualWidth}" To="{Binding Path=Border1_Wid}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_2" Storyboard.TargetProperty="(Border.Width)" Duration="0:0:0.2" From="{Binding ActualWidth}" To="{Binding Path=Border2_Wid}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_3" Storyboard.TargetProperty="(Border.Width)" Duration="0:0:0.2" From="{Binding ActualWidth}" To="{Binding Path=Border3_Wid}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_1" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Top}" To="{Binding Path=Border1_Top}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_2" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Top}" To="{Binding Path=Border2_Top}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_3" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Top}" To="{Binding Path=Border3_Top}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_1" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Left}" To="{Binding Path=Border1_Left}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_2" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Left}" To="{Binding Path=Border2_Left}"/>
            <DoubleAnimation Storyboard.TargetName="BORDER_3" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.2" From="{Binding Actual.Canvas.Left}" To="{Binding Path=Border3_Left}"/>
        </Storyboard>
    </Window.Resources>
  
    <Grid >
        <Viewbox >
            <Canvas  Background="White" Width="500" Height="680">
                <Border  x:Name="BORDER_1" Width="400"  Height="200" Background="Green"  Canvas.Left="50"  Canvas.Top="20" 
                         MouseLeftButtonDown ="Zoom_SIZE_1_Click"
                         MouseRightButtonDown ="Zoom_SIZE_default_Click"
                         Opacity="0.5">
                </Border>

                <Border  x:Name="BORDER_2" Background="Red" Width="400"  Height="200"  Canvas.Left="50"  Canvas.Top="240"
                         MouseLeftButtonDown ="Zoom_SIZE_2_Click"
                         MouseRightButtonDown ="Zoom_SIZE_default_Click"
                         Opacity="0.5">
                </Border>

                <Border  x:Name="BORDER_3" Background="Blue"  Width="400"  Height="200"  Canvas.Left="50" Canvas.Top="460"
                         MouseLeftButtonDown ="Zoom_SIZE_3_Click"
                         MouseRightButtonDown ="Zoom_SIZE_default_Click"
                         Opacity="0.5" >
                </Border>
            </Canvas>
        </Viewbox>
    </Grid>
</Window>

Here is a picture of wanted state:
http://www.z7h.sk/resizedborders.jpg
1 - default position (after rightclick)
2 - after leftclick on the top Border
3 - after leftclick on the mid Border
4 - after leftclick on the low Border

Posted 19-Jun-23 6:43am

tb0rg

Add a Solution

Comments

[no name] 19-Jun-23 13:21pm

If you're binding to class properties, and updating those properties, you need to implement INotifyPropertyChanged if you want the "binding engine" (i.e. your "to" animations) to recognize your changes.

tb0rg 20-Jun-23 9:02am

Thank you Garry! Searching for how and where to Implement INotifyPropertyChanged helped me.
Now, accordingly to which Border is clicked, the different values are read and FINAL animation places/sizes are correct.
But still, the INITIAL values of place/size of Borders in the animation (...From="{Binding ActualWidth}...") are "ignored". Animation still starts from values "out of screen".
Is there another good hint to share with me :)

tb0rg 20-Jun-23 16:01pm

Changing ...From="{Binding ActualHeight}... to ...From="{Binding Actual.BORDER_1.Height}..." will do the needed magic.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)