WPF Data Grid – Resize Row Height

This example implements resizable rows in a DevExpress WPF Grid. Users can interactively change the height of individual grid rows (similar to the way columns are resized) and retain these changes for a consistent user experience.

Implementation Details

Create a Resizable Control

The ResizableDataRow control implements the IResizeHelperOwner interface to work with the ResizeHelper class, which handles mouse-based row resizing. The control stores the current row height in the RowHeight property and updates this value when a user moves the splitter.

public class ResizableDataRow : Control, IResizeHelperOwner {
    public static readonly DependencyProperty RowHeightProperty =
        DependencyProperty.RegisterAttached("RowHeight", typeof(double), typeof(ResizableDataRow), new PropertyMetadata(20d));

    double IResizeHelperOwner.ActualSize { get => RowHeight; set => RowHeight = value; }
    void IResizeHelperOwner.ChangeSize(double delta) {
        RowHeight = Math.Min(300, Math.Max(20, RowHeight + delta));
    }
    // ...
}

Persist Row Height with an Attached Property

The RowHeight attached property stores the height value in the RowState property. The grid uses this value to restore the row height after scrolling or refreshing. The ResizableDataRow control gets and sets the row height through the RowState property:

public static void SetRowHeight(DependencyObject element, double value) {
    element.SetValue(RowHeightProperty, value);
}

public static double GetRowHeight(DependencyObject element) {
    return (double)element.GetValue(RowHeightProperty);
}

Define a Row Template

The template assigned to the DataRowTemplate property defines a ContentControl that displays the default row content and a ResizableDataRow control with a RowSplitter to change the row height:

<DataTemplate x:Key="PersistentRowStateDataRowTemplate">
    <StackPanel Orientation="Vertical">
        <dx:MeasurePixelSnapper>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ContentControl Content="{Binding}"
                                ContentTemplate="{Binding Path=View.DefaultDataRowTemplate}"
                                Height="{Binding Path=RowState.(local:ResizableDataRow.RowHeight)}" />
            </Grid>
        </dx:MeasurePixelSnapper>
        <local:ResizableDataRow>
            <local:ResizableDataRow.Template>
                <ControlTemplate>
                    <dxg:RowSplitter Name="PART_Resizer"
                                     Grid.Row="1"
                                     Cursor="SizeNS"
                                     Height="1" />
                </ControlTemplate>
            </local:ResizableDataRow.Template>
        </local:ResizableDataRow>
    </StackPanel>
</DataTemplate>

Files to Review

• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)
• Classes.cs (VB: Classes.vb)
• Data.cs (VB: Data.vb)

Documentation

• GridControl
• RowData
• RowState
• DataRowTemplate
• DefaultDataRowTemplate

More Examples

• Implement CRUD Operations in the WPF Data Grid
• WPF Data Grid – Handle Drag and Drop Operations
• WPF Data Grid – Specify Custom Content for Column Chooser Headers
• WPF Data Grid – Bind to Dynamic Data

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)