Display class properties in labels (like a header) and list in listbox

Question

im a little bit confused about the following problem:

I have a class called 'Games' like this

public class Game {
    public int GameID { get; set; }
    public string GameName { get; set; }
    public int GameMaxPlayers { get; set; }
    public int GamePrize { get; set; }
    public List<string> GamePlayers {get;set; }
}

private list<Games> GameList;

and a list, which holdes the game-objects.

Now i add serveral games to the GameList and want to display them in a datagrid or any other control (i dont know, if datagrid is the best choice for this).

It should look like this example:

Example

A header, maybe some labels in a stackpanel, with GameID, GameName, GameMaxPlayers, GamePrize and then below a listbox with the player names.

I tried a datagrid with edited headers, but this won't work as i expected.

Does someone have a tipp for me, how to achieve this?

Thanks in advance, best regards

Flo

Can you provide some details about your front end frameworks? — OlegI, Oct 03 '19 at 12:28
Hi, sorry, my fault. I use WPF and try only a standalone window, in which the control should be created. — FloSu, Oct 03 '19 at 12:43
You want an ItemsControl (or possibly a ListBox -- almost the same thing, but a ListBox lets you select one of the items), with an ItemTemplate. The ItemTemplate can define very complicated UI for each item in the list. [This question and the accepted answer](https://stackoverflow.com/questions/48083648/databinding-to-a-usercontrol-inside-of-a-usercontrol/48083725#48083725) illustrate how that can be done. — 15ee8f99-57ff-4f92-890c-b56153, Oct 03 '19 at 13:09

Dark Templar · Answer 1 · 2019-10-05T14:06:04.280

Hello I have made a working example using a ListView control.

The XAML code for the ListView:

    <ListView x:Name="ListView1" HorizontalAlignment="Left" Margin="82.337,135.208,0,0" VerticalAlignment="Top" Background="Red">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

The C# code:

        class Game
    {
        public int GameID { get; set; }
        public string GameName { get; set; }
        public int GameMaxPlayers { get; set; }
        public int GamePrize { get; set; }
        public List<string> GamePlayers = new List<string>();
    }


        private void BTN1_Click(object sender, RoutedEventArgs e)
    {
        StackPanel SPanel = new StackPanel();
        TextBlock TXTB1 = new TextBlock();
        TextBlock TXTB2 = new TextBlock();
        TextBlock TXTB3 = new TextBlock();
        TextBlock TXTB4 = new TextBlock();
        ListBox LBox1 = new ListBox();
        Game AddGame = new Game();

        AddGame.GameID = 10;
        AddGame.GameName = "Football";
        AddGame.GameMaxPlayers = 16;
        AddGame.GamePrize = 10000;
        AddGame.GamePlayers.Add("Test1"); AddGame.GamePlayers.Add("Test2"); AddGame.GamePlayers.Add("Test3");

        TXTB1.Margin = new Thickness(10); TXTB1.FontSize = 26;
        TXTB1.HorizontalAlignment = HorizontalAlignment.Center; TXTB1.VerticalAlignment = VerticalAlignment.Center;
        TXTB1.Text = AddGame.GameID.ToString();

        TXTB2.FontSize = 26; TXTB2.Background = Brushes.Black; TXTB2.Foreground = Brushes.White; 
        TXTB2.HorizontalAlignment = HorizontalAlignment.Stretch; TXTB2.VerticalAlignment = VerticalAlignment.Stretch;
        TXTB2.Text = AddGame.GameName;

        TXTB3.FontSize = 26; TXTB3.Margin = new Thickness(10);
        TXTB3.HorizontalAlignment = HorizontalAlignment.Center; TXTB3.VerticalAlignment = VerticalAlignment.Center;
        TXTB3.Text = AddGame.GameMaxPlayers.ToString();

        TXTB4.FontSize = 26; TXTB4.Margin = new Thickness(10);
        TXTB4.HorizontalAlignment = HorizontalAlignment.Center; TXTB4.VerticalAlignment = VerticalAlignment.Center;
        TXTB4.Text = "$ " + AddGame.GamePrize.ToString();

        foreach (string s in AddGame.GamePlayers)
        {
            LBox1.Items.Add(s);
        }

        SPanel.Children.Add(TXTB1); SPanel.Children.Add(TXTB2); SPanel.Children.Add(TXTB3); SPanel.Children.Add(TXTB4); SPanel.Children.Add(LBox1);
        ListView1.Items.Add(SPanel);
    }

I know it's not the most elegant solution but It should work, best regards, Golan.

score 0 · Answer 2 · answered Oct 10 '19 at 05:23

Thank you all for your inputs, i do it with an itemscontrol now:

<ItemsControl ItemsSource="{Binding PokerTables}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Black" BorderThickness="0" Margin="5">
                            <StackPanel Orientation="Vertical" Margin="6">
                                <ComboBox ItemsSource="{Binding NameList}" SelectedItem="{Binding Name,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
                                <ComboBox ItemsSource="{Binding GameList}" SelectedItem="{Binding Game,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
                                <ComboBox ItemsSource="{Binding LimitList}" SelectedItem="{Binding Limit,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
                                <ComboBox ItemsSource="{Binding BuyInList}" SelectedItem="{Binding BuyIn,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
                                <ComboBox ItemsSource="{Binding BlindList}" SelectedItem="{Binding Blinds,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
                                <TextBox Text="{Binding OpenSeats, Mode=TwoWay,StringFormat=Open seats: {0}}"  Foreground="White" FontSize="16" FontWeight="Bold" Background="Transparent" BorderThickness="0"/>
                                <ListBox Name="PlayerListbox" ItemsSource="{Binding Players}" SelectedItem="{Binding DataContext.SelectedPlayer, RelativeSource={RelativeSource AncestorType=UserControl}}" IsSynchronizedWithCurrentItem="True" Background="#33A2A2A2" Foreground="White" BorderThickness="0" FontWeight="Bold" FontSize="12" Margin="0,15,0,0">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Button Content="X" Command="{Binding DataContext.DeletePlayerCommand, ElementName=MyTables}" CommandParameter="{Binding}"/>
                                                <TextBlock Name = "TextControl" Text="{Binding Name}" Background="Transparent" Padding="4">
                                            </TextBlock>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

I changed the names of the fields a little bit, but now all information is provided as i expacted.

Best regards, Flo

Display class properties in labels (like a header) and list in listbox

2 Answers2