Search code examples
c#wpfxaml

How to access controls inside a parent control in XAML


I have a class Player, if I have a List of Players and I want for each Player in this list to have a card that is basically a Grid that contains an Image and a TextBlock, how do I do that?

The card is a style for a ListViewItem.

Here is the class:

    public class Player
    {
        public string firstname;
        public string lastname;
        public string position;
        public int points;
        public int price;
        public Club club;
    }

And here is the style:

<Style TargetType="ListViewItem" x:Key="PlayerCard">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Border BorderThickness="0,0,0,0.5"
                            BorderBrush="#999999"
                            Height="50"
                            Width="280"
                            Margin="8,5">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>

                            <Border Grid.Column="0"
                                    BorderBrush="#05F1FF"
                                    BorderThickness="1"
                                    CornerRadius="1"
                                    ClipToBounds="True">

                                <Image Width="40" Stretch="Uniform"/>

                            </Border>

                            <TextBlock Margin="10"
                                       Height="30"
                                       Grid.Column="1"/>
                            
                        </Grid>

                    </Border>

                </ControlTemplate>
            </Setter.Value>
            
        </Setter>
    </Style>

Also I am new to XAML and Wpf in general


Solution

  • Use an ItemTemplate:

    <ListView x:Name="listView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="0,0,0,0.5"
                                BorderBrush="#999999"
                                Height="50"
                                Width="280"
                                Margin="8,5">
    
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="50"/>
                        </Grid.ColumnDefinitions>
    
                        <Border Grid.Column="0"
                                        BorderBrush="#05F1FF"
                                        BorderThickness="1"
                                        CornerRadius="1"
                                        ClipToBounds="True">
    
                            <Image Width="40" Stretch="Uniform"/>
    
                        </Border>
    
                        <TextBlock Margin="10"
                                           Height="30"
                                           Grid.Column="1"
                                           Text="{Binding Lastname}"/>
    
                    </Grid>
    
                </Border>
    
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    Note that for you to be able to bind an element in the template to your Player class, you must define the members of the Player class as public properties, e.g.:

    public class Player
    {
        public string Firstname { get; set; }
        public string Lastname { get; set; }
        public string Position { get; set; }
        public int Points { get; set; } 
        public int Price { get; set; }
        public Club Club { get; set; }
    }
    

    Finally, don't forget to set or bind the ItemsSource property to your List<Player>:

    List<Player> players = ...;
    listView.ItemsSource = players;