Wpf - Display an image without using XAML file

Question

I'm trying to get an image to display using Wpf. I can't hard-code the image in the XAML file, I have to implement it in the .cs files only. (The images are dynamically displayed)

Here's what I got so far :

ImageSource imageSource = new BitmapImage(new Uri(@"C:/Users/Pierrick/Desktop/tileset/1.png"));
System.Windows.Controls.Image image1 = new System.Windows.Controls.Image();
image1.Source = imageSource;

The code runs fine, but nothing displays. No surprise, I didn't specify the image location in the window, but I don't know how to do that.

Thanks in advance for any help !

Answer 1

It actually depends on the layout your container has, for example if you want to add the image to a Grid, let's say that your window looks like this :

<Grid x:Name="Grid1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>            
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

</Grid>

to add an image to the Grid1 programmatically here how :

            ImageSource imageSource = new BitmapImage(new Uri("yep.png",UriKind.Relative));
        System.Windows.Controls.Image image1 = new System.Windows.Controls.Image();
        image1.Source = imageSource;
        Grid.SetColumn(image1, 0);//image1 is added to column 0
        Grid.SetRow(image1, 0);//row 0

        Grid1.Children.Add(image1);

Answer 2

You will have to add the Image control to some layout panel in your application. Suppose you have a MainWindow XAML like this:

<Window ...>
    <Grid x:Name="rootGrid">
    </Grid>
</Window>

You can add the Image to the Children collection of the Grid by

rootGrid.Children.Add(image1);

---

If you are going to dynamically place multiple images at specific locations, you will typically use an ItemsControl with an appropriate view model, that uses a Canvas as its ItemsPanel, and sets each image item's location by binding the Canvas.Left and Canvas.Top properties in its ItemContainerStyle. It would use the Image control in its ItemTemplate:

<ItemsControl ItemsSource="{Binding ImageItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="{Binding Width}"
                    Height="{Binding Height}"
                    Source="{Binding Image}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

The view model would look like this:

public class ImageItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
    public ImageSource Image { get; set; }
}

public class ViewModel
{
    public ObservableCollection<ImageItem> ImageItems { get; set; }
}

As you can see the ItemsSource property of the ItemsControl is bound to the ImageItems property of the view model. The item bindings go to the properties of the data item class ImageItem , ie the element type of the collection.

You would now create an instance of the view model eg in your MainWindow's constructor and assign it to its DataContext :

public MainWindow()
{
    InitializeComponent();

    var vm = new ViewModel
    {
        ImageItems = new ObservableCollection<ImageItem>()
    };

    vm.ImageItems.Add(new ImageItem
        {
            X = 100,
            Y = 100,
            Width = 100,
            Height = 100,
            Image = new BitmapImage(new Uri(...))
        });

    DataContext = vm;
}