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
Submit an article or tip