Réduire la marge du bouton lorsque le bouton est mis au point

Question

J'ai un scénario dans lequel je souhaite réduire la marge d'un contrôle Button lorsqu'il reçoit le focus. C'est parce que je ne veux pas augmenter la propriété de bordure de ce contrôle Button et en même temps je ne veux pas que le bouton reste de la même taille (hauteur et largeur). Donc, un peu d'effort sur le web m'a guidé pour écrire un ValueConverter et réduire la marge. Mais je ne suis toujours pas capable de mettre en place le code de travail jusqu'à présent. Voici ce que j'ai pêle-mêle

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; 
} 

Les résultats de code ci-dessus dans StackOverflowException pour le Margin.Left étant appelé récursive. N'importe qui a une meilleure idée ou mise en œuvre pour le scénario que j'essaie d'atteindre.

Answer 1

Vous devez utiliser une épaisseur d'épaisseur pour la marge et une double animation pour la hauteur/largeur, plutôt que d'utiliser un convertisseur.

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

Exemple:

<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>