防止WPF包裹面板中动态大小的项目跳转

我有一个全是矩形的环绕面板，当你将鼠标移到一个矩形上时，它会变大（使用故事板动画）以模拟被放大

这一切都很好，问题是，如果将鼠标移到一行中的最后一个矩形上，放大率会导致它跳到下一行（因为它变得太大，无法适应当前行）。我相信有一个优雅的解决方案可以防止这种情况，但我就是想不出来。任何帮助都将不胜感激

下面是运行这一切的XAML：

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <ListBox Name="lstBox"
             Width="200"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform
                    ScaleY="{Binding RelativeSource={RelativeSource self},
                                     Path=ScaleX}" />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                            Storyboard.TargetProperty="LayoutTransform.ScaleX"
                            To="2" Duration="0:0:0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                            Storyboard.TargetProperty="LayoutTransform.ScaleX"
                            To="1" Duration="0:0:.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ListBox.Resources>

        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
        <ListBoxItem>
            <Rectangle Fill="Red" Width="30" Height="20"></Rectangle>
        </ListBoxItem>
    </ListBox>
</Grid>

---

您可以使用RenderTransform而不是LayoutTransform，例如：

<Style TargetType="{x:Type ListBoxItem}"> 
  <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
  <Setter Property="RenderTransform"> 
    <Setter.Value> 
       <ScaleTransform
         ScaleY="{Binding ScaleX, RelativeSource={RelativeSource self}}" />
    </Setter.Value> 
  </Setter> 
  <Style.Triggers> 
    <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <BeginStoryboard> 
        <Storyboard> 
          <DoubleAnimation
            Storyboard.TargetProperty="RenderTransform.ScaleX"
            To="2" Duration="0:0:0.25" /> 
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="Button.MouseLeave"> 
      <BeginStoryboard> 
        <Storyboard> 
          <DoubleAnimation  
            Storyboard.TargetProperty="RenderTransform.ScaleX" 
            To="1" Duration="0:0:.5" /> 
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </Style.Triggers> 
</Style> 

请注意，这不会将相邻项目推到一边。如果要在不影响包装的情况下将包装中的相邻项目推到一旁，则需要在悬浮项目增长时使非悬浮项目收缩。用代码计算动画来实现这一点并不是特别困难，但比两个故事板的代码要多得多