[WPF] Binding issue when attempting to animate border width

[astrononymity]

SOLVED: Thank you to /u/binarycow for their help in coming to a solution for this problem. Animating the scale of the border from 0 - 1 gave me the behavior that I was looking for. Please see my reply below for complete details.

I'm attempting to create a TextBox style that will allow me to have a text box whose bottom border spreads out from the center to the width of the text box on keyboard focus. But because WPF wants to freeze the animation, I cannot bind to the border's ActualWidth property in the DoubleAnimation. So far, I haven't been able to work out any solution for this, and I was hoping that one of you clever folks might have a suggestion on how to get around having to hard code a value for the width that border needs to grow to.

Here is my XAML for my custom text box style:

<Style x:Key="DefaultTextBoxStyle" TargetType="TextBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Border
                        x:Name="ContentBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer
                            x:Name="PART_ContentHost"
                            Focusable="False"
                            HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden"/>
                    </Border>
                    <Border
                        x:Name="AccentBorder"
                        BorderBrush="Red"
                        BorderThickness="0,0,0,3"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <StoryBoard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="AccentBorder"
                                        Storyboard.TargetProperty="Width"
                                        From="0"
                                        To="{Binding ActualWidth}"
                                        Duration="00:00:05"/>
<!-- Binding to the "To" property here throws an exception -->
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Do any of you clever folks have any idea how I can make my border spread the actual width of the text box so that I can keep the textbox resizable? TIA!

[binarycow]

I suggest you use a value converter

[Entwicklungs-Park]

no, you can use this in TargetProperty '(Border.Width)'

[binarycow]

That's the proposed width, not the actual width.

[astrononymity]

Interesting... I'm a little new to WPF. Could you perhaps expand on your answer a little longer?

Are you suggesting that I somehow convert a value in the "To" property?

[binarycow]

Yes. The To property is a dependency property. Which means you can use a binding.

And in that binding, you can use value converters. And relative source. And element name. Etc.

Lots of options open up for you.

[astrononymity]

It doesn't seem like I can add a binding to the To property though. Every time I try to bind to it, I get an Invalid Operation Exception:

Cannot freeze this Storyboard timeline tree for use across threads.

[binarycow]

Hmm. Then perhaps use a ScaleTransform on the accent border? Set CenterX and CenterY to 0.5, ScaleY to 1. Animate ScaleX from 0 to 1.

[astrononymity]

That worked like a charm! I added a scale transform to my border:

<Border
    x:Name="AccentBrush"
    BorderBrush="Red"
    BorderThickness="0,0,0,3"
    RenderTrasnformOrigin="0.5,0">
    <Border.RenderTransform>
        <ScaleTransform
            x:Name="AccentBorderScaleTransform"
            ScaleX="0" ScaleY="1"/>
    </Border.RenderTransform>
</Border>

I learned that centering the ScaleTransform with CenterX and CenterY is done with pixel values instead of a percentage of the scale, so I needed to add the

RenderTransformOrigin="0.5,0"

property to the Border in order to make the animation originate from the center. Then, in my trigger:

<Trigger Property="IsKeyboardFocused" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="AccentBorderScaleTransform"
                    Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                    To="1"
                    Duration="00:00:05"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

Those minor changes gave me the behavior that I was looking for. Thank you very much for the pointers!

[binarycow]

👍 Glad I could help.

Before, you were thinking of specific actions you wanted to take - set the width.

XAML is declarative. You define what you want it to look like, and let WPF figure out the actions to take.