WPF Grid Column width change in animation via customized animation inherit from AnimationTimeline, toggle button implement column width shrink or expand with DockPanel

//xaml
<Window x:Class="WpfApp17.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp17"
        WindowState="Maximized"
        mc:Ignorable="d"
        Title="{Binding TitleStr,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
        Height="450" Width="800">
    <Grid x:Name="gd">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="firstColumn" 
                              Width="{Binding FirstColumnWidth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button x:Name="toggleButton"
                Grid.Row="0"
                Grid.Column="0"
                Content="{Binding ToggleBtnContent,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                DockPanel.Dock="Top"
                Command="{Binding BtnToggleCommand}"
                Height="25"/>
        
        <DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="0">            
            <ListBox x:Name="lbx"
                     ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                     DockPanel.Dock="Left"
                     HorizontalAlignment="Stretch">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0"
                                   Width="20"
                                   Height="20"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Source="{Binding DataContext.ImgSource,RelativeSource={RelativeSource 
                                   Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"/>
                            <TextBlock Grid.Column="1" Text="{Binding DataContext.ISBN,RelativeSource={RelativeSource 
                                      Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"/>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>            
        </DockPanel>        
        
        <Border Background="Silver" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
            <TextBlock Text="Main Content Area"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               FontSize="24"/>
        </Border>
    </Grid>
</Window>



//cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Runtime.Serialization;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var vm = new MainVM(this);
            this.DataContext = vm;
        }
    }

    public class MainVM : INotifyPropertyChanged
    {
        private Window win;
        private ColumnDefinition firstColumn;
        private GridLengthAnimation columnWidthAnimation;
        private double widthLen = 300;
        private double shortLen = 40;
        
        public MainVM(Window winValue)
        {
            win=winValue;
            if(win!=null)
            {
                win.Loaded += Win_Loaded;
            }
        }

        private void Win_Loaded(object sender, RoutedEventArgs e)
        {
            Init();
            CompositionTarget.Rendering += CompositionTarget_Rendering;
        }

        private void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            TitleStr = firstColumn?.ActualWidth.ToString();
        }

        private void Init()
        {
            var tempFirstColumn = win.FindName("firstColumn") as ColumnDefinition;
            if(tempFirstColumn!=null)
            {
                firstColumn = tempFirstColumn;
            }

            FirstColumnWidth = new GridLength(widthLen);
            ToggleBtnContent = "";
            InitBooksCollection();
            InitColumnAnimation();
        }

        private void InitColumnAnimation()
        {
            columnWidthAnimation=new GridLengthAnimation();
            columnWidthAnimation.Duration = TimeSpan.FromSeconds(2);
            columnWidthAnimation.Completed += ColumnWidthAnimation_Completed;
        }

        private void ColumnWidthAnimation_Completed(object sender, EventArgs e)
        {
             
        }

        private void InitBooksCollection()
        {
            var imgsDir = @"../../Images";
            if(Directory.Exists(imgsDir))
            {
                var imgs=Directory.GetFiles(imgsDir);
                int imgsCount = imgs.Count();
                BooksCollection = new ObservableCollection<Book>();
                for(int i = 0; i < 100; i++)
                {
                    BooksCollection.Add(new Book()
                    {
                        ImgSource = GetImgSourceViaUrl(imgs[i%imgsCount]),
                        ISBN = $"{i + 1}_{Guid.NewGuid().ToString("N")}"
                    });
                }
            }
        }

        private ImageSource GetImgSourceViaUrl(string imgUrl)
        {
            if (!File.Exists(imgUrl))
            {
                return null;
            }

            BitmapImage bmi = new BitmapImage();
            bmi.BeginInit();
            bmi.UriSource=new Uri(imgUrl, UriKind.RelativeOrAbsolute);
            bmi.EndInit();
            if(bmi.CanFreeze)
            {
                bmi.Freeze();
            }
            return bmi;
        }

        private void BtnToggleCommandExecuted(object obj)
        {
            if (ToggleBtnContent == "")
            {
                columnWidthAnimation.From =new GridLength(widthLen);
                columnWidthAnimation.To = new GridLength(shortLen);
                firstColumn.BeginAnimation(ColumnDefinition.WidthProperty, columnWidthAnimation);
                ToggleBtnContent = "";
            }
            else
            {
                columnWidthAnimation.From = new GridLength(shortLen);
                columnWidthAnimation.To = new GridLength(widthLen);
                firstColumn.BeginAnimation(ColumnDefinition.WidthProperty, columnWidthAnimation);
                ToggleBtnContent = "";
            }
        }

        private DelCommand btnToggleCommand;
        public DelCommand BtnToggleCommand
        {
            get
            {
                if(btnToggleCommand == null)
                {
                    btnToggleCommand = new DelCommand(BtnToggleCommandExecuted);
                }
                return btnToggleCommand;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string propName = "")
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler?.Invoke(this, new PropertyChangedEventArgs(propName));
            }
        }

        private string titleStr;
        public string TitleStr
        {
            get
            {
                return titleStr;
            }
            set
            {
                if(value!=titleStr)
                {
                    titleStr = value;
                    OnPropertyChanged();
                }
            }
        }

        private GridLength firstColumnWidth;
        public GridLength FirstColumnWidth
        {
            get
            {
                return firstColumnWidth;
            }
            set
            {
                if (value != firstColumnWidth)
                {
                    firstColumnWidth = value;
                    OnPropertyChanged();
                }
            }
        }

        private object toggleBtnContent = "";
        public object ToggleBtnContent
        {
            get
            {
                return toggleBtnContent;
            }
            set
            {
                if (value != toggleBtnContent)
                {
                    toggleBtnContent = value;
                    OnPropertyChanged();
                }
            }
        }

        private ObservableCollection<Book> booksCollection;
        public ObservableCollection<Book> BooksCollection
        {
            get
            {
                return booksCollection;
            }
            set
            {
                if(value!= booksCollection)
                {
                    booksCollection = value;
                    OnPropertyChanged();
                }
            }
        }
    }

    public class GridLengthAnimation : AnimationTimeline
    {
        public override Type TargetPropertyType => typeof(GridLength);

        protected override Freezable CreateInstanceCore() => new GridLengthAnimation();

        public GridLength From
        {
            get => (GridLength)GetValue(FromProperty);
            set => SetValue(FromProperty, value);
        }

        public static readonly DependencyProperty FromProperty =
            DependencyProperty.Register("From", typeof(GridLength), typeof(GridLengthAnimation));

        public GridLength To
        {
            get => (GridLength)GetValue(ToProperty);
            set => SetValue(ToProperty, value);
        }

        public static readonly DependencyProperty ToProperty =
            DependencyProperty.Register("To", typeof(GridLength), typeof(GridLengthAnimation));

        public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)
        {
            double fromVal = From.Value;
            double toVal = To.Value;

            if (fromVal > toVal)
            {
                return new GridLength((1 - animationClock.CurrentProgress.Value) * (fromVal - toVal) + toVal, From.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
            }
            else
            {
                return new GridLength(animationClock.CurrentProgress.Value * (toVal - fromVal) + fromVal, To.IsStar ? GridUnitType.Star : GridUnitType.Pixel);
            }
        }
    }

    public class DelCommand : ICommand
    {
        private Action<object> execute;
        private Predicate<object> canExecute;
        public DelCommand(Action<object> executeValue, Predicate<object> canExecuteValue = null)
        {
            execute = executeValue;
            canExecute = canExecuteValue;
        }

        public event EventHandler CanExecuteChanged
        {
            add
            {
                CommandManager.RequerySuggested += value;
            }
            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

        public bool CanExecute(object parameter)
        {
            return canExecute == null ? true : canExecute(parameter);
        }

        public void Execute(object parameter)
        {
            execute(parameter);
        }
    }


    public class Book
    {
        public ImageSource ImgSource { get; set; }
        public string ISBN { get; set; }
    }

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2025-05-17 19:30  FredGrit  阅读(14)  评论(0)    收藏  举报