C# 按照MVVM模式在WPF中创建自定义映像类

我刚开始使用MVVM，现在仍然发现很多事情让人困惑

因此，目前我正努力让事情尽可能简单

我正在尝试为自定义图像编写代码，稍后用户可以在运行时将其放置在画布控件上。我正在尝试使用MVVM，以便能够在画布上保存和重新加载内容

我使用以下代码创建了一个名为CustomImage的模型类：

namespace StoryboardToolMvvm
{
    public class CustomImage
    {
        public Uri imageLocation { get; set; }
        public BitmapImage bitmapImage { get; set; }
    }
}

我有一个modelview类，如下所示：

namespace StoryboardToolMvvm
{
    class CustomImageViewModel : ViewModelBase
    {
        private CustomImage _customImage;
        private ObservableCollection<CustomImage> _customImages;
        private ICommand _SubmitCommand; 

        public CustomImage CustomImage
        {
            get { return _customImage; }

            set
            {
                _customImage = value;
                NotifyPropertyChanged("CustomImage");
            }
        }

        public ObservableCollection<CustomImage> CustomImages
        {
            get { return _customImages; }

            set
            {
                _customImages = value;
                NotifyPropertyChanged("CustomImages");
            }
        }

        public ICommand SubmitCommand
        {
            get
            {
                if (_SubmitCommand == null)
                {
                    _SubmitCommand = new RelayCommand(param => this.Submit(), null);
                }
                return _SubmitCommand;
            }
        }

        public CustomImageViewModel()
        {
            CustomImage = new CustomImage();
            CustomImages = new ObservableCollection<CustomImage>();
            CustomImages.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(CustomImages_CollectionChanged);
        }

        private void CustomImages_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            NotifyPropertyChanged("CustomImages");
        }

        private void Submit()
        {
            CustomImage.imageLocation = new Uri(@"H:\My Pictures\whale.png");
            CustomImage.bitmapImage = new BitmapImage(CustomImage.imageLocation);
            CustomImages.Add(CustomImage);
            CustomImage = new CustomImage();
        }

    }
}

名称空间故事板工具MVVM
{
类CustomImageViewModel:ViewModelBase
{
私人客户形象(CustomImage);；
私有可观察收集(customImages);；
私有ICommand _SubmitCommand；
公众形象
{
获取{return\u customImage；}
设置
{
_客户形象=价值；
NotifyPropertyChanged（“CustomImage”）；
}
}
公共可观察收集自定义图像
{
获取{return\u customImages；}
设置
{
_顾客形象=价值；
NotifyPropertyChanged（“CustomImages”）；
}
}
公共ICommand提交命令
{
得到
{
如果（_SubmitCommand==null）
{
_SubmitCommand=newrelaycommand（param=>this.Submit（），null）；
}
返回_SubmitCommand；
}
}
公共CustomImageViewModel（）
{
CustomImage=新的CustomImage（）；
CustomImages=新的ObservableCollection（）；
CustomImages.CollectionChanged+=新系统.Collections.Specialized.NotifyCollectionChangedEventHandler（CustomImages\u CollectionChanged）；
}
私有void CustomImages\u CollectionChanged（对象发送方，System.Collections.Specialized.NotifyCollectionChangedEventArgs e）
{
NotifyPropertyChanged（“CustomImages”）；
}
私人提交
{
CustomImage.imageLocation=新Uri（@“H:\My Pictures\whale.png”）；
CustomImage.bitmapImage=新的bitmapImage（CustomImage.imageLocation）；
添加（CustomImage）；
CustomImage=新的CustomImage（）；
}
}
}

和视图类：

<UserControl x:Class="StoryboardToolMvvm.CustomImageView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:viewmodel="clr-namespace:StoryboardToolMvvm"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <viewmodel:CustomImageViewModel x:Key="CustomImageViewModel"/>
    </UserControl.Resources>
    <Grid DataContext="{Binding Source={StaticResource CustomImageViewModel}}">
            <Image Source="{Binding CustomImage.bitmapImage, Mode=TwoWay}" Width="150" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="75,50,0,0" />
            <Button Content="Submit" Command="{Binding SubmitCommand}" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20" />
    </Grid>
</UserControl>

我将此视图添加到MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:StoryboardToolMvvm" x:Class="StoryboardToolMvvm.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <local:CustomImageView HorizontalAlignment="Left" Height="100" Margin="181,110,0,0" VerticalAlignment="Top" Width="100"/>

    </Grid>
</Window>

我非常不确定我是否在MVVM模式方面做得对，因此任何评论都将不胜感激。另外，当按下Submit时，我希望我的图像能够加载，但这并没有发生。有人能告诉我为什么吗

---

非常感谢。

就我对MVVM的理解和您的问题而言，我对您的代码有一个主要的评论。 我认为您的CustomImage实际上是Model和ViewModel层，您应该将其分为两部分：

• 包含路径本身的模型
• ViewModel，其中包含位图图像，并根据模型和构造时间对其进行初始化

路径仅仅是用于保存的数据，它符合模型，而位图图像是数据的显示方式，应该在ViewModel中构造

一个优点是，现在，您的BitmapImage在设置时间获得了自己的NotifyPropertyChanged调用，您将不再有任何问题或视图部分直接绑定到模型

---

至于您的CustomImageViewModel，这看起来更像是MainViewModel。您仍然可以使用它来存储ViewModels。

为什么希望加载图像？您正在图像加载后立即创建CustomImage，以便它更新绑定。但还有另一个问题：CustomImage没有实现INotifyPropertyChanged接口，也没有通知观察者bitmapImage的更改。请告诉我您的确切问题以及您希望实现的目标，因为您的问题并不清楚。您好，我有一个wpf应用程序，我正在尝试将其转换为MVVM，因为我在尝试序列化和反序列化我的旧程序以便保存和加载时遇到了问题。我被告知MVVM是一种发展方向，所以现在我只是想了解一下MVVM的基本知识，通过本文中的代码，我只是想创建一个customControl来显示一个图像，最终我会将事件处理程序附加到图像上以执行移动，调整etcre大小移动提交函数中实例化customImage的最后一行，然后验证需要刷新的属性是否全部实现INotifyPropertyChanged。然后考虑任何绑定errorsHi HichemCSharp的输出框，我删除了实例化CuoSimple的行，我将代码添加到我的视图模型中，以实现URI和BitmapImage上的NoTIFYPrimeType更改，这是一个GET和SET，它与我的视图模型中的另一个GET和设置一样。但这并没有解决任何问题。你能看出我哪里做错了吗？谢谢，这很有帮助。