Question about how to position buttons

Asked

Viewed 230 times

1

The images are only illustrative.

What I need to do is this:

  1. There are several buttons with their respective names, can be so-called (clicked).

  2. I type the name of that button in the play fetch and the rest of the buttons disappear. Getting only the one I typed.

Does anyone know how I can do it?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • 1

    What have you tried to do? It would be interesting for you to edit and add to the question.

  • So.. I don’t know where to start...

  • But you understand what I want to do?

  • Yes, but without a starting point, the question can be considered broad. If you do not know where to start, it would be interesting to break into smaller doubts, try to create a layout organizing the buttons and go asking as you have difficulties.

2 answers

5


Demonstration of code working:

Demonstração


Your question is very simple and it is very easy to develop a solution for that you need.

I’ll give you a basis, the algorithm practically ready, you’ll need to adapt some things and give an improved as well. There is much that can be improved, the limit is your imagination.

Well, let’s get to the steps.

On the "preparation"

  1. Create a dashboard to place these game buttons. If you use a FlowLayoutPanel the elements will always be repositioned from left to right (see the second image of the next item). This will facilitate finding them and will also allow you to separate your screen into different pieces. In my example, the panel is called mainPanel.

  2. Set (on all buttons) how each of them will be identified as a particular game. In the example, I used the property Tag to define this and I left the property Text for viewing only (note that some buttons show abbreviated names, but the search works for the actual name of the game).

    Exemplo de form

    The dashed part is the panel. In the image beside, the properties tab, attention to property values Text and Tag from the last button of the first line.

    The interesting thing about using the property Tag, is able to use the real name of the game to do the search, but show only its abbreviation on the button. For example:

    Exemplo de busca com nome completo do jogo

  3. Define when the search will happen. In the example, I set that the search would occur whenever the user typed something in the TextBox search, using the event TextChanged.

About the code

  1. On form startup (in constructor, after method InitializeComponents()), you need to create a list of all the buttons that exist inside the main panel. This will allow you to remove the panel buttons without losing them because, of course, you will need to put them back there.
  2. Now comes the part that makes the work, the implementation of the event TextChanged. The algorithm is simple and naive.

    1. A filter is made on the variable _todosBotoes (the one that was created at the form) using Linq, this filter searches for buttons whose property Tag be a text and contain the text that was typed by the user. I even gave a worked and made the search be done by the property Text, only if the content of the property Tag for null or cannot be converted to string.

    2. All main panel controls are removed.

    3. The controls returned by the filter are added in the main panel.

    4. Notice that I used a method called ContainsIgnoreCase(). This method does not exist in the class string, is an extension method created on the basis of algorithm of this response and serves for comparison to treat lower and upper case characters as the same.

Follows the code

public partial class Form1 : Form
{
    private readonly Button[] _todosBotoes;
    public Form1()
    {
        InitializeComponent();
        // Passo 1
        _todosBotoes = mainPanel.Controls.OfType<Button>().ToArray();
    }

    private void txtBusca_TextChanged(object sender, EventArgs e)
    {
        // Passo 2.1
        var controles = _todosBotoes.Where(bt => (bt.Tag as string ?? bt.Text).ContainsIgnoreCase(txtBusca.Text))
                                    .ToArray();

        // Passo 2.2
        mainPanel.Controls.Clear();

        // Passo 2.3
        mainPanel.Controls.AddRange(controles);
    }
}

Method code ContainsIgnoreCase()

public static bool ContainsIgnoreCase(this string source, string search)
{
    return source.IndexOf(search, StringComparison.CurrentCultureIgnoreCase) >= 0;
}
  • I have a question, where is the buttons of the games, I can not leave them loose in the form, as you showed, I wish they could stay in a kind of box, with a scroll bar.

  • @Dáriosabaini But I didn’t let them loose. They’re on a panel if you want to use scroll just set the property AutoScroll as true.

  • It’s true, you used the Flowlayoutpanel :), my mistake ! To activate the scroll just put to true right?

  • Yes.

2

Whereas you have a database (in code simulated by dtJogos), put a flowLayoutPanel in your Form, a Textbox search, and a timer that triggers the search, it can be in a range of 500ms for example. Textbox Textchanged Event restarts timer.

Follows the code:

    private DataTable dtJogos()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("nome");
        DataRow r = dt.NewRow();
        r["nome"] = "Diablo";
        dt.Rows.Add(r);
        r = dt.NewRow();
        r["nome"] = "Need For Speed";
        dt.Rows.Add(r);
        r = dt.NewRow();
        r["nome"] = "GTA";
        dt.Rows.Add(r);
        r = dt.NewRow();
        r["nome"] = "GRID";
        dt.Rows.Add(r);
        r = dt.NewRow();
        r["nome"] = "DIRT";
        dt.Rows.Add(r);
        r = dt.NewRow();
        r["nome"] = "Exemplo";
        dt.Rows.Add(r);
        return dt;
    }

    private void MontarBotoes()
    {
        flowLayoutPanel1.Controls.Clear();
        DataTable dt = dtJogos();

        DataRow[] rows = dt.Select("nome LIKE '" + textBoxPesquisa.Text + "%'");

        foreach (DataRow r in rows)
        {
            Button b = new Button();
            b.Name = r["nome"].ToString();
            b.Text = b.Name;
            b.Size = new System.Drawing.Size(150, 32);
            b.Parent = flowLayoutPanel1;
            b.Click += b_Click;
            b.Show();
        }
    }

    void b_Click(object sender, EventArgs e)
    {
        string nome = ((Button)sender).Name;
        //Processao Clique no botão do jogo
        MessageBox.Show("Você clicou no jogo: " + nome);
    }

    private void timerPesquisa_Tick(object sender, EventArgs e)
    {
        timerPesquisa.Enabled = false;
        MontarBotoes();
    }

    private void textBoxPesquisa_TextChanged(object sender, EventArgs e)
    {
        timerPesquisa.Enabled = false;
        timerPesquisa.Enabled = true;
    }

Browser other questions tagged

You are not signed in. Login or sign up in order to post.