How to set translatetransform X and Y property relative to main window?

I have a Wrappanel hosted inside ItemsControl which is wrapped in a scrollviewer. Items in a wrappanel are populated with binding. Every item has a datatemplate with a datatrigger. That trigger is suposed to animate the item to the center of the screen. I was trying to do that with translatetransform, but the problem is that X and Y properties of translatetransform is relative to the item itself and not the host container, so every item has a different animation. As seen here:

webm 1 webm 2

The host XAML:

 <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> </Grid> 

The item template 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> 

by buttlickk via /r/csharp

Leave a Reply