Why Canvas.SetRight never work when Canvas.SetLeft once set?

[kyuranger]

I need to animate a border from the left side to the right side in a canvas by code.

What's more, in actual code, the width of the Canvas and the width of the Border are unpredictable. So, I have to use Canvas to implement this.

Here is my code:

<Window xmlns="https://github.com/avaloniaui"
        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"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.MainWindow"
		xmlns:Local="using:AvaloniaApplication1"
        Title="AvaloniaApplication1">
	<Canvas Height="{Binding $parent.Bounds.Height}" Background="Green" Width="600">
		<Border Height="100" Width="100" Background="Red" Name="B">
			<Border.Transitions>
				<Transitions>
					<DoubleTransition Property="Canvas.Left" Duration="0:0:0.5"></DoubleTransition>
					<DoubleTransition Property="Canvas.Right" Duration="0:0:0.5"></DoubleTransition>
				</Transitions>
			</Border.Transitions>
		</Border>
	</Canvas>
</Window>

using Avalonia.Controls;
using SkiaSharp;
using System;
using System.Runtime.InteropServices;
using System.Drawing;
using System.Diagnostics;
using System.IO;
using System.Drawing.Imaging;
using System.Threading.Tasks;
using Avalonia.Threading;

namespace AvaloniaApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();            
            this.Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
        {
            Boolean a = true;            
            Task.Run(async () => {
                while (true)
                {
                    if (a)
                    {                        
                        Dispatcher.UIThread.Invoke(() =>
                        {                            
                            Canvas.SetLeft(B, 0);
                        });
                        Debug.WriteLine("Left");
                    }
                    else
                    {
                        Debug.WriteLine("Right");
                        Dispatcher.UIThread.Invoke(() =>
                        {                            
                            Canvas.SetRight(B, 0);
                        });
                    }
                    a = !a;
                    await Task.Delay(500);
                }
            });
        }       
      
    }
}

Now I found it the Canvas.SetRight never works while Canvas.SetLeft once set.

What's wrong with my code?

[maxkatz6]

I haven't debug it, but I assume that's because you leave "0" value there, which is still a valid coordinate value.
If you want to clear LeftProperty and set RigthProperty instead, you should call B.ClearProperty(Canvas.LeftProperty)

[kyuranger]

Em...it seems the animation doesn't work any. I want the border to move from left to right and right to left for infinity.

[maxkatz6]

Because transition works on a single property, animating between previous and new value.
If you clear one property and set another - it won't understand how to animated that.

Instead, just use single Left property, with a single transition on it.

[kyuranger]

All right, Thank you.

[BAndysc]

@kyuranger Alternatively, you can use Implicit Compositor Animations instead

Avalonia/samples/ControlCatalog/Pages/CompositionPage.axaml.cs

Line 95 in 3eda9a0

private void EnsureImplicitAnimations()

, which should work in your case