Question

我刚刚开始使用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();
        }

    }
}

一个视图类：

<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模式，所以任何评论都会非常感激。此外，当按下提交时，我会期望我的图像加载，但这不会发生，任何人都可以建议为什么？

非常感谢提前..

Answer 1

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

模型，它将包含路径本身;
ViewModel，它包含BitmapImage并从Model中初始化它并构建时间。

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

现在，一个优点是，你的BitmapImage在设置时获得了自己的NotifyPropertyChanged调用，你将不再有任何问题，或者View部件直接绑定到模型。

对于您的CustomImageViewModel，这看起来更像是一个MainViewModel-ish的东西。您仍然可以使用它来存储ViewModels。

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

1 个答案: