none
[UWP]Offset.X not being animated by expression animation (Windows.UI.Composition) RRS feed

  • Question

  • I'm attempting to animate a visual using an expression animation, but the code below isn't working:

    CompositionPropertySet _scrollerViewerManipulation;
    Compositor _compositor;
    CompositionPropertySet _scrollerViewerManipulation;
    ExpressionAnimation expression;
    _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
    
    
    expression = _compositor.CreateExpressionAnimation("(ScrollManipulation.Translation.Y * 2)");
    expression.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);
    Visual textVisual = ElementCompositionPreview.GetElementVisual(txtblock);
    textVisual.StartAnimation("Offset.Y", expression);

    This code worked fine until the latest UWP SDK update, and I know it's got to do with Offset.Y because if I replace it by Scale.X, I can see that the textblock gets animated. Any ideas?


    Thursday, September 22, 2016 7:55 PM

Answers

  • Hi PWDiv Apps,

    After a lot of testing, I found a workaround. You could make TextBlock included in a container. Then It would work.

    The following is my code sample:

    <ListView x:Name="ThumbnailList" 
                      ContainerContentChanging="ThumbanilList_ContainerContentChanging"
                      Grid.Row="2"
                      Grid.ColumnSpan="2"
                      MaxWidth="400"
                      >
    
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="data:Thumbnail">
                        <RelativePanel Width="320" Height="240">
                            <Canvas x:Name="MyPanel" 
                                    RelativePanel.AlignLeftWithPanel="True"
                                    RelativePanel.AlignTopWithPanel="True"
                                    Width="320" 
                                    Height="240">
                                <Canvas.Clip>
                                    <RectangleGeometry Rect="0, 25, 360, 185" />
                                </Canvas.Clip>
                                <Image Source="{x:Bind ImageUrl}"
                                       Width="450"
                                       Height="450"
                                       Stretch="UniformToFill"/>
                            </Canvas>
                        <StackPanel>
                            <TextBlock RelativePanel.AlignBottomWithPanel="True"
                                       RelativePanel.AlignRightWithPanel="True"
                                       Text="{x:Bind Name}"
                                       Style="{ThemeResource TitleTextBlockStyle}"
                                       Foreground="Black">
                            </TextBlock>
                        </StackPanel>
                    </RelativePanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    private void ThumbanilList_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
            {
                Thumbnail thumbnail = args.Item as Thumbnail;
                //Image image = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<Image>();
                TextBlock textblock = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<TextBlock>();
    
                Visual visual = ElementCompositionPreview.GetElementVisual(textblock);
                visual.Size = new Vector2(960f, 960f);
    
                if (_parallaxExpression != null)
                {
                    //_parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y / 4.0f);
                    visual.StartAnimation("Offset.Y", _parallaxExpression);
                }
            }

    My code was from here: https://github.com/Microsoft/WindowsUIDevLabs/tree/master/SampleGallery/Samples/SDK%2010586/ParallaxingListItems and I have done some changes.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, September 28, 2016 8:48 AM
    Moderator

All replies

  • Hi PWDiv Apps,

    I could reproduce this issue. I would need to discuss it internally. If I got any useful information, I would update here timely.

    In addition, Welcome to the Developing Universal Windows apps forum!

    Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools  

    I have added tag for you this time, and you would need to add tag to title by yourself next time.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, September 23, 2016 10:30 AM
    Moderator
  • Hi PWDiv Apps,

    After a lot of testing, I found a workaround. You could make TextBlock included in a container. Then It would work.

    The following is my code sample:

    <ListView x:Name="ThumbnailList" 
                      ContainerContentChanging="ThumbanilList_ContainerContentChanging"
                      Grid.Row="2"
                      Grid.ColumnSpan="2"
                      MaxWidth="400"
                      >
    
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="data:Thumbnail">
                        <RelativePanel Width="320" Height="240">
                            <Canvas x:Name="MyPanel" 
                                    RelativePanel.AlignLeftWithPanel="True"
                                    RelativePanel.AlignTopWithPanel="True"
                                    Width="320" 
                                    Height="240">
                                <Canvas.Clip>
                                    <RectangleGeometry Rect="0, 25, 360, 185" />
                                </Canvas.Clip>
                                <Image Source="{x:Bind ImageUrl}"
                                       Width="450"
                                       Height="450"
                                       Stretch="UniformToFill"/>
                            </Canvas>
                        <StackPanel>
                            <TextBlock RelativePanel.AlignBottomWithPanel="True"
                                       RelativePanel.AlignRightWithPanel="True"
                                       Text="{x:Bind Name}"
                                       Style="{ThemeResource TitleTextBlockStyle}"
                                       Foreground="Black">
                            </TextBlock>
                        </StackPanel>
                    </RelativePanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    private void ThumbanilList_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
            {
                Thumbnail thumbnail = args.Item as Thumbnail;
                //Image image = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<Image>();
                TextBlock textblock = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<TextBlock>();
    
                Visual visual = ElementCompositionPreview.GetElementVisual(textblock);
                visual.Size = new Vector2(960f, 960f);
    
                if (_parallaxExpression != null)
                {
                    //_parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y / 4.0f);
                    visual.StartAnimation("Offset.Y", _parallaxExpression);
                }
            }

    My code was from here: https://github.com/Microsoft/WindowsUIDevLabs/tree/master/SampleGallery/Samples/SDK%2010586/ParallaxingListItems and I have done some changes.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, September 28, 2016 8:48 AM
    Moderator