Reduce Margin of Button when the button is focused - wpf

Question

I have a scenario where I want to reduce the margin of a Button control when it receives focus. This is because because I wan't to increase the border property of that Button control and at the same time wan't the button to stay same size (height and width). So a little bit of effort on web guided me to write a ValueConverter and get the margin reduced. But I am still not able to put up the working code till yet. Here is what I have jumbled up
Xaml
<ControlTemplate.Triggers> <!--ControlTemplate for the Button-->
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="bdrButton" Value="Wheat"/>
<Setter Property="BorderThickness" TargetName="bdrButton" Value="2"/>
<Setter Property="Margin" TargetName="bdrButton" >
<Setter.Value>
<Binding ElementName="bdrButton" Path="Margin" Converter="{StaticResource N_MarginReducer}">
<Binding.ConverterParameter>
<Thickness>1,1,1,1</Thickness>
</Binding.ConverterParameter>
</Binding>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
Converter:
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
Thickness newMargin = new Thickness();
Thickness margin = (Thickness)value;
Thickness reduceBy = (Thickness)parameter;
newMargin.Left = margin.Left - reduceBy.Left;
newMargin.Top = margin.Top - reduceBy.Top;
newMargin.Right = margin.Right - reduceBy.Right;
newMargin.Bottom = margin.Bottom - reduceBy.Bottom;
return newMargin;
}
The above code results in StackOverFlowException for the Margin.Left being called recursively. Anyone has better idea or implementation for the scenario that I am trying to achieve.

Answer 1

You will want to use a ThicknessAnimation for the Margin and a DoubleAnimation for the height/width, rather than using a converter.
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.thicknessanimation.aspx
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation.aspx
Example:
<StackPanel>
<StackPanel.Resources>
<Thickness x:Key="unfocusedThickness" Top="15" Left="15" Right="15" Bottom="15"/>
<Thickness x:Key="focusedThickness" Top="5" Left="5" Right="5" Bottom="5"/>
</StackPanel.Resources>
<Button Height="100" Width="100" Margin="15">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.GotFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="100" To="120" Duration="0:0:0"/>
<DoubleAnimation Storyboard.TargetProperty="Width" From="100" To="120" Duration="0:0:0"/>
<ThicknessAnimation Storyboard.TargetProperty="Margin" From="{StaticResource unfocusedThickness}" To="{StaticResource focusedThickness}" Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.LostFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="120" To="100" Duration="0:0:0"/>
<DoubleAnimation Storyboard.TargetProperty="Width" From="120" To="100" Duration="0:0:0"/>
<ThicknessAnimation Storyboard.TargetProperty="Margin" To="{StaticResource unfocusedThickness}" From="{StaticResource focusedThickness}" Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<TextBox />
</StackPanel>