Запрет прыжков предметов динамического размера на панели переноса WPF - PullRequest
Новая
       13

Запрет прыжков предметов динамического размера на панели переноса WPF

0 голосов
/ 13 августа 2010

У меня есть оберточная панель, полная прямоугольников, когда вы наводите курсор мыши на прямоугольник, он увеличивается в размере (с использованием анимации раскадровки), чтобы имитировать увеличение.

Это все работает нормально, проблема в том, что если вы наведете курсор мыши на последний прямоугольник в строке, увеличение заставит его перейти на следующую строку (потому что он стал слишком большим, чтобы поместиться на текущей строке).Я уверен, что есть элегантное решение для предотвращения этого сценария, но я просто не могу понять это.Любая помощь будет принята с благодарностью.

Вот 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>

1 Ответ

0 голосов
/ 13 августа 2010

Вы можете использовать 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, не влияя на их обтекание, вам нужно будет сжимать незатронутые элементы по мере их роста.Вычислить анимацию в коде, чтобы сделать это, не особенно сложно, но это немного больше кода, чем несколько раскадровок.

...