XAML wpf列表视图项目动画

ctzwtxfj 于 2023-11-14 发布在其他

关注(0)|答案(1)|浏览(112)

我需要一些建议。有谁知道如何在wpf中制作这个ListView动画。我需要ListView项目动画对称地运行，见gif 1.

但问题是ListView不能滚动，项目通常会被替换，因为VirtualizingStackPanel的设置是HorizontalAlignment=“Center”，而ListView的设置是ScrollViewer.CanContentScroll=“False”。
那么，我如何修改代码，使ListView中的项的动画是对称的，同时保持滚动。
我现在的代码看起来像这样：

<ListView
      x:Name="ListView1"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Center" 
      ScrollViewer.CanContentScroll="False"
      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
      <ListView.ItemsPanel>
          <ItemsPanelTemplate>
              <VirtualizingStackPanel
                  HorizontalAlignment="Center"
                  CacheLength="10,10"
                  CacheLengthUnit="Pixel"
                  IsItemsHost="True"
                  IsVirtualizing="True"
                  Orientation="Horizontal"
                  ScrollUnit="Pixel"
                  VirtualizationMode="Recycling">
              </VirtualizingStackPanel>
          </ItemsPanelTemplate>
      </ListView.ItemsPanel>
      <ListViewItem>
          <Button
              Width="100"
              Height="120"
              Margin="3"
              HorizontalAlignment="Center"
              FontSize="18"
              FontWeight="Bold"
              Foreground="MediumPurple"
              MouseEnter="Button_MouseEnter"
              MouseLeave="Button_MouseLeave" />
      </ListViewItem>

      <!--  more items  -->

  </ListView>

private void Button_MouseEnter(object sender, MouseEventArgs e)
    {

        var button = sender as Button;
        var WidthAnimation = new DoubleAnimation() { To = 130, Duration = TimeSpan.FromSeconds(0.3) };
        var HeightAnimation = new DoubleAnimation() { To = 150, Duration = TimeSpan.FromSeconds(0.3) };

        button.BeginAnimation(Button.WidthProperty, WidthAnimation);
        button.BeginAnimation(Button.HeightProperty, HeightAnimation);
    }

    private void Button_MouseLeave(object sender, MouseEventArgs e)
    {

        var button = sender as Button;
        var WidthAnimation = new DoubleAnimation() { To = 100, Duration = TimeSpan.FromSeconds(0.3) };
        var HeightAnimation = new DoubleAnimation() { To = 120, Duration = TimeSpan.FromSeconds(0.3) };

        button.BeginAnimation(Button.WidthProperty, WidthAnimation);
        button.BeginAnimation(Button.HeightProperty, HeightAnimation);
    }

xaml

来源：https://stackoverflow.com/questions/77445279/wpf-listview-item-animation

1条答案

按热度按时间

cwxwcias1#

向ItemsPanel添加额外的水平边距，并在按钮放大时减小水平边距，以补偿增加的宽度。

<ListView ItemsSource="{Binding ...}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True"
                                    IsVirtualizing="True"
                                    Orientation="Horizontal"
                                    VirtualizationMode="Recycling"
                                    Margin="15,0,0,0"
                                    Loaded="ItemsPanel_Loaded"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Button Width="100"
                                Height="120"
                                Margin="3"
                                FontSize="18"
                                FontWeight="Bold"
                                Foreground="MediumPurple"
                                MouseEnter="Button_MouseEnter"
                                MouseLeave="Button_MouseLeave">
                            <ContentPresenter/>
                        </Button>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

private Panel? _panel;

private void ItemsPanel_Loaded(object sender, RoutedEventArgs e)
{
    _panel = sender as Panel;
}

private void Button_MouseEnter(object sender, MouseEventArgs e)
{
    if (sender is Button button)
    {
        var widthAnimation = new DoubleAnimation { To = 130, Duration = TimeSpan.FromSeconds(0.3) };
        button.BeginAnimation(WidthProperty, widthAnimation);
    }
    if (_panel is not null)
    {
        var marginAnimation = new ThicknessAnimation { To = new Thickness(0, 0, 0, 0), Duration = TimeSpan.FromSeconds(0.3) };
        _panel.BeginAnimation(MarginProperty, marginAnimation);
    }
}

private void Button_MouseLeave(object sender, MouseEventArgs e)
{
    if (sender is Button button)
    {
        var widthAnimation = new DoubleAnimation { To = 100, Duration = TimeSpan.FromSeconds(0.3) };
        button.BeginAnimation(WidthProperty, widthAnimation);
    }
    if (_panel is not null)
    {
        var marginAnimation = new ThicknessAnimation { To = new Thickness(15, 0, 0, 0), Duration = TimeSpan.FromSeconds(0.3) };
        _panel.BeginAnimation(MarginProperty, marginAnimation);
    }
}

为简洁起见，省略了高度动画。

赞(0）回复(0）举报 2023-11-14

我来回答

XAML wpf列表视图项目动画

1条答案

相关问题

热门标签

最新问答