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> 

당신은 예를 들어, 대신 LayoutTransform의으로 RenderTransform을 사용할 수 있습니다

Answer 1

이 옆으로 이웃 항목을 밀어하지 않습니다

가

<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에서 옆에있는 항목을 옆으로 밀어 넣고 싶다면, 잡히지 않은 항목이 커지는 동안 잡초가 아닌 항목을 축소해야합니다. 이렇게하기 위해 코드에서 애니메이션을 계산하는 것은 특별히 어려운 것은 아니지만 몇 가지 스토리 보드보다 훨씬 더 많은 코드입니다.