按照 MVVM 模式在 WPF 中创建自定义图像类

Question

我刚开始使用 MVVM，目前仍然发现很多事情令人困惑。

所以我现在尽量保持简单。

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

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

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

我有一个模型视图类如下：

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

    }
}

还有一个视图类：

<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 模式的正确路线，因此任何 cmets 将不胜感激。此外，当按下提交时，我本来希望我的图像会加载，但没有发生这种情况，谁能告诉我为什么？

提前非常感谢..

Answer 1

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

• 模型，将包含路径本身；
• ViewModel，其中包含 BitmapImage 并从 Model 和构造时间对其进行初始化。

路径只是用于保存的数据，它适合模型，而BitmapImage是数据的显示方式，应该在ViewModel中构建。

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

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