This project is read-only.

The page has been moved to GitHub

DataGrid

Package: MyToolkit.Extended
Platforms: WinRT(Universal)

Data grid control to display data in a table (read-only).

Features:
  • Navigation support (Navigate event)
  • Details view for selected item (ItemDetailsTemplate)
  • Sorted column can be changed
  • Apply filter to items source
  • Custom cell types to support other object types and writeable cells
Info: Internally, the class uses the ObservableCollectionView class to provide a sorted view on the provided items source.

<controls:DataGrid ItemsSource="{Binding People}" x:Name="DataGrid" 
                   SelectionMode="Multiple" DefaultOrderIndex="1"
                   SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" 
                   SelectionChanged="OnSelectedItemsChanged">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Width="200" Header="Firstname" 
                  Binding="{Binding Firstname}"
                  d:DataContext="{d:DesignInstance Type=models:Person}" />
        <controls:DataGridTextColumn Width="200" Binding="{Binding Lastname}" 
                  IsAscendingDefault="False"
                  d:DataContext="{d:DesignInstance Type=models:Person}">
            <controls:DataGridTextColumn.Header>
                <TextBlock Text="Lastname" Foreground="Green" />
            </controls:DataGridTextColumn.Header>
        </controls:DataGridTextColumn>
        <controls:DataGridTextColumn Width="200" Header="Category" 
                  Binding="{Binding Category}" 
                  d:DataContext="{d:DesignInstance Type=models:Person}" />
    </controls:DataGrid.Columns>
    <controls:DataGrid.ItemDetailsTemplate>
        <DataTemplate>
            <StackPanel Margin="10,10,10,5" 
                        d:DataContext="{d:DesignInstance Type=models:Person}">
                <TextBlock Text="Details: " FontWeight="Bold" />
                <TextBlock Text="{Binding Firstname}" />
                <TextBlock Text="{Binding Lastname}" />
            </StackPanel>
        </DataTemplate>
    </controls:DataGrid.ItemDetailsTemplate>
</controls:DataGrid>

Screenshot of the DataGrid:



Tip: Use d:DataContext to provide type information for type safe bindings in columns and the ItemDetailsTemplate.

Extensions

UseSingleSelectionAndDeselection

Used to allow only one selection which can also be deselected:

<controls:DataGrid controls:DataGridExtensions.UseSingleSelectionAndDeselection="true" />

Last edited Jun 3, 2015 at 10:50 PM by rsuter, version 33