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中将相邻项目推到一边而不影响包装，则在悬停项目增长时，您需要缩小非悬停项目。在代码中计算动画来做到这一点并不是特别困难，但是它比一些故事板要多得多。

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

1 个答案: