4 Advance Controls

Overview

• Advance controls are the controls that are used to create more complex and interactive user interfaces.
• This are more interactive controls than the basic controls and use to display large amount of data in a structured way. These controls are used to create more complex and interactive user interfaces.

ListBox

• Simple list of items that can be selected by the user.
• You can use it to display a list of items and allow the user to select one or more items from the list.
• You can use ItemsSource property to bind the list of items to the ListBox. You can also use SelectedItem property to get the selected item from the ListBox.
• Code behind is similar to windows forms ListBox control

  <ListBox
      Name="ItemsListBox"
      Width="200"
      Height="150"
      FontSize="14"
      HorizontalAlignment="Left"
      VerticalAlignment="Top">
      <ListBoxItem Content="Item 1"/>
      <ListBoxItem Content="Item 2"/>
      <ListBoxItem Content="Item 3"/>
  </ListBox>
  

ListView

• ListView is similar to ListBox but it provides more functionality and flexibility. It can be used to display a list of items in a tabular format with multiple columns.
• ListView inherits from ListBox, so you can use all the properties and methods of ListBox in ListView.
• You can also completely customize the layout of ListView items using DataTemplate. like using Borders, Images, Buttons in listview items.

List view with single column

<ListView Name="FriendsListView" />

'Code to populate ListView Item
FriendsListView.Items.Add("Deven");
FriendsListView.Items.Add("Dhruv");
FriendsListView.Items.Add("Yogesh");

//Code to display Selected item from FriendsListView
MessageBox.Show($"{FriendsListView.SelectedItem.ToString()}");

//Code to remove selected item from FriendsListView
FriendsListView.Items.Remove(FriendsListView.SelectedItem);

List view with multiple columns

<ListView Name="FriendsListView" Width="300" Height="150">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="140" />
            <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="80" />
        </GridView>
    </ListView.View>
</ListView>

public class Friend
{
    public string Name { get; set; } = string.Empty;
    public int Age { get; set; }
    public override string ToString()
    {
        return $"{Name} ({Age})";
    }
}
````
```csharp
//code to populate ListView Item with multiple columns
FriendsListView.Items.Add(new Friend
{
    Name = "Deven",
    Age = 25
});

FriendsListView.Items.Add(new Friend
{
    Name = "Dhruv",
    Age = 28
});

FriendsListView.Items.Add(new Friend
{
    Name = "Yogesh",
    Age = 30
});

ListView with Custom layout and data binding

    <ListView ItemsSource="{Binding Clients}">

        <ListView.ItemTemplate>

            <DataTemplate>

                <Border BorderBrush="LightGray"
                    BorderThickness="1"
                    CornerRadius="5"
                    Margin="5"
                    Padding="10">

                    <StackPanel>
                        <TextBlock Text="{Binding Name}"
                               FontWeight="Bold"
                               FontSize="16"/>

                        <TextBlock Text="{Binding Rate,
                                      StringFormat=₹{0}/hr}"/>
                    </StackPanel>

                </Border>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

public class Client
{
    public string Name { get; set; }
    public double Rate { get; set; }
}
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Clients =
        [
            new Client
            {
                Name = "Client 1",
                Rate = 100,
            },
            new Client
            {
                Name = "Client 2",
                Rate = 200,
            },
        ];

        DataContext = this;
    }
    public List<Client> Clients { get; set; }
}

Listview Data Template

• DataTemplate allow us to specify how the data should be displayed in the ListView.
• This is different from style which mostly deals with visual aspects of the control. DataTemplate is used to define the visual representation of the data in the ListView.

public class Client
{
    public string Name { get; set; }
    public double Rate { get; set; }
}
List<Client> clients = new()
{
    new Client { Name = "ABC", Rate = 1500 },
    new Client { Name = "XYZ", Rate = 2000 }
};

ClientList.ItemsSource = clients;

<ListBox ItemsSource="{Binding Clients}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Rate}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ABC
1500

XYZ
2000

DataGrid

• DataGrid is used to display data in tabular format with rows and columns
• Listview columns are only for presentation purpose, but DataGrid columns are editable and can be bound to data source

  <Window x:Class="WpfApp.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:WpfApp" mc:Ignorable="d" 
      Title="People" Height="450" Width="800">
  
      <Grid Margin="20">
          <Grid.RowDefinitions>
              <RowDefinition/>
              <RowDefinition Height="50"/>
          </Grid.RowDefinitions>
          <DataGrid ItemsSource="{Binding People}"
                    AutoGenerateColumns="False"
                    CanUserAddRows="False">
              <DataGrid.Columns>
                  <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                  <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
              </DataGrid.Columns>
          </DataGrid>
          <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
              <Button Name="ShowPersonButton" Content="Show Person" Click="ShowPersonButton_Click" Width="100" Height="30" Margin="0,0,10,0"/>
          </StackPanel>
      </Grid>
  </Window>
  

  public class Person
  {
      public string Name { get; set; } = "";
      public int Age { get; set; }
  }
  
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
          DataContext = this;
      }
  
      public List<Person> People { get; } = new()
      {
          new Person { Name = "Alice", Age = 30 },
          new Person { Name = "Bob", Age = 25 },
          new Person { Name = "Charlie", Age = 35 }
      };
  
      private void ShowPersonButton_Click(object sender, RoutedEventArgs e)
      {
          var result = new StringBuilder();
          foreach (var person in People)
          {
              result.AppendLine($"Name: {person.Name}, Age: {person.Age}");
          }
          MessageBox.Show(result.ToString());
      }
  }