How to draw a line on an existing BitmapSource in WPF ?

Question

Hello folks,

I would like to draw a line (or any geometric shape) on an existing BitmapSource object in my WPF application. What is the best way to do it ?

The BitmapSource is the result of a BitmapSource.Create(...) call.

Thanks

• Romain

Answer 1

Below sample will display an image created from a BitmapSource with a red line on top of it. Is that what you are trying to achieve?

XAML:

<Window x:Class="WpfApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid Background="LightBlue">
        <Image Source="{Binding Path=ImageSource}" />
        <Line 
            Stroke="Red" StrokeThickness="10" 
            X1="0" 
            Y1="0" 
            X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" 
            Y2="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" />
    </Grid>
</Window>

Code behind:

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace WpfApplication
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            DataContext = this;
        }

        public BitmapSource ImageSource
        {
            get
            {
                PixelFormat pf = PixelFormats.Bgr32;
                int width = 200;
                int height = 200;
                int rawStride = (width * pf.BitsPerPixel + 7) / 8;
                byte[] rawImage = new byte[rawStride * height];

                Random value = new Random();
                value.NextBytes(rawImage);

                return BitmapSource.Create(width, height, 96, 96, pf, null, rawImage, rawStride);
            }
        }
    }
}