I need to create an array of images based on user input as shown below.
Now I am creating buttons programatically and setting the image property.
But it is pain as it has bunch of C# code to write.
Is there any better way to achieve this?
Note: On mouse hover on each item in image array it has to show its number in array like 2x1.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#generate").click(function(){
var cols = $("#cols").val();
var rows = $("#rows").val();
var table= '';
table += '<table>' ;
for(i=0;i<rows;i++){
table += '<tr>' ;
for(j=0;j<cols;j++){
table += '<td><img src="http://cdn1.iconfinder.com/data/icons/woocons1/Speaker.png" /></td>';
}
table += '</tr>' ;
}
table += '</table>';
$('#output').html( table ); // outputing generated table
});
$(document).on("hover", "#output img", function(){
var col_no = $(this).parent().parent().children().index($(this).parent()) + 1;
var row_no = $(this).parent().parent().index() + 1;
$('#position').html(row_no + 'x' + col_no);
})
});
</script>
Number of Rows:<input type="text" id="rows" /><br />
Number of Columns:<input type="text" id="cols" /> <br />
<input type="button" value="Generat" id="generate" />
<div id="output"></div>
<div id="position"></div>
Hope these codes guide you:
int numberOdRows=int32.Parse(NoRows.Text); //NoRows is the 1st textBlock
int numberOdColumns=int32.Parse(NoCols.Text); //NoCols is the 2st textBlock
StackPanel _stack0=new StackPanel { orientation = Orientation.Vertical};
for (int i=1;i<numberOdRows;i++)
{
StackPanel _stack1=new StackPanel{ orientation = Orientation.Horizontal};
for (int j=1;i<numberOdColumns;i++)
{
image; //I assume you can call it
_stack1.Children.Add(image)
//here you can set the Tooltip too.
// i is the number of row
// j is the number of column
image.ToolTip="(" + i.ToString() + "," + j.ToString() + ")" ;
}
_stack0.Children.Add(_stack1)
}
//Add _stack0 to your panel
Edit: I add the ToolTip part
