locked
How to place and position many user control onto form like a card view RRS feed

  • Question

  • see the images first

    Basically i want to place same user control onto form like above image. in a row there will be 10 user control and each will stay a bit far from other. there could be N number of rows. so many user controls will be placed onto form. if my form size will be small then horizontal & vertical scroll bar will come and user can scroll to see any specific user control.

    please give me idea or code example to achieve the above output with user control. thanks

    Saturday, October 3, 2020 8:26 PM

Answers

  • i am working with winform. see this link https://i.ibb.co/cNMdbJz/Panel.gif

    i hope you can understand what kind of UI i am trying to achieve. 

    thanks

    There is nothing special, I just added a Panel with panel1.AutoScroll = true; and PictureBoxes in a loop inside  for testing  =>

    private System.Windows.Forms.Panel panel1;

    panel1 = new System.Windows.Forms.Panel();
    panel1.AutoScroll = true;
    panel1.Location = new System.Drawing.Point(10, 10);
    panel1.Size = new System.Drawing.Size(740, 420);
    panel1.BorderStyle = System.Windows.Forms.BorderStyle.None;
    this.Controls.Add(panel1);
    
    int nWidth = 300, nHeight = 300;
    for (int i = 0; i < 10; i++)
    {
        for (int j = 0; j < 10; j++)
        {
            System.Windows.Forms.PictureBox p = new PictureBox();                   
            p.ClientSize = new System.Drawing.Size(nWidth, nHeight);
            p.Location = new System.Drawing.Point(i * (nWidth + 10), j * (nHeight + 10));
            Bitmap bitmap;
            if (i % 2 == 0)
            {
                bitmap = new Bitmap("e:\\butterfly.jpg");
            }
            else
            {
                bitmap = new Bitmap("e:\\hulk.jpg");
            }
            p.BackgroundImageLayout = ImageLayout.Center;
            p.BackColor = Color.White;
            p.BackgroundImage = bitmap;
            p.BorderStyle = BorderStyle.FixedSingle;
            panel1.Controls.Add(p);
        }
    }

    • Marked as answer by Sudip_inn Tuesday, October 6, 2020 7:37 AM
    Monday, October 5, 2020 5:06 PM

All replies

  • I don't have code but can tell you that this would be best done in WPF using XAML which for most developer starting out will take time to learn and adapt as it's very different from Windows Form projects.

    You would need to create a base control that is similar in nature (but not the same) as a MDI window that host your cards which is the second thing needed.


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Sunday, October 4, 2020 12:49 AM
  • You can just use a Panel with AutoScroll = true : Panel test
    • Edited by Castorix31 Sunday, October 4, 2020 6:40 AM
    Sunday, October 4, 2020 6:33 AM
  • this would be best done in WPF using XAML

    In fact, the OP didn't even mention what kind of project he or she is doing. For all we know, it could even be a WebForms project. You can still add UserControls dynamically to a WebForm, although it is a bit trickier than for a WinForm or a WPF project because you need to invoke LoadControl in addition to adding the .ascx; you would then use css styling to arrange the usercontrols in the form and enable the scroll bars as needed.

    The point is that for anyone asking a question about a "form" in the C# forum, it is important to be explicit about what kind of form, since there are several types that can be programmed in a C# project.

    Sunday, October 4, 2020 8:41 AM
  • Also consider a TableLayoutPanel and place it inside another panel that has automatic scrollbars. Insert your user controls to this TableLayoutPanel.

    Maybe it is better to use a FlowLayoutPanel. Then the rows will be wrapped automatically according to available space.

    Sunday, October 4, 2020 1:17 PM
  • This forum is for C#-specific questions only. Please post questions related to the UI in the appropriate forum. For ASP.NET apps use their forums.

    For Winforms, WPF and UWP then please post in the new Microsoft Q&A forums.


    Michael Taylor http://www.michaeltaylorp3.net

    Monday, October 5, 2020 1:52 PM
  • i have seen the link image demo. if you have that code then please share with me. thanks
    Monday, October 5, 2020 2:30 PM
  • i am working with winform. see this link https://i.ibb.co/cNMdbJz/Panel.gif

    i hope you can understand what kind of UI i am trying to achieve. 

    thanks

    Monday, October 5, 2020 2:31 PM
  • please share bit of code example sir. thanks
    Monday, October 5, 2020 2:32 PM
  • i am working with winform. see this link https://i.ibb.co/cNMdbJz/Panel.gif

    i hope you can understand what kind of UI i am trying to achieve. 

    thanks

    There is nothing special, I just added a Panel with panel1.AutoScroll = true; and PictureBoxes in a loop inside  for testing  =>

    private System.Windows.Forms.Panel panel1;

    panel1 = new System.Windows.Forms.Panel();
    panel1.AutoScroll = true;
    panel1.Location = new System.Drawing.Point(10, 10);
    panel1.Size = new System.Drawing.Size(740, 420);
    panel1.BorderStyle = System.Windows.Forms.BorderStyle.None;
    this.Controls.Add(panel1);
    
    int nWidth = 300, nHeight = 300;
    for (int i = 0; i < 10; i++)
    {
        for (int j = 0; j < 10; j++)
        {
            System.Windows.Forms.PictureBox p = new PictureBox();                   
            p.ClientSize = new System.Drawing.Size(nWidth, nHeight);
            p.Location = new System.Drawing.Point(i * (nWidth + 10), j * (nHeight + 10));
            Bitmap bitmap;
            if (i % 2 == 0)
            {
                bitmap = new Bitmap("e:\\butterfly.jpg");
            }
            else
            {
                bitmap = new Bitmap("e:\\hulk.jpg");
            }
            p.BackgroundImageLayout = ImageLayout.Center;
            p.BackColor = Color.White;
            p.BackgroundImage = bitmap;
            p.BorderStyle = BorderStyle.FixedSingle;
            panel1.Controls.Add(p);
        }
    }

    • Marked as answer by Sudip_inn Tuesday, October 6, 2020 7:37 AM
    Monday, October 5, 2020 5:06 PM
  • Sir thank you so much i will get idea to place my user controls on form this way.
    Tuesday, October 6, 2020 7:38 AM