Set DoubleAnimation with Binding to an external object

516 Views Asked by At

I have the following Style that contains an animation used to expand a Border:

<Style TargetType="{x:Type Border}" x:Key="BorderAnimations">
    <Setter Property="FlowDirection" Value="RightToLeft" />
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation
                        Storyboard.TargetProperty="Width"
                        BeginTime="0:0:0"
                        From="" To="420" Duration="0:0:0.2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation
                        Storyboard.TargetProperty="Width"
                        BeginTime="0:0:0"
                        From="420" To="90" Duration="0:0:0.2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

I want to set the From property to the generics' button Width. Here I have the generic Button style:

 <Style TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="80" />
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="{DynamicResource MainBlue}" />
    <Setter Property="Height" Value="{Binding 
                ElementName=MainUCPanel, Path=Height, 
                Converter={StaticResource ArithmeticConverter}, 
                ConverterParameter=Int32.Parse(values[0]) / 6}" />
    <Setter Property="Width" Value="{Binding Path=Height, RelativeSource={RelativeSource Self}}" />
    <Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type view:DesktopUCMain}}, Path=DataContext}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" CornerRadius="5" x:Name="bd">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand" />
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#FF1E90FF" Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#27ace3" Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

I've tried to set it as:

From="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=ActualWidth}"

But it's not working...

NOTE: these styles are located on a ResourceDictionary.xaml. How can I achieve the animation to get this width?

EDIT: Thrown exception:

Cannot freeze this Storyboard timeline tree for use across threads.
0

There are 0 best solutions below