How To Create a Generic Sortable Listview in Uwp Xaml

XAML design

<ListView Grid.Row="6" Name="lvMembersSearchResults" Background="LightGray" ItemClick="lvMembersSearchResults_ItemClick" IsItemClickEnabled="True" Margin="5,5,5,5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch">Setter>
Style>
ListView.ItemContainerStyle>
<ListView.Header>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch">Setter>
Style>
ListView.Header>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
Grid.ColumnDefinitions>
<TextBlock x:Uid="tbRank" TextWrapping="Wrap" Text="Rank" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbName" TextWrapping="Wrap" Text="Name" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbTaxId" TextWrapping="Wrap" Text="Tax ID" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbAge" TextWrapping="Wrap" Text="Age" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
Grid>
DataTemplate>
ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding Rank}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" />
<TextBlock TextWrapping="NoWrap" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding TaxId}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding Age}" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
Grid>
DataTemplate>
ListView.ItemTemplate>
ListView>

coding

namespace WpfTutorialSamples.ListView_control
{
public partial class ListViewDataBindingSample : Window
{
public ListViewDataBindingSample()
{
InitializeComponent();
List items = new List();
items.Add(new Emp() {Rank = 1, Name = "John Doe",TaxId = 4, Age = 42 });
items.Add(new Emp() {Rank = 2, Name = "Jane Doe",TaxId = 4, Age = 39 });
items.Add(new Emp() {Rank = 3, Name = "Sammy Doe",TaxId = 4, Age = 13 });
lvMembersSearchResults.ItemsSource = items;
}
}
public class Emp
{
public int Rank { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ved Prakash8y ago
I want to create it in UWP not in wpf.
0
Laxmidhar Sahoo8y ago
XAML design
<ListView Grid.Row="6" Name="lvMembersSearchResults" Background="LightGray" ItemClick="lvMembersSearchResults_ItemClick" IsItemClickEnabled="True" Margin="5,5,5,5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch">Setter>
Style>
ListView.ItemContainerStyle>
<ListView.Header>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch">Setter>
Style>
ListView.Header>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
Grid.ColumnDefinitions>
<TextBlock x:Uid="tbRank" TextWrapping="Wrap" Text="Rank" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbName" TextWrapping="Wrap" Text="Name" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbTaxId" TextWrapping="Wrap" Text="Tax ID" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbAge" TextWrapping="Wrap" Text="Age" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
Grid>
DataTemplate>
ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding Rank}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" />
<TextBlock TextWrapping="NoWrap" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding TaxId}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding Age}" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
Grid>
DataTemplate>
ListView.ItemTemplate>
ListView>
coding
namespace WpfTutorialSamples.ListView_control
{
public partial class ListViewDataBindingSample : Window
{
public ListViewDataBindingSample()
{
InitializeComponent();
List items = new List();
items.Add(new Emp() {Rank = 1, Name = "John Doe",TaxId = 4, Age = 42 });
items.Add(new Emp() {Rank = 2, Name = "Jane Doe",TaxId = 4, Age = 39 });
items.Add(new Emp() {Rank = 3, Name = "Sammy Doe",TaxId = 4, Age = 13 });
lvMembersSearchResults.ItemsSource = items;
}
}
public class Emp
{
public int Rank { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}
0