MVVM 将自定义属性绑定到视图模型

Question

我是 MVVVM 的新手，所以如果这是愚蠢的问题，请原谅我。我正在使用此示例http://www.codeproject.com/Articles/36848/WPF-Image-Pixel-Color-Picker-Element 并包含该库以获取由图像的用户像素指示的颜色。它看起来不错，并且在矩形选定的颜色中效果很好，但我需要将选定的值绑定到视图模型。

这是我的 xaml 代码：

<Window x:Class="MovieEditor.View.PixelSelector"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ctrls="clr-namespace:ColorPickerControls;assembly=ColorPickerControls"
        xmlns:local="clr-namespace:MovieEditor.MVVMCommon"
         Title="FilterDesigner" Height="550" Width="550"
                Icon="..\Resources\Images\icon.ico"
        xmlns:VM="clr-namespace:MovieEditor.ViewModel">
        <Window.DataContext>
        <VM:PixelSelectorVM/>
    </Window.DataContext>
    <Window.Resources>
        <local:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
    </Window.Resources>
    <Grid Background="#FF191919" >
        <DockPanel>
            <Grid Margin="10,10,10,1">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto" MinHeight="38"/>
                </Grid.RowDefinitions>

                <Border BorderBrush="White" BorderThickness="5" Margin="0,39,0,11">
                    <ctrls:ImageColorPicker Binding.XmlNamespaceManager="{Binding  p PixelSelectorVM.MyImageColorPicker, UpdateSourceTrigger=PropertyChanged}" 
                                            x:Name="image" Source ="{Binding Frame}" Margin="0,36,0,0"
                                            />

                </Border>
                <Border Width="77"
                    HorizontalAlignment="Center"
                    BorderBrush="White" BorderThickness="1" Margin="263,2,182,435">
                    <Rectangle Fill="{Binding ElementName=image, Path=SelectedColor,
                    Converter={StaticResource ColorToBrushConverter}}" RenderTransformOrigin="0.549,0.429" Margin="1"/>

                </Border>
                <Button Content="Save" Command="{Binding Save}" Margin="165,0,0,4" Grid.Row="1" HorizontalAlignment="Left" Width="60"/>
                <Label Content="Selected pixel color:" HorizontalAlignment="Left" Height="18" Margin="140,11,0,0" VerticalAlignment="Top" Width="110"/>
                <Button Content="Cancel" Command="{Binding Cancel}" Margin="0,1,165,4" HorizontalAlignment="Right" Width="60" RenderTransformOrigin="0.5,0.5" Grid.Row="1">
                </Button>
            </Grid>
        </DockPanel>
    </Grid>
</Window>
</code>

这是我的视图模型：

 public class PixelSelectorVM : ViewModelBase
        {
            private BitmapImage frame;
            public MainWindowVM parentMainWindowVM;
            private ImageColorPicker imageColorPicker;

            public ImageColorPicker MyImageColorPicker
            {
                get
                {
                    return this.imageColorPicker;
                }
                set
                {
                    this.imageColorPicker = value;
                    OnPropertyChanged("MyImageColorPicker");
                }
            }
            public BitmapImage Frame
            {
                get
                {
                    return this.frame;
                }
                set
                {
                    this.frame = value;
                    OnPropertyChanged("Frame");
                }
            }

            public PixelSelectorVM(BitmapImage image, MainWindowVM mainWindowVM)
            {
                this.frame = image;
                this.parentMainWindowVM = mainWindowVM;
                this.imageColorPicker = new ImageColorPicker();
                this.imageColorPicker.Source = image;
            }

            public PixelSelectorVM() { }

            public ICommand Save
            {
                get
                {
                    return new RelayCommand(SaveExecute);
                }
            }

            public ICommand Cancel
            {
                get
                {
                    return new RelayCommand(CancelExecute);
                }
            }

            private void SaveExecute()
            {

            }

            private void CancelExecute()
            {

            }
        }

请建议我解决方案如何将所选颜色传递给查看模型

Answer 1

您应该能够将 ImageColorPicker 的 SelectedColor 绑定到 ViewModel 的属性。

所以在 XAML 中添加绑定：

SelectedColor="{Binding MySelectedColor, Mode=TwoWay}"

并在 VM 中添加 MySelectedColor 属性：

    private Color selectedColor;
    public Color MySelectedColor
    {
        get
        {
            return this.selectedColor;
        }
        set
        {
            this.selectedColor = value;
            OnPropertyChanged("MySelectedColor");
        }
    }

当控件的 SelectedColor 发生变化时，它应该会自动更新 VM 中的 MySelectedColor。