locked
How to reproduce a forum/twitter-like UI on Winform RRS feed

  • Question

  • As a classic forum, threads and replys are displayed on a page, with dark and light and dark and light backcolor.

    I am trying to write a client of a forum on windows using winform. It is

    At first, I have tried this way:

    1. Add a big panel to the form, let's call it the PARENT PANEL.

    2. Add small panels to the big panel like this:

          panel1.Visible = false;
          for (int i=0; i<5;i++)
          {
              Panel parent = new Panel();
              parent.Height = 800;
              Random ra = new Random();
              TextBox p = new TextBox();
              p.Text = "fehsuifq";
              p.Multiline = true;
              p.WordWrap = true;
              p.Dock = DockStyle.Fill;
              parent.BackColor = Color.FromArgb(ra.Next(0, 254), ra.Next(0, 254), ra.Next(0, 254));
              p.BorderStyle = BorderStyle.None;
              p.ReadOnly = true;
              p.TabStop = false;
              p.BackColor = this.BackColor;
              parent.Controls.Add(p);
              parent.Dock = DockStyle.Top;
              panel1.Controls.Add(parent);
          }
          panel1.Visible = true;

    Every panel(tenicially, a control) displays a thread's text and images and others details(like authors or avator). Images are not shown until it is clicked. when the image is clicked, it is loaded and the controls's height will change as result. The PARENT PANEL will contains hundreds of these controls since there will be so many threads. It is and have to be scrollable, obviously.

    But if I put a textbox in the control, the scroll wheel no longer work on the PARENT PANEL.If I use a label, it is not selectable.

    I think this way can't be more stupid, completely.

    So I am looking for a better to do this job, to display hundreds or even thousands threads/replys on winform, which is:

    1. the height is dynamic, because the images inside will not load until it is clicked.
    2. The text inside is selectable (I edited this just to disambiguate)
    3. the PARENT PANEL can response to the mouse's wheel, just like twitter, forums.

    So that I can use my scroll wheel to browse all the replys at one time. The loading is a background work.

    enter image description here Look at the picture, when the text is selected, the whole panel is still response to the wheel(just like normal webPage). This is a uwp app and I am not sure if winform can do this.

    bty I also ask this on so(https://stackoverflow.com/questions/56466902/).


    • Edited by TruffleWorm Wednesday, June 5, 2019 10:22 PM
    • Moved by CoolDadTx Thursday, June 6, 2019 5:42 PM Winforms related
    Wednesday, June 5, 2019 8:39 PM

Answers

  • Hi TruffleWorm,

    Thank you for posting here.

    Based on your description, you want to reproduce a forum/twitter-like UI on Winform.

    You could try the following code.

      PictureBox p = new PictureBox();
            Panel third = new Panel();
            private void Button1_Click(object sender, EventArgs e)
            {
                panel1.AutoScroll = true;
                panel1.VerticalScroll.Visible = true;
    
                Panel blackPanel = new Panel();
                Panel whitePanel = new Panel();
       
                third.BackColor = Color.White;
                third.Location = new Point(10, 210);
                third.Size = new Size(180, 90);
                blackPanel.Name = "black";
                whitePanel.Name="white";
                // Set color, location and size of the black panel
                blackPanel.BackColor = Color.White;
                blackPanel.Location = new Point(10, 10);
                blackPanel.Size = new Size(180, 90);
                TextBox t1 = new TextBox();
                t1.Text = "test";
                TextBox t2 = new TextBox();
                t2.Text = "test";
                blackPanel.Controls.Add(t1);
                // Same here with the white one
                whitePanel.BackColor = Color.White;
                whitePanel.Location = new Point(10, 110);
                whitePanel.Size = new Size(180, 90);
                whitePanel.Controls.Add(t2);
    
                p.Size = new Size(40, 40);
                p.SizeMode = PictureBoxSizeMode.StretchImage;
               
                p.Click += P_Click;   
                p.Image = Image.FromFile(@"D:\pic\6.jpg");
                third.Controls.Add(p);
                panel1.Controls.Add(blackPanel);
                panel1.Controls.Add(whitePanel);
                panel1.Controls.Add(third);
    
    
               
    
    
            }
    
            private void P_Click(object sender, EventArgs e)
            {
                third.Height =third.Height+90;
                p.Size = new Size(100, 100);
               
                
            }

    Result:

    Best Regards,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by TruffleWorm Wednesday, June 12, 2019 3:35 PM
    Thursday, June 6, 2019 6:27 AM

All replies

  • Hi TruffleWorm,

    Thank you for posting here.

    Based on your description, you want to reproduce a forum/twitter-like UI on Winform.

    You could try the following code.

      PictureBox p = new PictureBox();
            Panel third = new Panel();
            private void Button1_Click(object sender, EventArgs e)
            {
                panel1.AutoScroll = true;
                panel1.VerticalScroll.Visible = true;
    
                Panel blackPanel = new Panel();
                Panel whitePanel = new Panel();
       
                third.BackColor = Color.White;
                third.Location = new Point(10, 210);
                third.Size = new Size(180, 90);
                blackPanel.Name = "black";
                whitePanel.Name="white";
                // Set color, location and size of the black panel
                blackPanel.BackColor = Color.White;
                blackPanel.Location = new Point(10, 10);
                blackPanel.Size = new Size(180, 90);
                TextBox t1 = new TextBox();
                t1.Text = "test";
                TextBox t2 = new TextBox();
                t2.Text = "test";
                blackPanel.Controls.Add(t1);
                // Same here with the white one
                whitePanel.BackColor = Color.White;
                whitePanel.Location = new Point(10, 110);
                whitePanel.Size = new Size(180, 90);
                whitePanel.Controls.Add(t2);
    
                p.Size = new Size(40, 40);
                p.SizeMode = PictureBoxSizeMode.StretchImage;
               
                p.Click += P_Click;   
                p.Image = Image.FromFile(@"D:\pic\6.jpg");
                third.Controls.Add(p);
                panel1.Controls.Add(blackPanel);
                panel1.Controls.Add(whitePanel);
                panel1.Controls.Add(third);
    
    
               
    
    
            }
    
            private void P_Click(object sender, EventArgs e)
            {
                third.Height =third.Height+90;
                p.Size = new Size(100, 100);
               
                
            }

    Result:

    Best Regards,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by TruffleWorm Wednesday, June 12, 2019 3:35 PM
    Thursday, June 6, 2019 6:27 AM
  • Thanks for your reply so much.

    I am now geting into a new problem, that AutoScroll has to be false. Otherwise, when I click on the controls on the controls of the sub-panels, the relatively position would change. For example, when the textbox is partly out of the screen and it is clicked(focused), the parent panel outside will move.

    I am considering another workaround:

    AutoScroll set to false;

    using a scrollbar outside;

    make it only the wheel can effect the relatively position.

    I am not sure if this will work.

    https://www.codeproject.com/Tips/158943/Manual-Scroll-Panel-in-a-Panel-or-UserControl-with

    I tried this, but it can't response to the wheel, and its code... I just can't understand how it works.

    I am not sure I am on the correct direction, so if I may, let's start over:

    I am trying to make it behave just like this uwp app, a webpage-like client.

    Its name is “百度贴吧", just search it on windows app store.

    Open it, scroll to the rightest, click into one and go further, will be the page I want, which only response to the wheel no matter what I do, just like any browser. This uwp is out-dated and may not work, I just ust it to describe what I want.

    I am not saying that I want to reproduce this uwp'ui , I just meant works like its way. Mobile app works like this, too. Only the moving-pressing-finger can scroll the page/ui.

    Some terms I am using may be weird and I am sorry for that.

    Friday, June 7, 2019 4:49 PM
  • Hi TruffleWorm,

    Thanks for the feedback.

    >>I am now geting into a new problem

    I think it is best for you to think the question clearly first instead of changing ideas halfway. Besides, I think I have solved your initial problem in some case, so you could mark it as an answer.

    For your new question, I suggest that you could add a vScrollBar1 control to panel.

    Code:

     vScrollBar1.Dock = DockStyle.Right;
     vScrollBar1.Scroll += VScrollBar1_Scroll;
    panel1.Controls.Add(vScrollBar1);
    
      private void VScrollBar1_Scroll(object sender, ScrollEventArgs e)
            {
                panel1.VerticalScroll.Value = vScrollBar1.Value;
                panel1.Invalidate();
            }

    Best Regards,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, June 10, 2019 8:56 AM
  • Hah, sorry for that, I have already marked and I think I can go on depends on what we have.
    Wednesday, June 12, 2019 3:36 PM