locked
image and panel help needed RRS feed

  • Question

  • hello

             I want to place images on different panal on my form at run time from the config. I dont know in advance how many panal are there and how may images on each panael are there

    XML for example

     

    <Group>Panal1</Group>
    <image>path<image> 
    <image>path<image> 
    <image>path<image>  
    <image>path<image> 
    <image>path<image>  
    <image>path<image> 
    <image>path<image>   

     

    <Group>Panal2</Group>
    <image>path<image> 
    <image>path<image> 

     

    <Group>Panal3</Group>
    <image>path<image> 
    <image>path<image> 
    <image>path<image> 
    <image>path<image> 

     

    Panal 1

    Image1 Image1 Image1 Image1 Image1

     

    Image1 Image1

     

    Panal 2.

    Image1 Image1

     

    Panal 3

    Image1 Image1 Image1 Image1

     

     

    Now How can i do this ( any advice) 


    It's Me
    Monday, May 16, 2011 7:38 AM

Answers

  • First of all you should have a root node to wrap all the sub nodes, the second stage of nodes should stand for the panels, the third stage of nodes should stand for images. Generally, the xml structure is similar to the following:
    <?xml version="1.0" encoding="utf-8" ?>
    <images>
     <panel id="Panal1">
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
     </panel>
     <panel id="Panal2">
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
     </panel>
    </images>
    


    I've also fulfilled a sample for you using this xml file, see my tiri reply.
    Hypothesis:
    1. The images have the same size, if their size are not the same, the algorithm will be hard to imagine and the layout will appear irregular.
    2. The realized pattern within my test project:
    Panal 1
    Image1  Image1
    Image1  Image1
    Image1 

    Panal 2
    Image1
    Image1

    You can see it is a bit simple that your requirement, that is because I have no more time to take on this, and I think the chief idea has been reached. Lol. You can go on with my solution.


    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, May 18, 2011 9:44 AM
  • Create the XML file with the content given in my prior post, in the base path of your project, then copy the following code directly into the CS file of your form.
        public Form1()
        {
          InitializeComponent();
    
          XmlDocument doc = new XmlDocument();
          doc.Load("../../ImageConfig.xml");
    
          XmlNodeList nodes = doc.SelectNodes("/images/panel");
    
          Int32 imgWidth = 100;  //Set the common size of all images.
          Int32 imgHeight = 100;
          Int32 padding = 5;   //Set the size of the common padding spaces.
          Int32 totalHeight = padding; //Used to update the total height of the current existing panels.
    
          for (Int32 i = 0; i < nodes.Count; i++)
          {
            // If it is the first panel, arrange involved images to 2 columns.
            Int32 panelWidth = 2 * (imgWidth + padding) + padding;
            Int32 panelHeight = Convert.ToInt32(Math.Round(((Convert.ToDouble(nodes[i].ChildNodes.Count) / 2) * 10 + 0.5) / 10)) * (imgHeight + padding) + padding;
    
            if (i == 1)
            {
              panelWidth = imgWidth + 2 * padding;
              panelHeight = nodes[i].ChildNodes.Count * (imgHeight + padding) + padding;
            }
    
            Int32 panelLeft = padding;
            Int32 panelTop = totalHeight;
            Panel panel = CreatePanel(panelWidth, panelHeight, panelLeft, panelTop);
    
            totalHeight += panelHeight + padding;
    
            for (int j = 0; j < nodes[i].ChildNodes.Count; j++)
            {
              Int32 imgLeft = (j % 2 == 0 ? 0 : 1) * (imgWidth + padding) + padding;
              Int32 imgTop = (j / 2) * (imgHeight + padding) + padding;
    
              if (i == 1)
              {
                imgLeft = padding;
                imgTop = j * (imgHeight + padding) + padding;
              }
    
              PictureBox picBox = CreatePicture(imgWidth, imgHeight, imgLeft, imgTop, nodes[i].ChildNodes[j].InnerText);
              panel.Controls.Add(picBox);
            }
    
            this.Controls.Add(panel);
          }
        }
    
        protected Panel CreatePanel(Int32 width, Int32 height, Int32 left, Int32 top)
        {
          Panel panel = new Panel();
          panel.Size = new System.Drawing.Size(width, height);
          panel.Location = new System.Drawing.Point(left, top);
          panel.BorderStyle = BorderStyle.FixedSingle;
    
          return panel;
        }
    
        protected PictureBox CreatePicture(Int32 width, Int32 height, Int32 left, Int32 top, String imgPath)
        {
          PictureBox picBox = new PictureBox();
          picBox.ImageLocation = imgPath;
          picBox.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
          picBox.Size = new System.Drawing.Size(width, height);
          picBox.Location = new System.Drawing.Point(left, top);
    
          return picBox;
        }
    


    Or you can directly download my test project here:http://cid-63c0c5f1723a3dc0.office.live.com/self.aspx/For%20Customer/TestWinForm%5E_LoadImageFromConfig.zip


    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, May 18, 2011 9:49 AM

All replies

  • First of all, I would like to know if this is the XML you are using in your config file or this is just an example snippet. Frankly speaking, this is not a very well formed XML and it would be really difficult to parse and create controls at run-time from this sort of XML. A better structure could have been like the following:

    <panels>
      <panel id="p1">
        <image id="i1">path1</image>
        <image id="i2">path2</image>
        <image id="i3">path3</image>
        ...........
      </panel>
      <panel id="p2">
        <image id="i4">path4</image>
        <image id="i5">path5</image>
      </panel><br/>  ....................<br/></panels>
    

    Hope you won't mind and would consider your XML before I can suggest you an code example.

    Thanks.

    Monday, May 16, 2011 1:13 PM
  • hello

                please advice me how can i improve my xml


    It's Me
    Tuesday, May 17, 2011 2:23 PM
  • First of all you should have a root node to wrap all the sub nodes, the second stage of nodes should stand for the panels, the third stage of nodes should stand for images. Generally, the xml structure is similar to the following:
    <?xml version="1.0" encoding="utf-8" ?>
    <images>
     <panel id="Panal1">
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
     </panel>
     <panel id="Panal2">
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
      <image>C:\Users\v-xzliu\Desktop\avatar.jpg</image>
     </panel>
    </images>
    


    I've also fulfilled a sample for you using this xml file, see my tiri reply.
    Hypothesis:
    1. The images have the same size, if their size are not the same, the algorithm will be hard to imagine and the layout will appear irregular.
    2. The realized pattern within my test project:
    Panal 1
    Image1  Image1
    Image1  Image1
    Image1 

    Panal 2
    Image1
    Image1

    You can see it is a bit simple that your requirement, that is because I have no more time to take on this, and I think the chief idea has been reached. Lol. You can go on with my solution.


    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, May 18, 2011 9:44 AM
  • Create the XML file with the content given in my prior post, in the base path of your project, then copy the following code directly into the CS file of your form.
        public Form1()
        {
          InitializeComponent();
    
          XmlDocument doc = new XmlDocument();
          doc.Load("../../ImageConfig.xml");
    
          XmlNodeList nodes = doc.SelectNodes("/images/panel");
    
          Int32 imgWidth = 100;  //Set the common size of all images.
          Int32 imgHeight = 100;
          Int32 padding = 5;   //Set the size of the common padding spaces.
          Int32 totalHeight = padding; //Used to update the total height of the current existing panels.
    
          for (Int32 i = 0; i < nodes.Count; i++)
          {
            // If it is the first panel, arrange involved images to 2 columns.
            Int32 panelWidth = 2 * (imgWidth + padding) + padding;
            Int32 panelHeight = Convert.ToInt32(Math.Round(((Convert.ToDouble(nodes[i].ChildNodes.Count) / 2) * 10 + 0.5) / 10)) * (imgHeight + padding) + padding;
    
            if (i == 1)
            {
              panelWidth = imgWidth + 2 * padding;
              panelHeight = nodes[i].ChildNodes.Count * (imgHeight + padding) + padding;
            }
    
            Int32 panelLeft = padding;
            Int32 panelTop = totalHeight;
            Panel panel = CreatePanel(panelWidth, panelHeight, panelLeft, panelTop);
    
            totalHeight += panelHeight + padding;
    
            for (int j = 0; j < nodes[i].ChildNodes.Count; j++)
            {
              Int32 imgLeft = (j % 2 == 0 ? 0 : 1) * (imgWidth + padding) + padding;
              Int32 imgTop = (j / 2) * (imgHeight + padding) + padding;
    
              if (i == 1)
              {
                imgLeft = padding;
                imgTop = j * (imgHeight + padding) + padding;
              }
    
              PictureBox picBox = CreatePicture(imgWidth, imgHeight, imgLeft, imgTop, nodes[i].ChildNodes[j].InnerText);
              panel.Controls.Add(picBox);
            }
    
            this.Controls.Add(panel);
          }
        }
    
        protected Panel CreatePanel(Int32 width, Int32 height, Int32 left, Int32 top)
        {
          Panel panel = new Panel();
          panel.Size = new System.Drawing.Size(width, height);
          panel.Location = new System.Drawing.Point(left, top);
          panel.BorderStyle = BorderStyle.FixedSingle;
    
          return panel;
        }
    
        protected PictureBox CreatePicture(Int32 width, Int32 height, Int32 left, Int32 top, String imgPath)
        {
          PictureBox picBox = new PictureBox();
          picBox.ImageLocation = imgPath;
          picBox.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
          picBox.Size = new System.Drawing.Size(width, height);
          picBox.Location = new System.Drawing.Point(left, top);
    
          return picBox;
        }
    


    Or you can directly download my test project here:http://cid-63c0c5f1723a3dc0.office.live.com/self.aspx/For%20Customer/TestWinForm%5E_LoadImageFromConfig.zip


    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, May 18, 2011 9:49 AM