UWP canvas动态内容

Question

I want to be able to dynamically add different (self-created) "widgets" to my canvas and position them using Canvas.Top and Canvas.Left .

I have been able to add items using Canvas.Children.Add() , but I can't figure out how to create a binding to the Top and Left values. Would it be a better idea to somehow bind the contents of the Canvas to a list and create all the bindings in XAML? Then again, how would I do that?

Answer 1

If you don't know the bindings in UWP, you can see this document .

Depending on your situation, you can consider using MVVM for binding, creating a ViewModel in Code-Behind and using Binding in the xaml to bind related properties.

CanvasPageViewModel.cs

public class CanvasPageViewModel : INotifyPropertyChanged
{
    private double _rectTop;
    public double RectTop
    {
        get => _rectTop;
        set
        {
            _rectTop = value;
            OnPropertyChanged();
        }
    }
    private double _rectLeft;
    public double RectLeft
    {
        get => _rectLeft;
        set
        {
            _rectLeft = value;
            OnPropertyChanged();
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName]string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

CanvasPage.xaml.cs

public CanvasPageViewModel viewModel = new CanvasPageViewModel();
public CanvasPage()
{
    this.InitializeComponent();
    this.DataContext = viewModel;
    viewModel.RectTop = 20;
    viewModel.RectLeft = 100;
}

CanvasPage.xaml

<Grid>
    <Canvas Width="500" Height="500" Background="White">
        <Rectangle Width="50" Height="50" Fill="Blue"
                   Canvas.Top="{Binding RectTop}"
                   Canvas.Left="{Binding RectLeft}"/>
    </Canvas>
</Grid>

This is a simple example. If you want to modify the position of the control later, you can directly modify the data source and the UI will synchronize.

---

Update

If you need to manually add child elements of Canvas, you can use this method:

var myRect = new Rectangle() 
{ 
    Height = 50, 
    Width = 100, 
    Fill = new SolidColorBrush(Colors.Blue)
};

myCanvas.Children.Add(myRect);

But if you want to bind the created Rectangle element, as you said, bind the Canvas.Left property, you can write:

public CanvasPageViewModel viewModel = new CanvasPageViewModel();
public CanvasPage()
{
    this.InitializeComponent();
    var myRect = new Rectangle() 
    { 
        Height = 50, 
        Width = 100, 
        Fill = new SolidColorBrush(Colors.Blue) 
    };

    Binding leftBinding = new Binding() 
    { 
        Path = new PropertyPath("RectLeft"),
        Mode=BindingMode.OneWay 
    };
    myRect.SetBinding(Canvas.LeftProperty, leftBinding);
    myCanvas.Children.Add(myRect);
}

Best regards.