wpf - 防止在 WPF 换行面板中跳转动态大小的项目

Question

我有一个充满矩形的环绕面板，当您将鼠标悬停在一个矩形上时，它会变大（使用情节提要动画）以模拟被放大。

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

这是运行它的 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>

Answer 1

您可以使用 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> 

请注意，这不会将相邻项目推到一边。如果您想在 WrapPanel 中将相邻项目推到一边而不影响包装，则需要在悬停项目增长时缩小非悬停项目。在代码中计算动画来做到这一点并不是特别困难，但比几个故事板要多得多的代码。