The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
[UWP][Xaml]Trouble using Vector2 Visual.AnchorPoint RRS feed

  • Question

  • So I'd like to do this to be able to do rotation animations around the center of the image.

    var myVisual = ElementCompositionPreview.GetElementVisual(myImage);
    
    myVisual.AnchorPoint = new Vector2(0.5f, 0.5f);

    But when I do the image's position offsets.  Even if I try to correct the offset after the fact and set it back to zeros:

    myVisual.Offset = new Vector3(0, 0, 0);

    It still shows up in the UI as if it were offset.

    Using Visual.CenterPoint instead of AnchorPoint works, but i have to calculate the midpoint number of pixels each time the source changes which can be problematic.  I also tried experimenting with Visual.RelativeOffsetAdjustment but it didn't have any effect on my layout.


    Tuesday, July 3, 2018 9:28 PM

Answers

  • Anyway the solution for dynamic axis point is this:

    myVisual.CenterPoint = new Vector3(myVisual.Size.X / 2, myVisual.Size.Y / 2, 0);
    Although if the UIElement is an image and it hasn't been loaded yet this is problematic.

    • Marked as answer by seanocali Thursday, July 5, 2018 2:58 PM
    • Edited by seanocali Thursday, July 5, 2018 4:54 PM
    Thursday, July 5, 2018 2:58 PM

All replies

  • Hi,

    Could you please share me a sample that could reproduce the problem? It is hard the find out the problem with limited description.You could delete all the sensitive code and a simple demo that could show the problem will be enough. This will help to get more details about the problem.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, July 4, 2018 2:37 AM
    Moderator
  • Ok.  Start a clean new UWP project in VS2017, default target and minimum W10 version.  Replace the Grid in MainPage.xaml with this:

        <Grid>
            <Image x:Name="myImage" Source="/Assets/StoreLogo.png" Stretch="None" />
            <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="20">
                <Button Click="Button_Click" Content="Change AnchorPoint to 0.5,0.5" HorizontalAlignment="Center" Margin="4" />
                <Button Click="Button_Click_1" Content="Reset Offset To 0,0,0" HorizontalAlignment="Center" Margin="4" />
                <Button Click="Button_Click_2" Content="Realign Image To Center" HorizontalAlignment="Center" Margin="4" />
            </StackPanel>
        </Grid>

    In the code behind add this:

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                var myVisual = ElementCompositionPreview.GetElementVisual(myImage);
                myVisual.AnchorPoint = new System.Numerics.Vector2(0.5f, 0.5f);
            }
    
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                var myVisual = ElementCompositionPreview.GetElementVisual(myImage);
                myVisual.Offset = new System.Numerics.Vector3(0, 0, 0);
            }
    
            private void Button_Click_2(object sender, RoutedEventArgs e)
            {
                myImage.HorizontalAlignment = HorizontalAlignment.Center;
                myImage.VerticalAlignment = VerticalAlignment.Center;
            }

    Run it and click the first button.  Why does the box's position shift?  Simply changing the anchor point should not affect its position relative to its parent. Especially considering that I'm setting the anchor point to the center.  If you use the debugger you can see that the myVisual.Offset value changes as well.

    Now push the 2nd button.  This sets myVisual.Offset back to its original value, all zeros.  But now look what happens to the box. It re-positions to the upper-left corner of its container as if it were inside a Canvas instead of a Grid.

    Now push the 3rd button.  This sets the box to align to the center of the Grid, but as you see it does nothing.  So we have an image inside a Grid that has a Visual.Offset of 0, 0, 0.  And its HorizontalAlignment and VerticalAlignment are both set to center.  Yet it's in the upper-left hand corner of the page.

     
    • Edited by seanocali Thursday, July 5, 2018 12:35 AM
    Wednesday, July 4, 2018 10:42 PM
  • Hi seanocali,

    >> Simply changing the anchor point should not affect its position relative to its parent. Especially considering that I'm setting the anchor point to the center. 

    This is excepted behavior when changing the Visual.AnchorPoint Property. Generally, this property is used when you wants to a new visual to add to another visual. Use this property to decide where the visual will be placed. You could take a look at the code snippet of the document. It shows how to use this property.

    If you wants to create a rotation animation around the center, there are others way to implement this.

    You could try to use RotateTransform to create a rotation animation. And UIElement.RenderTransformOrigin Property here is the anchor point you are looking for.

    Like this

            <Image x:Name="myImage" Source="/Assets/test2 - Copy (6).png" Stretch="None" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <RotateTransform x:Name="PhotoButtonRotateTransform" />
                </Image.RenderTransform>
            </Image>

    Cs:

            private void Button_Click_4(object sender, RoutedEventArgs e)
            {
                var storyboard = new Storyboard();
                var doubleAnimation = new DoubleAnimation();
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(300);
                doubleAnimation.EnableDependentAnimation = true;
                doubleAnimation.To = 90;
                Storyboard.SetTargetProperty(doubleAnimation, "Angle");
                Storyboard.SetTarget(doubleAnimation, PhotoButtonRotateTransform);
                storyboard.Children.Add(doubleAnimation);
                storyboard.Begin();
            }
    

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, July 5, 2018 9:58 AM
    Moderator
  •  I'm using the newer Composition API. 

    https://docs.microsoft.com/en-us/windows/uwp/composition/composition-animation

    It doesn't run animations on the UI thread.  I've already been using it quite extensively and created implicit expression animations, implicit show/hide animations, and connected animations.  I appreciate your response but it doesn't make sense for you to offer an old Storyboard as an answer.

    " Generally, this property is used when you wants to a new visual to add to another visual. Use this property to decide where the visual will be placed."

    Well yes the documentation example describes that as a use, but it also sets the rotation axis point which is what an "AnchorPoint" has always done in decades of graphic design software.  Being able to set the child visual's relative offset to the center of the child seems to be pretty useless if you still have to calculate the pixel center point of the parent.

    However I've discovered that Visual.RelativeOffsetAdjustment is the property clearly intended to correct this problem.  If you set the child visual's RelativeOffsetAdjustment to 0.5,0.5,0 along with AnchorPoint 0.5,0.5 and then add it to a parent visual it will appear in the exact center instead of the top-left.  The problem is that if you want to set the anchor point to a visual that already exists in the UI, RelativeOffsetAdjustment has no effect (which is why I had no luck experimenting with it initially).  Even if you set RelativeOffsetAdjustment to cener first, then set AnchorPoint, it behaves as if RelativeOffsetAdjustment doesn't exist and it shifts the UIElemet to its parent's top-left corner. This seems like a bug to me.

    Thursday, July 5, 2018 12:41 PM
  • Anyway the solution for dynamic axis point is this:

    myVisual.CenterPoint = new Vector3(myVisual.Size.X / 2, myVisual.Size.Y / 2, 0);
    Although if the UIElement is an image and it hasn't been loaded yet this is problematic.

    • Marked as answer by seanocali Thursday, July 5, 2018 2:58 PM
    • Edited by seanocali Thursday, July 5, 2018 4:54 PM
    Thursday, July 5, 2018 2:58 PM