Adding image objects to wpf with code

Question

I'm a rookie at C# and WPF and I'm trying to create a simple car-simulator. Mainly the idea of the simulator is that I have C#-class that creates car-objects that have for example speed variable that can be changed and timer for moving from left to right. I want to do movement with timer and not for example doubleanimation. In WPF I have AddCarButton for adding cars in certain points in Canvas.

The problem is I dont know how to add cars to Canvas. This is very frustrating because it doesn't sound like a big thing to do but I feel like I have tried everything and not succeeded.

This is latest attempt with car-class. I have tried using Canvas.Set-methods but failed.

class car
{
    private int speed;

    public car(int s)
    {
        speed = s;
        Bitmap bmp = new Bitmap(
        System.Reflection.Assembly.GetEntryAssembly().
        GetManifestResourceStream("MyProject.Resources.car.png"));
        Graphics g = Graphics.FromImage(bmp);
        //Canvas.SetBottom(g, 0);
        //Canvas.SetLeft(g, 0);
        //Canvas.SetBottom(bmp, 0);
        //Canvas.SetLeft(bmp, 0);
    }
    public void addCar(car c)
    {
        Canvas.SetBottom(c, 0);
        Canvas.SetLeft(c, 0);
    }

Your image is in the resources, so why not access it in the regular way with Properties.Resources. rather than using reflection to extract it? — dutzu, Jan 15 '13 at 11:23
Please read at least [Imaging Overview](http://msdn.microsoft.com/en-us/library/ms748873.aspx) before starting to code. — Clemens, Jan 15 '13 at 11:41

someone else · Answer 1 · 2013-01-15T22:39:51.770

If you're coding on WPF you shouldn't use Windows Forms stuff. To work with images you use BitmapSource and its derived classes, and to access your resources programmatically you usually use pack URIs. It's not the only way, though.

Here is a little example that draws some images on a canvas control.

The XAML code for the canvas could be like this (it's just an example):

<Canvas Height="400" HorizontalAlignment="Left" Margin="0" Name="canvas1" VerticalAlignment="Top" Width="400" />

and your main window code...

public partial class MainWindow : Window
{
    BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/BlueCar.png", UriKind.Absolute));
    Image[] carImg = new Image[5];
    Random rnd = new Random();

    public MainWindow()
    {
        InitializeComponent();
        double maxX = canvas1.Width - carBitmap.Width;
        double maxY = canvas1.Height - carBitmap.Height;
        for (int i = 0; i < carImg.Length; i++)
        {
            carImg[i] = new Image();
            carImg[i].Source = carBitmap;
            carImg[i].Width = carBitmap.Width;
            carImg[i].Height = carBitmap.Height;
            Canvas.SetLeft(carImg[i], rnd.NextDouble() * maxX);
            Canvas.SetTop(carImg[i], rnd.NextDouble() * maxY);
            canvas1.Children.Add(carImg[i]);
        }
    }
}

Obviously you need change the name of your image resource. By the way, to add an image go to Project > Add existing item... and select your image file, now your image will appear in the Solution explorer (by default, Visual Studio stores image resources in a folder called "Images"), if you select it you'll see in the Properties window that its Build action is Resource, don't change this! (some people think it should be Embedded resource but that's incorrect).

If you don't get this new Uri("pack://application:,,,/Images/BlueCar.png", UriKind.Absolute), you should read this link on pack URIs.

Thanks for your answer but I'm still having problems adding cars to canvas. For command "Canvas.SetLeft(car(..." I get error "cannot convert from 'Simulator.car' to 'System.Windows.UIElement'". How can I make my car-class act like a UIElement or transform it to UIElement so it can be added? — Sam, Jan 20 '13 at 23:24

score 1 · Answer 2 · answered Jan 15 '13 at 11:31

1

You need to put your bitmap in an Image (and not Graphics), and then you need to add the image to the canvas:

Canvas.Children.Add(image);

answered Jan 15 '13 at 11:31

zmbq

38,013
14
101
171

@Sam `Image` here means the [WPF Image control](http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx), and bitmap is not the `System.Drawing.Bitmap` you used, but could be a [BitmapImage](http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage.aspx). – Clemens Jan 15 '13 at 11:47

Adding image objects to wpf with code

2 Answers2

Linked