我想在我的 Canvas 用户 MVVM 模型上创建一个用户控件

Question

我有问题.. 我想尝试在画布上制作用户控件

但是 Visual Studio 检查此代码没有任何错误是行不通的

    <Grid Grid.Row="1" Grid.Column="1" Background="DarkGray">
        <ItemsControl ItemsSource="{Binding Shelfs}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl>
                        <ContentControl.Style>
                            <Style TargetType="ContentControl">
                                <Style.Triggers>
                                    <!-- Assuming UCShelf is the default type -->
                                    <DataTrigger Binding="{Binding Type}" Value="Port">
                                        <Setter Property="ContentTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <UC:UCPort Width="{Binding Width}"
                                                       Height="{Binding Height}"
                                                       Visibility="Visible"/>
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Type}" Value="Shelf">
                                        <Setter Property="ContentTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <UC:UCShelf Width="{Binding Width}"
                                                        Height="{Binding Height}"
                                                        Visibility="Visible"/>
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ContentControl.Style>
                    </ContentControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

This is my Canvas in MainWindow

    private ObservableCollection<Shelf> _shelfs;
    public IEnumerable<Shelf> Shelfs => _shelfs;

    public MainViewModel()
    {
        _shelfs = new ObservableCollection<Shelf>();
    }

    private ICommand addShelfCommand;

    public ICommand AddShelfCommand
    {
        get
        {
            return (this.addShelfCommand) ?? (this.addShelfCommand = new RelayCommand(AddShelf));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private void AddShelf()
    {
        if(_shelfs == null)
        {
            _shelfs = new ObservableCollection<Shelf>();
        }
        _shelfs.Add(new Shelf {X = (_shelfs.Count *  40), Y = 10, Width = 30, Height = 30 });
        OnPropertyChanged(nameof(Shelfs));
        MessageBox.Show("Total Shelf = " + _shelfs.Count);
    }

`这是我的 MainViewModel'

所以..我错过了什么？'

'我单击按钮 AddShelfCommand、AddPortCommand 但没有反应 AddshelfCommand 和 AddPortCommand 正在工作，但我无法检查 UI`

Answer 1

Left

和

Top

是

Canvas

'附加属性，不是普通属性。因此，您必须使用特殊语法才能正确绑定它们：

        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="(Canvas.Left)" Value="{Binding X}"/>
                <Setter Property="(Canvas.Top)" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>

注意包裹

Canvas.Left

和

Canvas.Top

路径的括号。