Issue with Canvas.Left and Canvas.Top

Question

<Canvas x:Name="Cnv"
                                            Grid.Column="1"
                                            Height="600"
                                            Width="218">
                                        <Button x:Name="pointButton"
                                                Canvas.Left="{Binding SelectedPointX, Mode=TwoWay}"
                                                Canvas.Top="{Binding SelectedPointY, Mode=TwoWay}"
                                                Style="{StaticResource PbmButtonSelected}"
                                                Visibility="{Binding SelectedPointXYButton, Mode=TwoWay,  Converter={StaticResource BoolToVis}}" />
                                    </Canvas>

When i try to bind a button to selected x,y button visible. but it just stay at top of the screen. SelectedPointX, SelectedPointY has values checked and confirmed. If i enter value static in it, works perfectly.

Answer 1

Hello ManuMichaelSamuel-5936 Welcome to Microsoft Q&A.

During the testing, Canvas.Left and Top property could work in binding model in my project, I'm afraid you have not implemented INotifyPropertyChanged interface for SelectedPointX SelectedPointY property cause this problem. I have made complete code sample below, and it works well. Please check it.

Code Behind

public sealed partial class MainPage : Page, INotifyPropertyChanged  
{  
    public MainPage()  
    {  
        this.InitializeComponent();  
         
        this.DataContext = this;  
    }  
    private double _selectedPointX;  
    private double _selectedPointY;  
  
    public event PropertyChangedEventHandler PropertyChanged;  
    private void OnPropertyChanged([CallerMemberName] string PropertyName = null)  
    {  
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));  
    }  
  
    public double SelectedPointX  
    {  
  
        get  
        {  
            return _selectedPointX;  
        }  
        set  
        {  
            _selectedPointX = value;  
            OnPropertyChanged();  
        }  
    }  
    public double SelectedPointY  
    {  
        get { return _selectedPointY; }  
        set  
        {  
            _selectedPointY = value;  
            OnPropertyChanged();  
        }  
    }  
  
    private void pointButton_Click(object sender, RoutedEventArgs e)  
    {  
        SelectedPointX += 10;  
        SelectedPointY += 10;  
    }  
}  

Xaml Code

<Grid>  
    <Canvas x:Name="Cnv">  
        <Button  
            x:Name="pointButton"  
            Canvas.Left="{Binding SelectedPointX, Mode=TwoWay}"  
            Canvas.Top="{Binding SelectedPointY, Mode=TwoWay}"  
            Click="pointButton_Click"  
            Content="Button" />  
    </Canvas>  
</Grid>  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.