diff --git a/Images/resize-row-height.gif b/Images/resize-row-height.gif new file mode 100644 index 0000000..236a1db Binary files /dev/null and b/Images/resize-row-height.gif differ diff --git a/Readme.md b/Readme.md index 9654eb0..59e61df 100644 --- a/Readme.md +++ b/Readme.md @@ -4,25 +4,99 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - -*Files to look at*: +# WPF Data Grid – Resize Row Height + +This example implements resizable rows in a DevExpress WPF [Grid](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.GridControl). 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. + +![Resize Row Height with a Splitter](./Images/resize-row-height.gif) + +## Implementation Details + +### Create a Resizable Control + +The `ResizableDataRow` control implements the `IResizeHelperOwner` interface to work with `ResizeHelper`. The control stores the current row height in the `RowHeight` property and updates this value when the splitter moves. + +```csharp +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: + +```csharp +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`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.TableView.DataRowTemplate) property defines a `ContentControl` that displays the default row content and a `ResizableDataRow` control with a `RowSplitter` to change the row height: + +```xaml + + + + + + + + + + + + + + + + + + + + +``` + +## Files to Review + +* [MainWindow.xaml](./CS/PersistentRowState/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/PersistentRowState/MainWindow.xaml)) +* [MainWindow.xaml.cs](./CS/PersistentRowState/MainWindow.xaml.cs) (VB: [MainWindow.xaml.vb](./VB/PersistentRowState/MainWindow.xaml.vb)) * [Classes.cs](./CS/PersistentRowState/Classes.cs) (VB: [Classes.vb](./VB/PersistentRowState/Classes.vb)) * [Data.cs](./CS/PersistentRowState/Data.cs) (VB: [Data.vb](./VB/PersistentRowState/Data.vb)) -* **[MainWindow.xaml](./CS/PersistentRowState/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/PersistentRowState/MainWindow.xaml))** -* [MainWindow.xaml.cs](./CS/PersistentRowState/MainWindow.xaml.cs) (VB: [MainWindow.xaml.vb](./VB/PersistentRowState/MainWindow.xaml.vb)) - -# WPF Grid - Resize rows using a splitter +## Documentation -

To make the row height resizable, perform these steps:

-

1. Create a control class that describes the IResizeHelperOwner interface.

-

2. Create an attached RowHeight property, add it to this class and assign the property value to the RowData’s RowState property.

-

3. In GridControl’s view, create DataTemplate for the view’s DataRowTemplate property that contains ContentControl and the control that was created earlier. Add RowSplitter into the control’s template.

-

4. Bind ContentControl’s ContentTemplate property to the view’s DefaultDataRowTemplate to show data. Also, bind ContentControl’s height to the control’s RowHeight property to resize the row.

+* [GridControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.GridControl) +* [RowData](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.RowData) +* [RowState](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.RowData.RowState) +* [DataRowTemplate](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.TableView.DataRowTemplate) +* [DefaultDataRowTemplate](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.TableView.DefaultDataRowTemplate) -
+## More Examples +* [Implement CRUD Operations in the WPF Data Grid](https://github.com/DevExpress-Examples/wpf-data-grid-implement-crud-operations) +* [WPF Data Grid – Handle Drag and Drop Operations](https://github.com/DevExpress-Examples/wpf-grid-handle-drag-and-drop) +* [WPF Data Grid – Specify Custom Content for Column Chooser Headers](https://github.com/DevExpress-Examples/wpf-data-grid-custom-content-for-column-chooser-headers) +* [WPF Data Grid – Bind to Dynamic Data](https://github.com/DevExpress-Examples/wpf-bind-gridcontrol-to-dynamic-data) ## Does this example address your development requirements/objectives?