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
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;