//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; }
}
}
![]()
![]()
![]()
![]()