How to get Image Pixel Position and RGB values using Wpf, MVVM?

Question

I am able to load Image and get pixel position on mousemove, Now I want to display RGB value of each pixel. Can any one help me

MainWindowViewModel.cs

namespace WpfAppTest.ViewModel { class MainViewModel: ViewModelBase { private BitmapImage _image; public BitmapImage Image { get { return _image; } set { _image = value; OnPropertyChanged("Image"); } } public MainViewModel() { _image = new BitmapImage(); _textBox = new TextBox(); }

    private RelayCommand _loadImageCommand;
    public ICommand LoadImageCommand
    {
        get
        {
            if (_loadImageCommand == null)
            {
                _loadImageCommand = new RelayCommand(param => LoadImage());
            }
            return _loadImageCommand;
        }
    }
    private void LoadImage()
    {
        OpenFileDialog op = new OpenFileDialog();
        op.Title = "Select a Picture";
        op.Filter = "Images (*.BMP;*.JPG;*.GIF;*.PNG;*.TIFF)|*.BMP;*.JPG;*.GIF;*.PNG;*.TIFF|" + "All files (*.*)|*.*";
        op.Multiselect = true;
        if (op.ShowDialog() == true)
        {
            Image = new BitmapImage(new Uri(op.FileName));
        }
    }

    private RelayCommand _mouseMoveCommand;
    public RelayCommand MouseMoveCommand
    {
        get
        {
            if (_mouseMoveCommand == null) return _mouseMoveCommand = new RelayCommand(param => ExecuteMouseMove((MouseEventArgs)param));
            return _mouseMoveCommand;
        }
        set { _mouseMoveCommand = value; }
    }

    private void ExecuteMouseMove(MouseEventArgs e)
    {   
        System.Windows.Point p = e.GetPosition(((IInputElement)e.Source));
        TextBox.Text = String.Format("X: {0} Y:{1}", (int)p.X, (int)p.Y);
    }

    private TextBox _textBox;
    public TextBox TextBox
    {
        get { return _textBox; }
        set
        {
            _textBox = value;
            OnPropertyChanged("TextBox");
        }
    }
}

}

Here in :
private void ExecuteMouseMove(MouseEventArgs e)
        {   
            System.Windows.Point p = e.GetPosition(((IInputElement)e.Source));
            TextBox.Text = String.Format("X: {0} Y:{1}", (int)p.X, (int)p.Y);
        }
I am able to get pixel position, now i want rgb value of pixels

MouseBehaviour:

public class MouseBehaviour
    {
 public static readonly DependencyProperty MouseMoveCommandProperty =
            DependencyProperty.RegisterAttached("MouseMoveCommand", typeof(ICommand), typeof(MouseBehaviour), new FrameworkPropertyMetadata(new PropertyChangedCallback(MouseMoveCommandChanged)));

        private static void MouseMoveCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)d;

            element.MouseMove += new MouseEventHandler(element_MouseMove);
        }

        static void element_MouseMove(object sender, MouseEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)sender;

            ICommand command = GetMouseMoveCommand(element);

            command.Execute(e);
        }

        public static void SetMouseMoveCommand(UIElement element, ICommand value)
        {
            element.SetValue(MouseMoveCommandProperty, value);
        }

        public static ICommand GetMouseMoveCommand(UIElement element)
        {
            return (ICommand)element.GetValue(MouseMoveCommandProperty);
        }
}

MainWindow.xaml:

<Window.Resources>
    <vm:MainViewModel x:Key="MainViewModel"/>
</Window.Resources>
<Grid DataContext="{StaticResource MainViewModel}">
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*" />
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Menu FontSize="20">
            <MenuItem Header="File">
                <MenuItem Header="Open" Command="{Binding LoadImageCommand}"/>
                <MenuItem Header="Reload"/>
                <MenuItem Header="Save"/>
                <MenuItem Header="Exit"/>
            </MenuItem>
            <MenuItem Header="Filters">
                <MenuItem Header="Gray"/>
                <MenuItem Header="Canny"/>
                <MenuItem Header="Sobel"/>
                <MenuItem Header="Laplacian"/>
            </MenuItem>
        </Menu>
    </Grid>
    <Grid Grid.Row="1">
        <Border BorderThickness="1" BorderBrush="Pink">
        <Viewbox Margin="5,5,5,5">
            <viewers:Viewer>
                    <Image x:Name="img" Source="{Binding Image}"
                       Model:MouseBehaviour.MouseMoveCommand="{Binding MouseMoveCommand}">
                    </Image>
            </viewers:Viewer>
        </Viewbox>
        </Border>
    </Grid>
    <Grid Grid.Row="2">
        <StackPanel Orientation="Horizontal">
            <TextBox Focusable="False" Text="{Binding TextBox.Text}" Width="100"/>
            <TextBox Focusable="False" Width="110"/>
        </StackPanel>
    </Grid>
</Grid>

Check [this SO](https://stackoverflow.com/questions/1483928/how-to-read-the-color-of-a-screen-pixel) — Siva Gopal, Nov 20 '17 at 11:16

score 0 · Accepted Answer · answered Nov 27 '17 at 05:10

I found the solution and its working

ViewModel:

class MainViewModel: ViewModelBase
{
    private Bitmap Img;
    public ICommand OpenImg { get; set; }
    public MainViewModel()
    {
        OpenImg = new RelayCommand(openImg, (obj) => true);
    }
    private void openImg(object obj = null)
    {
        OpenFileDialog op = new OpenFileDialog();
        op.Title = "Select a picture";
        op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png;*.bmp;*.tiff|" +
          "JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
          "Portable Network Graphic (*.png)|*.png";
        if (op.ShowDialog() == true)
        {
            ImgPath = op.FileName;
            Img = new Bitmap(ImgPath);
        }
    }

    private string _ImgPath;
    public string ImgPath
    {
        get { return _ImgPath; }
        set
        {
            _ImgPath = value;
            OnPropertyChanged("ImgPath");
        }
    }

    private ICommand _mouseMoveCommand;
    public ICommand MouseMoveCommand
    {
        get
        {
            if (_mouseMoveCommand == null)
            {
                _mouseMoveCommand = new RelayCommand(param => ExecuteMouseMove((MouseEventArgs)param));
            }
            return _mouseMoveCommand;
        }
        set { _mouseMoveCommand = value; }
    }
    private void ExecuteMouseMove(MouseEventArgs e)
    {
        System.Windows.Point p = e.GetPosition(((IInputElement)e.Source));

        if ((p.X >= 0) && (p.X < Img.Width) && (p.Y >= 0) && (p.Y < Img.Height))
        {
            Color color = Img.GetPixel((int)p.X, (int)p.Y);
            int r = color.R;
            int g = color.G;
            int b = color.B;
            float hue = color.GetHue();
            float saturation = color.GetSaturation();
            float brightness = color.GetBrightness();

            XY = String.Format("X: {0} Y: {1}", (int)p.X, (int)p.Y);
            RGB = String.Format("R: {0} G: {1} B: {2}", r.ToString(), g.ToString(), b.ToString());
            HSI = String.Format("H: {0} S: {1:0.000} I: {2:0.000}", (int)hue, saturation, brightness);
        }
    }
    private string xy;
    public string XY
    {
        get { return xy; }
        set
        {
            xy = value;
            OnPropertyChanged("XY");
        }
    }

    private string rgb;
    public string RGB
    {
        get { return rgb; }
        set
        {
            rgb = value;
            OnPropertyChanged("RGB");
        }
    }

    private string hsi;
    public string HSI
    {
        get { return hsi; }
        set
        {
            hsi = value;
            OnPropertyChanged("HSI");
        }
    }

    private ICommand _mouseLeaveCommand;
    public ICommand MouseLeaveCommand
    {
        get
        {
            if (_mouseLeaveCommand == null)
            {
                _mouseLeaveCommand = new RelayCommand(param => ExecuteMouseLeave((MouseEventArgs)param));
            }
            return _mouseLeaveCommand;
        }
        set { _mouseLeaveCommand = value; }
    }

    private void ExecuteMouseLeave(MouseEventArgs e)
    {
        XY = string.Empty;
        RGB = string.Empty;
        HSI = string.Empty;
    }
}

MainWindow.xaml

 <Window.DataContext>
    <vm:MainViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*" />
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0">            
        <Menu FontSize="20">
            <MenuItem Header="File">
                <MenuItem Header="Open" Command="{Binding OpenImg}"/>
            </MenuItem>
        </Menu>            
    </Grid>
    <Grid Grid.Row="1">
        <Border BorderThickness="1" BorderBrush="Pink">
        <Viewbox Margin="5,5,5,5">                
                    <Image x:Name="img" Source="{Binding ImgPath}"
                       Model:MouseBehaviour.MouseMoveCommand="{Binding MouseMoveCommand}"
                           Model:MouseBehaviour.MouseLeaveCommand="{Binding MouseLeaveCommand}">
                    </Image>               
        </Viewbox>
        </Border>
    </Grid>
    <Grid Grid.Row="2">
        <StackPanel Orientation="Horizontal">
            <TextBox Focusable="False" Text="{Binding XY}" Width="100"/>
            <TextBox Focusable="False" Text="{Binding RGB}" Width="115"/>
            <TextBox Focusable="False" Text="{Binding HSI}" Width="130"/>
        </StackPanel>
    </Grid>
    </Grid>
</Grid>

How to get Image Pixel Position and RGB values using Wpf, MVVM?

1 Answers1