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);
    }

Intercollegiate

Your image is in the resources, so why not access it in the regular way with Properties.Resources.<ImageName> rather than using reflection to extract it? – Humor

Please read at least Imaging Overview before starting to code. – Rally

Answer 1

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.

Franky

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? – Intercollegiate

Answer 2

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);

Thitherto

@Intercollegiate Image here means the WPF Image control, and bitmap is not the System.Drawing.Bitmap you used, but could be a BitmapImage. – Rally