-
Notifications
You must be signed in to change notification settings - Fork 1
Update Readme file (new template) #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 24.2.1+
Are you sure you want to change the base?
Changes from 4 commits
13b8ad5
e348bc0
ea1d46f
b657797
9574599
fb17b76
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,25 +4,99 @@ | |
[](https://docs.devexpress.com/GeneralInformation/403183) | ||
[](#does-this-example-address-your-development-requirementsobjectives) | ||
<!-- default badges end --> | ||
<!-- default file list --> | ||
*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 resizing columns) 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 `ResizeHelper`. The control stores the current row height in the `RowHeight` property and updates this value when the splitter moves. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I have one more question. Do you think we need to add an explanation that explains what "...to work with Or if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, we can add this extra info. The final text looks as follows: The There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks like "epy There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry, it was THE but in ru keyboard There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I see now. Can you apply the change? |
||
|
||
```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` object. 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`: | ||
albertov05 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```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 [`DataRowTemplate`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.TableView.DataRowTemplate) contains a `ContentControl` that displays the default row content and a `ResizableDataRow` control with a `RowSplitter` to change the row height: | ||
albertov05 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```xaml | ||
<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](./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)) | ||
<!-- default file list end --> | ||
# WPF Grid - Resize rows using a splitter | ||
|
||
## Documentation | ||
|
||
<p>To make the row height resizable, perform these steps:</p> | ||
<p>1. Create a control class that describes the <strong>IResizeHelperOwner</strong> interface.</p> | ||
<p>2. Create an attached RowHeight property, add it to this class and assign the property value to the RowData’s RowState property.</p> | ||
<p>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.</p> | ||
<p>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.</p> | ||
* [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) | ||
|
||
<br/> | ||
## 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) | ||
|
||
<!-- feedback --> | ||
## Does this example address your development requirements/objectives? | ||
|
Uh oh!
There was an error while loading. Please reload this page.