arunselvakumar
12/13/2017 - 7:52 AM

A very simple example for using WPF to hide/show the row details on a DataGrid.

A very simple example for using WPF to hide/show the row details on a DataGrid.

<UserControl x:Class="DataGridExample.Views.MainView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:converters="clr-namespace:DataGridExamples.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <ResourceDictionary>            
            <DataTemplate x:Key="ExpandDetails">
                <ToggleButton Name="ShowDetails" 
                              IsChecked="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, 
                                                  Path=DetailsVisibility, 
                                                  Converter={converters:VisbilityToBooleanConverter}, 
                                                  Mode=TwoWay}" 
                              Margin="4" />
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>

    <DockPanel>
        <!--<ContentControl x:Name="Ribbon" DockPanel.Dock="Top" />-->
        <DataGrid
            SelectionMode="Single"
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            AutoGenerateColumns="False" 
            ItemsSource="{Binding AllUsers}"
            CanUserAddRows="False"
            CanUserDeleteRows="True"
            IsReadOnly="True"
            SelectedItem="{Binding SelectedUser}">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="" CellTemplate="{StaticResource ExpandDetails}" Width="30" />
                <DataGridTextColumn Binding="{Binding Path=Id}" Header="Id" Width="1*" />
                <DataGridTextColumn Binding="{Binding Path=Username}" Header="Username" Width="6*" />
                <DataGridTextColumn Binding="{Binding Path=Role}" Header="Role" Width="2*" />
            </DataGrid.Columns>
            <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <Border BorderThickness="2,0,0,0" Margin="30,0,0,0" Background="{StaticResource Neutral_Gray}" BorderBrush="Black">
                        <StackPanel>
                            <TextBlock Text="User Permission" Margin="5" />                            
                            <ListView ItemsSource="{Binding Permissions}" SelectionMode="Single" IsSynchronizedWithCurrentItem="True">
                                <ListView.View>
                                    <GridView>
                                        <GridViewColumn Header="Module" DisplayMemberBinding="{Binding ModuleName}" />
                                        <GridViewColumn Header="Permission Level"  DisplayMemberBinding="{Binding PermissionLevel}" />
                                    </GridView>
                                </ListView.View>
                            </ListView>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>
        </DataGrid>
    </DockPanel>
</UserControl>
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.Linq;
using System.Text;

namespace DataGridExample.Converters
{
    [System.Windows.Markup.MarkupExtensionReturnType(typeof(IValueConverter))]
    public class VisbilityToBooleanConverter : BaseConverter, IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (Visibility)value == Visibility.Visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (bool)value ? Visibility.Visible : Visibility.Collapsed;
        }

        #endregion
    }
}