Creating Image Dynamically

Question

I am having a problem while making a Whack a Mole type game, I am trying to create the images where the mole will appear dynamically, yet there is only a blank white screen where the stack panel is. It is fair to say that I am a noob.

This is my loop where I am trying to create these images:

        Image[] ImageArray = new Image[50];
        InitializeComponent();
        //string ImageName = "Image";
        for (int i = 0; i <= 8; i++)
        {
            Image Image = new Image();
            ImageArray[i] = Image;
            Image.Name = "Image" + i.ToString();
            StackPanel1.Children.Add(ImageArray[i]);
        }

        //Random Number Generator
        Random rnd = new Random();
        int num = rnd.Next(1, 9);

        //If Random Number is "1" Then Image will display
        if (num == 1)
        {
            ImageSource MoleImage = new BitmapImage(new Uri(ImgNameMole));
            ImageArray[1].Source = MoleImage;
        }

This is the StackPanel XAML:

    <Window x:Name="Window1" x:Class="WhackaMole.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="468.843" Width="666.045" OpacityMask="#FFF70D0D"                         Icon="mole2.png" Cursor="" >
<Grid OpacityMask="#FF5D1313">
    <Image Margin="422,191,-185,-69" Source="mole2.png" Stretch="Fill" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>

    <TextBlock HorizontalAlignment="Left" Margin="35,31,0,0" TextWrapping="Wrap"             VerticalAlignment="Top" Height="52" Width="595" FontSize="50" FontFamily="SimHei"><Run Language="en-ca" Text="Can You Catch the Mole?"/></TextBlock>
    <Button x:Name="NewGameBttn" Content="New Game" HorizontalAlignment="Left" Margin="77,0,0,16" VerticalAlignment="Bottom" Width="139" Height="50" FontSize="25" Click="NewGameBttn_Click"/>
    <Button x:Name="CloseBttn" Content="Close" HorizontalAlignment="Left" Margin="245,365,0,0" VerticalAlignment="Top" Width="76" Height="50" FontSize="29" Click="CloseBttn_Click"/>
    <StackPanel x:Name="StackPanel1" HorizontalAlignment="Left" Height="231" Margin="35,112,0,0" VerticalAlignment="Top" Width="525"/>

</Grid>
</Window>

What is the value of ImgNameMole? Also, is this image in your project? — Tejas Sharma
– Tejas Sharma, Commented May 7, 2013 at 18:16

Tejas Sharma · Accepted Answer · 2013-05-07 17:46:47Z

4

As far as I can tell you're creating a new object of type Image but that Image really doesn't have anything to display. You need to set the Source of your Image. Here's an example stolen from MSDN.

Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("myPicture.jpg", UriKind.RelativeOrAbsolute));
LayoutRoot.Children.Add(myImage);

As townsean pointed out, you should probably create a Style for your Image where you can set common properties such as Height, Width etc.

answered May 7, 2013 at 17:46

Tejas Sharma

3,45024 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ashley Grenon Over a year ago

doh, I totally overlooked that part too :P I'll need to update my answer

Andrew Over a year ago

Later on in the program I am giving the ImageArray a value, I will edit my question.

Tejas Sharma Over a year ago

Then perhaps something is wrong with your Uri? Try specifying UriKind.RelativeOrAbsolute in the constructor for Uri If that doesn't fix it, please post your xaml.

Andrew Over a year ago

I'll add the XAML to the question :) Thanks for your help!

Tejas Sharma Over a year ago

Can you post a little bit more? That one line is not much to go by.

Dave Clemmer · Accepted Answer · 2013-05-07 22:15:55Z

2

My guess is that since you are adding the items to a StackPanel, the StackPanel is choosing the default mins for height and width on the image (which is probably 0), and that is why you are not seeing anything.

Try setting a value for the Height and Width of the image and see if anything shows.

Also, as Tejas pointed out you are not setting the image source.

EDIT: Set the Image width like this:

Image myImage = new Image();
myImage.Width = 25;
myImage.Height = 25;

Do something like this in your for-loop where you first create the images.

edited May 7, 2013 at 22:15

Dave Clemmer

3,77312 gold badges53 silver badges72 bronze badges

answered May 7, 2013 at 17:47

Ashley Grenon

9,5855 gold badges43 silver badges55 bronze badges

5 Comments

Andrew Over a year ago

I have a height and width set in the XAML :(

Ashley Grenon Over a year ago

I don't see where you are setting the height and width for each image in xaml. Did you mean you set the height and width for the stackpanel?

Andrew Over a year ago

Oh, yes. How would I set the image size? Sorry I am new to this :/

Andrew Over a year ago

OH MAN THANK YOU! I'VE BEEN WORKING ON THIS FOR FOREVER! :)

Ashley Grenon Over a year ago

No prob. I've been bitten many times with the StackPanel using default min values :)

Collectives™ on Stack Overflow

Creating Image Dynamically

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related