在VB.Net中将多个基于XAML的WPF控件动态添加到Canvas

Question

像主题一样，我想动态添加相同模板的WPF控件，但在其中添加不同数据。

如您在图片中所看到的，我要复制的控件有些复杂。 整个控件包装在ScrollViewer Canvas 。 每个StackPanel包装了TextBlock和another Canvas控件，这个StackPanel是我想要复制的。

它的编码如下：

<ScrollViewer x:Name="ScrollBoard" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
            <Canvas x:Name="CanvasBoard" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="250" Background="Gray">

                <StackPanel x:Name="CanvasStack" Background="DimGray">
                    <CheckBox />

                    <Border x:Name="CanvasBorder" BorderBrush="Black" BorderThickness="1">
                        <Canvas Width="150" Height="200" ClipToBounds="True">

                            <Image x:Name="CanvasImage" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Source="C:\test.jpg"/>

                        </Canvas>
                    </Border>

                    <TextBlock Text="Test.jpg" />
                </StackPanel>

            </Canvas>
        </ScrollViewer>

我想在CanvasBoard Canvas控件内复制CanvasStack StackPanel控件。

当然，不仅是重复的，而且还想控制它。 例如，更改位置，编辑TextBlock文本，替换Image并获取Click事件等。

另外，我将不会使用ListBox或ListView ，因为每个控件都应以各种大小的绝对x，y坐标定位。

有一些示例在做类似的事情，例如“向特定控件添加按钮”。 但是我发现的只是在后端添加具有硬编码属性的控件，这些属性可能不适合这种复杂的控件。

先感谢您。

Answer 1

每当您打算多次创建相同的ui时，就应该考虑模板。

当您想要改变任何事物的属性时，您应该考虑数据模板，并将那些改变的事物绑定到视图模型的公共属性。

如果在同一区域中有重复的控件，则第一个候选对象应该是某种itemcontrol。

里面有一个堆栈面板，它可以容纳所有东西-但是您可以轻松地更改它。

对于一块画布上的许多事物，您可以使一个项目的项目面板控制一个画布。

您绝对不需要用户控件来封装您的标记，您只需要一个数据模板即可。

为您的窗口构建一个视图模型。 为您要复制的每个事物构建一个视图模型（vm）。

将可观察的vm集合绑定到itemscontrol的itemssource。

定义与该类型的视图模型关联的数据模板。

我使用C＃工作，因此如果尝试编写VB代码，可能会出错。 通过在线转换器运行以下代码。

标记：

<Window.DataContext>
    <local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
    <ItemsControl x:Name="ic" ItemsSource="{Binding Items}">
        <ItemsControl.Resources>
            <DataTemplate DataType="{x:Type local:StackyVM}">
                <StackPanel x:Name="CanvasStack" Background="DimGray">
                    <CheckBox />
                    <Border x:Name="CanvasBorder" BorderBrush="Black" BorderThickness="1">
                        <Canvas Width="150" Height="200" ClipToBounds="True">

                            <Image x:Name="CanvasImage" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" 
                                   Source="{Binding ImageSource}"/>
                        </Canvas>
                    </Border>
                    <TextBlock Text="Test.jpg" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.Resources>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Name="TheCanvas"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Top" Value="{Binding Top}"/>
                <Setter Property="Canvas.Left" Value="{Binding Left}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

每个堆栈的视图模型

public class StackyVM : BaseViewModel
{
    private Double left;

    public Double Left
    {
        get { return left; }
        set
        {
            left = value;
            RaisePropertyChanged();
        }
    }

    private Double top;

    public Double Top
    {
        get { return top; }
        set { top = value; RaisePropertyChanged(); }
    }

    public string ImageUrl { get; set; }

}

添加将随每个堆栈而变化的任何其他属性并将其绑定。 为每个堆栈实例化一个实例，并将其添加到绑定的observablecollection中：

public class MainWindowViewModel : BaseViewModel
{
    public ObservableCollection<StackyVM> Items { get; set; }

然后将每个都模板化为堆栈。

BaseViewModel实现了inotify属性更改：

public  class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}