You are animating the Width of a one-way bound property, so when animation kicks in, a new value is set in the property and the binding gets lost.
I suggest you use a
LayoutTransform to get that collapsing effect:
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<Style x:Key="collapsiblePanel_style_borderRight" TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0,10,10,0"/>
<Setter Property="BorderBrush" Value="#dd000000"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="0.5" CenterX="0.5"/>
<RotateTransform Angle="-90" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#CC051322"/>
<GradientStop Color="#66051322" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="collapsiblePanel_style_borderLeft" TargetType="{x:Type Border}" BasedOn="{StaticResource collapsiblePanel_style_borderRight}">
<Setter Property="CornerRadius" Value="10,0,0,10"/>
<Setter Property="BorderBrush" Value="#dd000000"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="-90" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#CC051322"/>
<GradientStop Color="#66051322" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="collapsiblePanel_brush_rightPanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="-90" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#CC051322" Offset="1"/>
<GradientStop Color="#33051322" Offset="0"/>
</LinearGradientBrush>
<Style x:Key="collapsiblePanel_style_arrowLeft" TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="40" />
<Setter Property="Height" Value="40" />
<Setter Property="Margin" Value="20,20" />
<Setter Property="Text" Value=">" />
<Setter Property="FontSize" Value="36" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
</Style>
<ControlTemplate x:Key="expanderTemplate" TargetType="Expander">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25" To="Expanded">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:0.25" To="Collapsed">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded" />
<VisualState x:Name="Collapsed" >
<Storyboard >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_collapsibleArea">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PART_collapsibleArea">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="PART_arrow">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="PART_collapsibleArea">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="PART_collapsibleArea" Grid.Column="0" Width="{Binding Content.ActualWidth}"
RenderTransformOrigin="1,0">
<Grid.LayoutTransform>
<ScaleTransform/>
</Grid.LayoutTransform>
<Border Style="{StaticResource collapsiblePanel_style_borderLeft}">
<ContentPresenter x:Name="PART_content" Content="{TemplateBinding Content}"/>
</Border>
</Grid>
<ToggleButton Grid.Column="2" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" >
<Grid Background="Transparent">
<TextBlock x:Name="PART_arrow" Style="{StaticResource collapsiblePanel_style_arrowLeft}"
RenderTransformOrigin="0.5,0.5" TextAlignment="Center">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</ToggleButton>
</Grid>
</ControlTemplate>
</Grid.Resources>
<StackPanel x:Name="HelloWorld" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,15,0,0" Orientation="Vertical" HorizontalAlignment="Center">
<TextBox x:Name="ContentWidth" Margin="0,50" Text="300" Width="500" />
<Expander Template="{StaticResource expanderTemplate}" HorizontalAlignment="Right">
<TextBlock Text="Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, " Width="{Binding ElementName=ContentWidth, Path=Text}"/>
</Expander>
</StackPanel>
</Grid>
By the way, I think you might use a Expander control with a custom ControlTemplate instead of creating a new control for this.
