UWP холст динамический контент - PullRequest
Новая
       16

UWP холст динамический контент

0 голосов
/ 28 октября 2019

Я хочу иметь возможность динамически добавлять различные (самостоятельно созданные) «виджеты» на холст и размещать их с помощью Canvas.Top и Canvas.Left.

Я смог добавить элементы с помощью Canvas.Children.Add(), но я не могу понять, как создать привязку к значениям Top и Left. Не лучше ли связать содержимое Canvas со списком и создать все привязки в XAML? Опять же, как бы я это сделал?

1 Ответ

2 голосов
/ 28 октября 2019

Если вы не знаете привязок в UWP, вы можете увидеть этот документ .

В зависимости от вашей ситуации, вы можете рассмотреть возможность использования MVVM для привязки, создав ViewModelв Code-Behind и использовании Binding в xaml для привязки связанных свойств.

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>

Это простой пример. Если вы хотите изменить положение элемента управления позже, вы можете напрямую изменить источник данных, и пользовательский интерфейс будет синхронизироваться.

Обновление

Если вам нужночтобы вручную добавить дочерние элементы Canvas, вы можете использовать этот метод: 

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

myCanvas.Children.Add(myRect);

Но если вы хотите связать созданный элемент Rectangle, как вы сказали, связать свойство Canvas.Left, вы можете написать: 

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);
}

С уважением.

...