Question

我已经阅读了很多关于这个问题的答案，但是它们经常包含类似于＆＃34;你错过了INotifyPropertyChanged＆＃34;。我使用MVVM light来实现ViewModelBase，ObservableObject等。

查看：

<Window x:Class="BaseFlyingFigure.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:BaseFlyingFigure"
    xmlns:helpers="clr-namespace:BaseFlyingFigure.Helpers"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="525"
    DataContext="{Binding MainViewModel, Source={StaticResource Locator}}">
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <cmd:EventToCommand Command="{Binding LoadedCommand}" />
    </i:EventTrigger>
    <i:EventTrigger EventName="PreviewKeyDown">
        <cmd:EventToCommand Command="{Binding PreviewKeyDownCommand}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Menu Grid.Row="0">
        <MenuItem Header="File">
            <MenuItem Header="Exit" Command="{Binding AppExitCommand}" />
        </MenuItem>
    </Menu>
    <ItemsControl Grid.Row="1" helpers:SizeObserver.Observe="True"
                  helpers:SizeObserver.ObservedWidth="{Binding CanvasWidth, Mode=OneWayToSource}"
                  helpers:SizeObserver.ObservedHeight="{Binding CanvasHeight, Mode=OneWayToSource}"
                  ItemsSource="{Binding Elements, Converter={helpers:ElementToShapeConverter}, 
        Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                  >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas ClipToBounds="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

视图模型：

using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using BaseFlyingFigure.Services.Interfaces;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

namespace BaseFlyingFigure.ViewModels
{
    public class MainViewModel : ViewModelBase
    {
        private readonly IFigureRepository _repository;
        private ObservableCollection<Element> _elements = new ObservableCollection<Element>();


        public MainViewModel(IFigureRepository repository)
        {
            _repository = repository;

            AppExitCommand = new RelayCommand(Exit);
            LoadedCommand = new RelayCommand(WindowLoaded);

            PreviewKeyDownCommand = new RelayCommand<KeyEventArgs>(PreviewKeyDown);

            Elements.Add(new Element(new Ellipse {
                    Fill = Brushes.HotPink,
                    Width = 100,
                    Height = 100
                })
                {Left = 250, Top = 250});
        }

        public RelayCommand AppExitCommand { get; private set; }
        public RelayCommand LoadedCommand { get; private set; }
        public RelayCommand<KeyEventArgs> PreviewKeyDownCommand { get; private set; }

        public double CanvasWidth { get; set; }
        public double CanvasHeight { get; set; }

        public ObservableCollection<Element> Elements
        {
            get { return _elements; }
            set 
            {
                if (value != _elements)
                    Set(ref _elements, value);
            }
        }

        private void PreviewKeyDown(KeyEventArgs e)
        {
            switch (e.Key) {
                case Key.OemPlus:
                    Elements.Add(new Element(new Ellipse
                    {
                            Fill = Brushes.HotPink,
                            Width = 100,
                            Height = 100
                        })
                        {Left = 250, Top = 250});
                    Debug.WriteLine("+");
                    break;
            }
        }

        private void WindowLoaded()
        {
            Elements.CollectionChanged += (sender, args) => Debug.WriteLine("changed");
        }

        private void Exit() => Application.Current.Shutdown();
    }
}

转换器：

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Windows.Data;
using System.Windows.Markup;
using BaseFlyingFigure.ViewModels;

namespace BaseFlyingFigure.Helpers
{
    public class ElementToShapeConverter : MarkupExtension, IValueConverter
    {
        private static ElementToShapeConverter _converter;

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var list = (value as ICollection<Element>)?.Select(el => el.Shape).ToList();
            return list;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return _converter ?? (_converter = new ElementToShapeConverter());
        }
    }
}

元素：

using System.Windows.Controls;
using System.Windows.Shapes;
using GalaSoft.MvvmLight;

namespace BaseFlyingFigure.ViewModels
{
    public class Element : ObservableObject
    {
        private double _left;
        private Shape _shape;
        private double _top;

        public Element(Shape shape)
        {
            Shape = shape;
        }

        public double Left
        {
            get { return _left; }
            set
            {
                Set(ref _left, value);
                Canvas.SetLeft(Shape, value);
            }
        }

        public double Top
        {
            get { return _top; }
            set
            {
                Set(ref _top, value);
                Canvas.SetTop(Shape, value);
            }
        }

        public Shape Shape
        {
            get { return _shape; }
            set { Set(ref _shape, value); }
        }
    }
}

当我们按+时，CollectionChanged会触发。但是画布显示在构造函数中制作和添加的形状。的 ViewModelLocator：

public class ViewModelLocator
{
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
        SimpleIoc.Default.Register<MainViewModel>();
        SimpleIoc.Default.Register<IFigureRepository, FigureRepository>();
    }

    public MainViewModel MainViewModel => ServiceLocator.Current.GetInstance<MainViewModel>();
}

这有什么不对？ XAML中的任何错误或其他什么错误？

Answer 1

您的方法的基本问题是您在视图模型中使用$(document).ajaxComplete(function(){ //your code here });个对象。

除此之外，不可能有多个可视化此视图模型的视图（因为UIElements只能有一个父视图），它还会强制您使用非常规和有缺陷的方法来转换Shape到ItemsSource绑定的转换器中的ObservableCollection<Element>。正如评论和其他答案中所述，从您的转换器返回的List<Shape>不会通知视图List<Shape>中的更改。

适当的MVVM方法将使用没有UI元素的形状的表示，例如像这样：

ObservableCollection<Element>

您现在可以声明一个常规的DataTemplate，以便在ItemsControl中显示形状：

public class Element
{
    public Geometry Shape { get; set; }
    public Brush Fill { get; set; }
    public Brush Stroke { get; set; }
    public double StrokeThickness { get; set; }
}

将示例椭圆添加到视图模型现在看起来像这样：

<ItemsControl ItemsSource="{Binding Elements}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Shape}"
                  Fill="{Binding Fill}"
                  Stroke="{Binding Stroke}"
                  StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果由于任何原因您还需要为每个元素添加额外的x / y位置偏移量，则可以向Element类添加两个属性

Elements.Add(new Element
{
    Shape = new EllipseGeometry(new Point(250, 250), 50, 50),
    Fill = Brushes.HotPink
});

并向使用这些属性的ItemsControl添加public class Element { ... public double X { get; set; } public double Y { get; set; } }：

ItemsContainerStyle

Answer 2

我认为这是因为ElementToShapeConverter.Convert会创建一个新的List＆lt;＆gt;并返回。这可能不会破坏视图模型中对集合的绑定，但视图模型中的集合将不再因更改而失效。

我认为你的ViewModel应该有一个名为Shapes的单独的ObservableCollection属性，它可以在调用Elements集合时过滤Shapes而不是Converter。您可以在Elements集合的CollectionChanged事件中使其无效。

当ObservableCollection触发CollectionChanged

2 个答案: