CODEWITHSUNDEEP
c#wpfwpf-controls
Olivarsham
Olivarsham

Reputation: 1731

Creating array of images based on user inputs

I need to create an array of images based on user input as shown below.

Image

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.

Upvotes: 1

Views: 255

Answers (2)

Ramin
Ramin

Reputation: 2133

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

Upvotes: 1

Tahir Yasin
Tahir Yasin

Reputation: 11709

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

Upvotes: 2

Related Questions