Tournament Brackets algorithm

I need to create an page that auto generate a brackets tournament tennis style.
Regarding the managing of match in database, it’s not a problem.

The problem is the dynamic graphics creation of brackets.
The user will be able to create tournament by 2-4…32 players.
And i don’t know ho to create the graphics bracket in html or gdi…


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Using Silverlight, and a Grid, You can produce something like this:
bracket display

To do it, define a regular UserControl containing a Grid. (This is the default when you build a silverlight app in VS2008 with the Silverlight 3.0 SDK).

Then, add a call to the following in the constructor for the user control:

private void SetupBracket(int n)
    var black = new SolidColorBrush(Colors.Gray);
    // number of levels, or rounds, in the single-elim tourney
    int levels = (int)Math.Log(n, 2) + 1;
    // number of columns in the Grid.  There's a "connector"
    // column between round n and round n+1.
    int nColumns = levels * 2 - 1;

    // add the necessary columns to the grid
    var cdc = LayoutRoot.ColumnDefinitions;
    for (int i = 0; i < nColumns; i++)
        var cd = new ColumnDefinition();
        // the width of the connector is half that of the regular columns
        int width = ((i % 2) == 1) ? 1 : 2;
        cd.Width = new GridLength(width, GridUnitType.Star);
    var rdc = LayoutRoot.RowDefinitions;

    // in the grid, there is one row for each player, and 
    // an interleaving row between each pair of players. 
    int totalSlots = 2 * n - 1;
    for (int i = 0; i < totalSlots; i++)
        rdc.Add(new RowDefinition());

    // Now we have a grid of the proper geometry.  
    // Next: fill it. 

    List<int> slots = new List<int>();
    ImageBrush brush = new ImageBrush();
    brush.ImageSource = new BitmapImage(new Uri("Bridge.png", UriKind.Relative));

    // one loop for each level, or "round" in the tourney.  
    for (int j = 0; j < levels; j++)
        // Figure the number of players in the current round.
        // Since we insert the rounds in the reverse order, 
        // think of j as the "number of rounds remaining."
        // Therefore, when j==0, playersThisRound=1.  
        // When j == 1, playersThisRound = 2.  etc.
        int playersThisRound = (int)Math.Pow(2, j);

        int x = levels - j;
        int f = (int)Math.Pow(2, x - 1);

        for (int i = 0; i < playersThisRound; i++)
            // do this in reverse order.  The innermost round is 
            // inserted first.
            var r = new TextBox();
            r.Background = black;
            if (j == levels - 1)
                r.Text = "player " + (i + 1).ToString();
                r.Text = "player ??";

            // for j == 0, this is the last column in the grid.
            // for j == levels-1, this is the first column.
            // The grid column is not the same as the current
            // round, because of the columns used for the 
            // interleaved connectors.
            int k = 2 * (x - 1); 
            r.SetValue(Grid.ColumnProperty, k);

            int m = (i * 2 + 1) * f - 1;
            r.SetValue(Grid.RowProperty, m);

            // are we not on the last round? 
            if (j > 0)
                // Have we just inserted two rows?  Then we need
                // a connector between these two and the next 
                // round (the round previously added).
                if (slots.Count == 2)
                    string xamlTriangle = "<Path xmlns='' "+
                                          "xmlns:x='' " +
                                          "Data='M0,0 L 100 50 0 100 Z' Fill='LightBlue' Stretch='Fill'/>";

                    Path path = (Path)System.Windows.Markup.XamlReader.Load(xamlTriangle);

                    path.SetValue(Grid.ColumnProperty, 2 * (x - 1) + 1);
                    path.SetValue(Grid.RowProperty, slots[0]);
                    path.SetValue(Grid.RowSpanProperty, slots[1] - slots[0] + 1);


In the above, the connector is just an isosceles triangle, with the apex pointing to the right. It is generated by XamlReader.Load() on a string.

You would also want to pretty it up, style it with different colors and fonts, I guess.

You can insert this silverlight “user control” into any HTML web page, something like embedding a flash app into a page. There are silverlight plugins for IE, Firefox, Opera, Safari, and Chrome.

If you don’t want to use Silverlight, you could use a similar approach to construct an HTML table.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x