我在ItemsControl中托管了一个Wrappanel，它包含在一个scrollviewer中。 wrappanel中的项目填充了绑定。每个项目都有一个带数据触发器的datatemplate。该触发器用于将项目设置为屏幕中心的动画。我试图用translatetransform做到这一点，但问题是translatetransform的X和Y属性是相对于项目本身而不是主机容器，因此每个项目都有不同的动画。如下所示：
项目模板XAML：
<DataTemplate x:Key="CountryItemTemplate">
<Grid
x:Name="gridMain"
Height="Auto"
Width="Auto"
Margin="3"
RenderTransformOrigin="0 0"
Panel.ZIndex="{Binding IsVisible, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
<materialDesign:Card
x:Name="cardMain"
Height="350"
Width="310"
RenderTransformOrigin="0.5, 0.5"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
UniformCornerRadius="3">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Rectangle
Grid.Row="0">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding ImageUrl, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock
Grid.Row="1"
Foreground="Black"
FontWeight="Regular"
FontSize="25"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="16 24 0 0"
Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<Button
Grid.Row="1"
Style="{DynamicResource MaterialDesignToolButton}"
Content="Edit"
FontSize="15"
Width="85"
Height="35"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="0 0 16 24"
Command="{Binding IsInEditModeToggleCommand}"/>
</Grid>
<materialDesign:Card.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<TranslateTransform/>
</TransformGroup>
</materialDesign:Card.RenderTransform>
</materialDesign:Card>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsInEditMode, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="cardMain"
Storyboard.TargetProperty="(UIElement.RenderTransform).Children[1].(TranslateTransform.X)"
To="300"
By="1"
Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<ExponentialEase
EasingMode="EaseInOut"
Exponent="16"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="cardMain"
Storyboard.TargetProperty="(UIElement.RenderTransform).Children[1].(TranslateTransform.Y)"
To="400"
By="1"
Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<ExponentialEase
EasingMode="EaseInOut"
Exponent="16"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
我试图像这样使用UIElement.TranslatePoint：
整个UserControl，其中一切都是：
<UserControl
x:Class="NikolaLukovic.CustomsOfficeApp.Desktop.Views.CountryUserControl"
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:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:domain="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.DomainModels"
xmlns:helpers="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.Helpers"
xmlns:mahApps="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:validationRules="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.Helpers.ValidationRules"
xmlns:views="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.Views"
xmlns:viewModels="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.ViewModels"
xmlns:local="clr-namespace:NikolaLukovic.CustomsOfficeApp.Desktop.Views"
mc:Ignorable="d"
d:DesignHeight="600"
d:DesignWidth="900">
<UserControl.CacheMode>
<BitmapCache/>
</UserControl.CacheMode>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadDataCommand}" CommandParameter="{Binding ElementName=icMain}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<UserControl.DataContext>
<viewModels:CountryViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/CountryItemStyle.xaml"/>
<ResourceDictionary Source="../Resources/Icons.xaml"/>
<ResourceDictionary Source="../Resources/MaterialDesignIcons.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</ResourceDictionary>
</UserControl.Resources>
<materialDesign:DialogHost>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ScrollViewer
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
VerticalScrollBarVisibility="Auto">
<ItemsControl
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
x:Name="icMain"
ItemTemplate="{StaticResource CountryItemTemplate}"
ItemsSource="{Binding Countries, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
<Button
Width="45"
Height="45"
Style="{DynamicResource MaterialDesignFloatingActionAccentButton}"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0 10 0 0">
<Viewbox Width="24" Height="24">
<Canvas Width="24" Height="24">
<Path Data="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" Fill="White" />
</Canvas>
</Viewbox>
</Button>
</Grid>
</materialDesign:DialogHost>
</UserControl>
DataContext ViewModel：
public class CountryViewModel : BaseViewModel
{
private ObservableCollection<CountryItem> countries;
private DelegateCommand<ItemsControl> loadDataCommand;
public CountryViewModel ( )
{
ViewModelFinder.Add(this);
}
public ObservableCollection<CountryItem> Countries
{
get
{
return countries;
}
set
{
this.countries = value;
this.NotifyPropertyChanged();
}
}
public DelegateCommand<ItemsControl> LoadDataCommand
{
get
{
if ( this.loadDataCommand == null )
this.loadDataCommand = new DelegateCommand<ItemsControl>(async icMain => await LoadDataMethod(icMain));
return this.loadDataCommand;
}
}
private async Task LoadDataMethod (ItemsControl icMain)
{
if ( this.Countries == null )
{
var countries = await CountryService.Instance.GetAllAsync();
this.Countries = new ObservableCollection<CountryItem>();
var util = new Util();
foreach ( var country in countries.Take(40) )
{
var countryItem = new CountryItem
{
Name = country.Name,
Iso2 = country.Iso2,
IsoAlpha3 = country.IsoAlpha3,
IsoUnM49Numerical = country.IsoUnM49Numerical,
Id = country.Id
};
var imageBytes = await util.GetImageBytesAsync(country.CountryFlagUrl);
countryItem.ImageUrl = country.CountryFlagUrl;
this.Countries.Add(countryItem);
countryItem.This = icMain.ItemContainerGenerator.ContainerFromItem(countryItem) as UIElement;
}
}
}
}
表示wrappanel中项目的类：
public class CountryItem : ObservableObject
{
private bool isEnabled = true;
private bool isInEditMode;
private bool isVisible = true;
private DelegateCommand isInEditModeToggleCommand;
private string name;
private string iso2;
private string isoAlpha3;
private int isoUnM49Numerical;
private string imageUrl;
private Guid id;
private UIElement @this;
public CountryItem ( )
{
}
public bool IsEnabled
{
get
{
return isEnabled;
}
set
{
this.isEnabled = value;
this.NotifyPropertyChanged();
}
}
[Required(AllowEmptyStrings = false, ErrorMessage = "Name is required.")]
public string Name
{
get
{
return this.name;
}
set
{
this.name = value;
this.NotifyPropertyChanged();
}
}
[Required(AllowEmptyStrings = false, ErrorMessage = "Iso2 is required.")]
public string Iso2
{
get
{
return this.iso2;
}
set
{
this.iso2 = value;
this.NotifyPropertyChanged();
}
}
[Required(AllowEmptyStrings = false, ErrorMessage = "Iso Alpha3 is required.")]
public string IsoAlpha3
{
get
{
return this.isoAlpha3;
}
set
{
this.isoAlpha3 = value;
this.NotifyPropertyChanged();
}
}
[Required(AllowEmptyStrings = false, ErrorMessage = "Iso Un M49 Numerical is required.")]
public int IsoUnM49Numerical
{
get
{
return this.isoUnM49Numerical;
}
set
{
this.isoUnM49Numerical = value;
this.NotifyPropertyChanged();
}
}
public string ImageUrl
{
get
{
return imageUrl;
}
set
{
this.imageUrl = value;
this.NotifyPropertyChanged();
}
}
public Guid Id
{
get
{
return id;
}
set
{
this.id = value;
}
}
public bool IsInEditMode
{
get
{
return isInEditMode;
}
set
{
this.isInEditMode = value;
this.NotifyPropertyChanged();
}
}
public DelegateCommand IsInEditModeToggleCommand
{
get
{
if ( this.isInEditModeToggleCommand == null )
this.isInEditModeToggleCommand = new DelegateCommand(IsInEditModeToggleMethod);
return this.isInEditModeToggleCommand;
}
}
public bool IsVisible
{
get
{
return isVisible;
}
set
{
this.isVisible = value;
this.NotifyPropertyChanged();
}
}
public UIElement This
{
get
{
return this.@this;
}
set
{
this.@this = value;
this.NotifyPropertyChanged();
}
}
private void IsInEditModeToggleMethod ( )
{
var countryViewModel = ViewModelFinder.FindOne<CountryViewModel>();
countryViewModel.Countries.Where(x=>x.Id != this.Id).ToList().ForEach(ci => ci.IsVisible = false);
this.This.TranslatePoint(new Point(400, 500), Application.Current.MainWindow)
this.IsInEditMode = !this.IsInEditMode;
}
}
答案 0 :(得分：2)
解决方案是从xaml中删除故事板动画，并在项目对象中以编程方式执行。当我创建这些项目来填充包装面板时，我添加了对创建的ContentPresenter的引用，该引用表示项目本身和根父级，在本例中是一个UserControl。
需要引用的ContentPresenter来为项目设置动画。 需要引用的根父UserControl来获取用户控件中项的当前位置。
现在动画看起来像这样：
我在CountryItem中添加了这个方法：
private void AnimateToCenter ( )
{
var sbTranslate = new Storyboard();
var daTranslateX = new DoubleAnimation();
var daTranslateY = new DoubleAnimation();
var duration = new Duration(TimeSpan.FromSeconds(2));
daTranslateX.Duration = duration;
daTranslateY.Duration = duration;
sbTranslate.Duration = duration;
var exponentialEase = new ExponentialEase();
exponentialEase.EasingMode = EasingMode.EaseInOut;
exponentialEase.Exponent = 16;
daTranslateX.EasingFunction = exponentialEase;
daTranslateY.EasingFunction = exponentialEase;
sbTranslate.Children.Add(daTranslateX);
sbTranslate.Children.Add(daTranslateY);
Storyboard.SetTarget(daTranslateX, this.This);
Storyboard.SetTarget(daTranslateY, this.This);
this.This.RenderTransform = new TranslateTransform();
Storyboard.SetTargetProperty(daTranslateX, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
Storyboard.SetTargetProperty(daTranslateY, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
//get the current point of the selected item
var currentPoint = this.This.TranslatePoint(new Point(), this.Parent);
//get actual width and height of the parent so we can calculate to which position to calculate
var parentWidth = (this.Parent as UserControl).ActualWidth;
var parentHeight = (this.Parent as UserControl).ActualHeight;
//get actual width and height of the item itself to center the item correctly
//this is needed because the X and Y coordinates of the item are top and left
var thisWidth = (this.This as ContentPresenter).ActualWidth;
var thisHeight = (this.This as ContentPresenter).ActualHeight;
//animate the item to the center of the screen
daTranslateX.To = (parentWidth / 2) - currentPoint.X - (thisWidth / 2);
daTranslateY.To = (parentHeight / 2) - currentPoint.Y - (thisHeight / 2);
sbTranslate.Begin();
}
在这里被称为：
private void IsInEditModeToggleMethod ( )
{
this.IsEllipseVisible = true;
var countryViewModel = ViewModelFinder.FindOne<CountryViewModel>();
countryViewModel.Countries.Where(x=>x.Id != this.Id).ToList().ForEach(ci => ci.IsVisible = false);
this.IsInEditMode = !this.IsInEditMode;
this.AnimateToCenter();
}
答案 1 :(得分：1)
您可以使用UIElement.TranslatePoint函数转换坐标。那么你只需要一种方法来使用动画中的翻译值，应该有多种方法来实现这一点。
一个选项是，在集合外部有一个专用的CurrentEditItem，并根据是否设置此属性修改窗口内容模板。这样，窗口和项目之间的关系应该更容易建模。但我确信它也可以在To值上抛出绑定和转换器，以便让它们转换窗口到项目的坐标值。
例如，在窗口上实例化为静态资源的转换器，其中包含对窗口的引用以及带有项目的ConverterParameter，允许您转换窗口和项目坐标之间的任何incomming值。 / p>