Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 7 additions & 23 deletions controls/datagrid/columns/width.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Columns Width
page_title: .NET MAUI DataGrid Documentation - Columns Width
meta_title: .NET MAUI DataGrid Documentation - Columns Width
description: Check our "Columns Width" documentation article for Telerik DataGrid for .NET MAUI.
position: 4
previous_url: /controls/datagrid/columns/datagrid-columns-width
Expand All @@ -11,14 +11,14 @@ slug: datagrid-columns-width

This article describes how to set a width to the [.NET MAUI DataGrid]({%slug datagrid-overview%}) column using the `SizeMode` and `Width` properties.

* `SizeMode`(`DataGridColumnSizeMode`)—Defines the `DataGridColumnSizeMode` value that controls how the column and its associated cells are sized horizontally.
* `SizeMode` (`DataGridColumnSizeMode`)—Defines the `DataGridColumnSizeMode` value that controls how the column and its associated cells are sized horizontally.
* `Fixed`—The column has a fixed width as defined by its Width property.
* `Stretch`—The column is stretched to the available width proportionally to its desired width.
* `Auto`—The columns is sized to its desired width. That is the maximum desired width of all associated cells.
* `Width`(`double`)—Specifies the fixed width for the column. Applicable when the `SizeMode` property is set to `DataGridColumnSizeMode`.Fixed.
* `MinimumWidth`(`double`)—Specifies the minimum width of a column. This property is applicable when setting `SizeMode` column property to `Fixed`. When `MinimumWidth` is set, you can not reduce the width of the column to a value lower than the `MinimumWidth`.
* `Width` (`double`)—Specifies the fixed width for the column. Applicable when the `SizeMode` property is set to `DataGridColumnSizeMode.Fixed`.
* `MinimumWidth` (`double`)—Specifies the minimum width of a column. This property is applicable when setting `SizeMode` column property to `Fixed`. When `MinimumWidth` is set, you can not reduce the width of the column to a value lower than the `MinimumWidth`.

* `ActualWidth` (double): Gets the actual width of the column.
* `ActualWidth` (`double`)—Gets the actual width of the column.

## Example

Expand Down Expand Up @@ -58,10 +58,6 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

>important The `Width` property of columns will apply only when `SizeMode="Fixed"`.

The first and second columns have set widths of 100 and 200, respectively:

![DataGrid Fixes Column Size](../images/datagrid-columns-width-fixed.png)

### Second Scenario when SizeMode="Stretch":

```XAML
Expand All @@ -79,17 +75,13 @@ Where the `telerik` namespace is the following:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
```

The columns take all the available space proportionally. The Width property is ignored.

![DataGrid Stretch Column Size](../images/datagrid-columns-width-stretch.png)

### Third Scenario when SizeMode="Auto":

```XAML
<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="False">
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="100" SizeMode="Auto"/>
<telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" Width="200" SizeMode="Auto"/>
<telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" SizeMode="Auto"/>
<telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" SizeMode="Auto"/>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>
```
Expand All @@ -100,10 +92,6 @@ Where the `telerik` namespace is the following:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
```

The columns take only as much space as they need. The Width property is ignored.

![DataGrid Auto Column Size](../images/datagrid-columns-width-auto.png)

### Fourth Scenario with different SizeMode values

Lastly, lets use three columns to fully clarify the `SizeMode` behavior:
Expand All @@ -124,10 +112,6 @@ Where the `telerik` namespace is the following:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
```

The first and the third columns each have a fixed size of 100 and the second column takes all the available space because of SizeMode="Stretch":

![DataGrid SizeMode](../images/datagrid-columns-width.png)

## See Also

- [Picker Column]({%slug datagrid-columns-picker-column %})
Expand Down
Binary file modified controls/datagrid/images/column-footer-style.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/datagrid/images/datagrid-columns-styling.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file removed controls/datagrid/images/datagrid-filtering-ui.png
Binary file not shown.
Binary file removed controls/datagrid/images/datagrid-itemssource.png
Binary file not shown.
Binary file not shown.
Binary file modified controls/datagrid/images/datagrid-row-height.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/datagrid/images/datagrid-rowstyle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/datagrid/images/datagrid-rowtemplate.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/datagrid/images/datagrid-style-selector.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed controls/datagrid/images/datagrid-styling.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file removed controls/datagrid/images/datagrid_localization.png
Binary file not shown.
Binary file not shown.
Binary file modified controls/datagrid/images/datagrid_sorting.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/datagrid/images/footer-content-template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions controls/datagrid/theming-and-styles/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ The following snippet shows how to set the `SelectionStyle` property:

For styling the `CurrentCell` by using the `CurrentCellStyle` property, review the [Cells]({%slug datagrid-current-cell%}#styling-the-cell) article.

![Styling rows and selected row of the Telerik UI for .NET MAUI DataGrid](../images/datagrid-cells-rows.png)

## Lines

Use the following properties for configuring the DataGrid grid lines:
Expand Down
Binary file modified controls/docklayout/images/docklayout_docking_feature.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified controls/docklayout/images/docklayout_getting_started.png
Binary file modified controls/docklayout/images/docklayout_positionlast.png
Binary file modified controls/docklayout/images/docklayout_positiononeside.png
Binary file modified controls/gauge/images/gauge-gettingstarted.png
Binary file modified controls/map/images/map_getbestview.png
Binary file modified controls/map/images/map_getting_started.png
Binary file modified controls/map/images/map_multiple_selection.png
Binary file modified controls/map/images/map_programmatic_selection.png
Binary file modified controls/map/images/map_shapelayer_labels.png
Binary file modified controls/map/images/map_styling_labelsstyle.png
Binary file modified controls/map/images/map_styling_shapestyle.png
Binary file modified controls/map/images/map_styling_shapestyleselector.png
Binary file modified controls/path/Images/custom_default_paths.png
Binary file modified controls/path/Images/path-gettingstarted.png
Binary file modified controls/path/Images/path_geometry.png
Binary file modified controls/path/Images/path_multipath.png
Binary file modified controls/sidedrawer/images/sidedrawer-gettingstarted.png
9 changes: 2 additions & 7 deletions controls/slideview/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,9 @@ slug: slideview-getting-started

This guide provides the information you need to start using Telerik UI for .NET MAUI SlideView by adding the control to your project.

At the end, you will achieve the following result on Desktop platforms.

![.NET MAUI SlideView Getting Started](images/slideview-gettingstarted-desktop.png)

And the result on mobile platforms:

![.NET MAUI SlideView Getting Started](images/slideview-gettingstarted-mobile.png)
At the end, you will achieve the following result.

![.NET MAUI SlideView Getting Started](images/slideview-gettingstarted.png)

## Prerequisites

Expand Down
Binary file modified controls/slideview/images/slideview-commands.gif
Diff not rendered.
Diff not rendered.
Binary file modified controls/slideview/images/slideview-item-template.gif
Diff not rendered.
Binary file modified controls/slideview/images/slideview-overview.png
4 changes: 2 additions & 2 deletions controls/slideview/orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ Add the ViewModel:

<snippet id='slideview-events-viewmodel' />

See the result in the images below:
See the result in the image below:

![.NET MAUI SlideView IndicatorStyling](images/slideview-orientation.png)
![.NET MAUI SlideView IndicatorStyling](images/slideview-orientation.gif)

> For a runnable example with the SlideView Orientation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **SlideView > Features**.

Expand Down
Binary file modified controls/wraplayout/images/wraplayout_getting_started.png
Binary file removed controls/wraplayout/images/wraplayout_itemsize.png
Diff not rendered.
Binary file modified controls/wraplayout/images/wraplayout_orientation.png
Binary file modified controls/wraplayout/images/wraplayout_positionlast.png
2 changes: 1 addition & 1 deletion controls/wraplayout/wrap-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Here is a quick sample of a WrapLayout with a specified item size:

The following image shows the end result.

![.NET MAUI WrapLayout Item Size](images/wraplayout_itemsize.png)
![.NET MAUI WrapLayout Item Size](images/wraplayout_itemsize.gif)

## Positioning the Last Child Element

Expand Down
Loading