[C#, Win8 app] Create a drawable canvas

[DrakeN2k]

Hello I am trying to make a paint app in this metro design language as an experiment. I want to create an array of just say 500X500 of objects. the object would store colour , layer , est. The mouse position would intersect with the grid object (pixel) then the colour would change depending on the colour picked. I can do this simple in game programming languages and SDKs. However how can I draw this colour pixel object using this new XAML mark-up stuff now.

I can create buttons within grids using XAML.

simply how can I create and draw lots of objects on the screen without giving each element an event hander such as and manually creating them in XAML thanks.

[vcfan]

i didn't really understand what you want to do exactly. can you be a little more clear please,maybe i can help.

[DrakeN2k]

Ok, I will try and take it from a another angle.

I want to have a grid just say 5 X5 of rectangles set as the colour blue, you can do this in manually in XMAL.

I want a way to in code (c#) to create a grid of 100X100 rectangles all set the colour blue. To code this in XMAL would take ages. I want the size of the gird to be dynamic.

Then I want the colour of the rectangles to be set to green if the mouse runs over them. Currently the rectangles need an event handers. I want a way to acsess the colour of these rectangles without giving them an event handler.

In other languages (C# , XNA) I would do this ^^^^^ like this

int gridSide = 500;

for (int x = 0;x < gridSide;x++)
{
for (int y = 0; y < gridSide;y++)
{

grid[x,y].add(new rectangle(pos*x,pos*y,1,1, color.blue))
}
}


// to set the colours

If( mousePos.interscts with grid[x.y].collision)
{
grid[x,y].color = Color.green.;
}
[/CODE]

Its not 100% correct above but its on the right lines.

I just dont know, how i can create the layout in XAML dynamic in code instead of manually typing it out like this

[CODE]
<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="150" RenderTransformOrigin="0.662,0.067" Canvas.Left="65">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="_Yellow" Content="Y" Width="50" Height="50" Click="YellowClicked" Grid.ColumnSpan="2" Grid.Column="1"/>
<Button x:Name="_Red" Content="R" Width="50" Height="50" Click="RedClicked"/>
<Button x:Name="_Blue" Content="B" Width="50" Height="50" Click="BlueClicked" Grid.Row="1"/>
</Grid>
[/CODE]

Giving each rectangle an event hander to determin an interaction (like above with an button) would be stupid for what im doing.

[vcfan]

ah ok,now i get it. you don't have to use XAML at all when youre doing dynamic stuff. i just wrote some code that you can try out.im pretty sure this is what youre looking for..

first make your grid in XAML, heres a snippet of mine

<Grid x:Name="mygrid" HorizontalAlignment="Left" Height="600" Margin="372,84,0,0" VerticalAlignment="Top" Width="600" Background="#FF4F6F9E"/>
</Grid>

notice how i gave my grid a name of mygrid. this will be useful when we use code. theres no more XAML from here on out

first we tell it the size of our rows,and we add however many rows we want. notice we are adding them to mygrid.im making a 3x3 grid.

for (int i = 0; i < 3; i++)
			{
				RowDefinition row = new RowDefinition();
				row.Height = new GridLength(200);
				mygrid.RowDefinitions.Add(row);
			}

now the same but our colums. again,3 here

for (int i = 0; i < 3; i++)
			{
				ColumnDefinition col = new ColumnDefinition();
				col.Width = new GridLength(200);
				mygrid.ColumnDefinitions.Add(col);
			}

now we are going to create a button,and put it in a specific row and column, and we can dynamically change the text or color of this button in code

			Button button1 = new Button();
			Color b1color = Color.FromArgb(255,50,205,50);   //you have to add "using Windows.UI" at the top for this to work
			button1.Background = new SolidColorBrush(b1color);
			button1.Content = "Button 1";
			button1.Width = 200;
			button1.Height = 200;

			//add this button to our grid
			mygrid.Children.Add(button1);

			//now we specify which row and column to place our colored button
			//we are placing it at 0x0
			Grid.SetRow(button1, 0);
			Grid.SetColumn(button1, 0);

you can create a loop and make as many colored boxes as you want,and

now whenever we want to change the color in code, we can simply specify our color in the color structure,then simply doing

button1.Background = new SolidColorBrush(b1color);

if we want to change text,we do

button1.Content = "newtext";

[DrakeN2k]

Excellent exactly what I wanted thanks.