擴展按鈕

Question

我用一堆按鈕創建了一個窗口。這些按鈕是我創建的用戶控件。

這是我的窗前，貌似現在，它包含了我的usercontrols的11，但窗口上用戶控件的數量是動態的：

當用戶將鼠標懸停在與他的鼠標按鈕，我想控制擴大20個像素。
問題是控件擴展，但其他控件停留在它們的位置以便它們重疊。

這是我的用戶

<UserControl 
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" 
mc:Ignorable="d" 
x:Class="UserControlSolution.UserControlButton" 
x:Name="UserControl" 
Height="50"> 
<UserControl.Resources> 
    <Storyboard x:Key="OnMouseEnter1"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="1.5"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="12.5"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</UserControl.Resources> 
<UserControl.Triggers> 
    <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
     <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/> 
    </EventTrigger> 
</UserControl.Triggers> 

<Grid x:Name="LayoutRoot" Height="50"> 
    <Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5"> 
     <Rectangle.Stroke> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FF5C5C5C" Offset="0"/> 
       <GradientStop Color="#FF4E4E4E" Offset="1"/> 
      </LinearGradientBrush> 
     </Rectangle.Stroke> 
     <Rectangle.Fill> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FF626262" Offset="0"/> 
       <GradientStop Color="#FF3B3B3B" Offset="0.987"/> 
      </LinearGradientBrush> 
     </Rectangle.Fill> 
    </Rectangle> 
    <TextBlock x:Name="NameLabel" FontFamily="Levenim MT" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="230" Text="Onthaal Telefoon" VerticalAlignment="Top" TextAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0"/> 
</Grid> 

這是我的窗口

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:UserControlSolution" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserControlSolution.MainWindow" 
    Title="MainWindow" Height="836" Width="262" Background="#FF2B2B2B" BorderBrush="{DynamicResource Border}" Loaded="Window_Loaded" > 

<Window.Resources> 

    <LinearGradientBrush x:Key="Border" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
     <GradientStop Color="#FF6C6C6C" Offset="0.009"/> 
     <GradientStop Color="#FFA1A1A1" Offset="1"/> 
    </LinearGradientBrush> 

</Window.Resources> 

<StackPanel Margin="0,10,0,0"> 
    <local:UserControlButton x:Name="Robby" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Erwin" HorizontalAlignment="Center" Height="50" VerticalAlignment="Top" Width="228" Background="Black" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Laurens" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Kevin" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Liesbeth" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Jack" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Filip" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Stefaan" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Sami" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Jurgen" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
    <local:UserControlButton x:Name="Thomas" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/> 
</StackPanel> 

我如何可以移動的控制不斷擴大的控制下下來，讓他們不」重疊？ 或者什麼是更好的解決方案？

Answer 1

你必須改變，以影響其他元素