DataGrid

• Package: MyToolkit.Extended
• Platforms: WinRT, UWP

Data grid control to display data in a table.

Features:

• Navigation support using the 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>

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

Disable row padding

To disable the default row padding just set the RowStyle:

<controls:DataGrid>
    <controls:DataGrid.RowStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0"></Setter>
        </Style>
    </controls:DataGrid.RowStyle>
</controls:DataGrid>

Extensions

UseSingleSelectionAndDeselection

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

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