Animate Border without defining size

If you want to animate a layout control means you want to resize the control with animation you have to give height and width to the control but what if you don't want to give height and width of a control. Here is the solution for that. We play with the scale transform of the control which will server our purpose. Here is the sample code .


<UserControl x:Class="WrapPanel.AnimateBorder"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimation Duration="0:0:0.4"
                             To="0.5"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             Storyboard.TargetName="border"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:0.4"
                             To="0.5"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                             Storyboard.TargetName="border"
                             d:IsOptimized="True" />
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)"
                                           Storyboard.TargetName="button">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4"
                                        Value="Shrink" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)"
                                           Storyboard.TargetName="button1">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4"
                                        Value="Default" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Storyboard2">
            <DoubleAnimation Duration="0:0:0.3"
                             To="1"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             Storyboard.TargetName="border"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:0.3"
                             To="1"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                             Storyboard.TargetName="border"
                             d:IsOptimized="True" />
        </Storyboard>
       
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Background="White">
        <Border x:Name="border"
                BorderBrush="Black"
                BorderThickness="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="52,27,244,169"
                RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
                <CompositeTransform />
            </Border.RenderTransform>
            <Grid Background="Green"
                  Height="100"
                  Width="100">

            </Grid>
        </Border>
        <Button x:Name="button"
                Content="Animate"
                HorizontalAlignment="Left"
                Height="55"
                Margin="71,226,0,0"
                VerticalAlignment="Top"
                Width="158">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
            <Button x:Name="button1"
                Content="Button"
                HorizontalAlignment="Left"
                Height="55"
                Margin="240,227,0,0"
                VerticalAlignment="Top"
                Width="128">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
       
    </Grid>
</UserControl>

Let me know if you have any concern/suggestion on this.

Cheers!

Vinod