2 Answers, 1 is accepted
Hello Sorg,
Currently, Telerik .NET MAUI does not have a GridSplitter control. I have logged this as a feature request here: https://feedback.telerik.com/maui/1606897-add-gridsplitter-control
Cast your vote and follow the item to track its progress.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hello,
thank you for submitting a feature request, is there an alternative method to resize sections of the UI for desktop with the mouse with .net maui?
Rank 1
Iron
Iron
Here's what I use, however it will only work with .NET 8. Also, it's only a vertical splitter, but it would be easy enough to use the same code to make a horizontal.
This works by placing a contentview between two columns in a grid layout. When you click and move the "splitter", it reads the new position and resizes the left side column to match.
In you XAML, you add a reference to the location to the SplitterControl contentview (code below)
xmlns:local="clr-namespace:YOURAPPLICATION.Resources.Controls"
Then add this between the two columns in your grid layout:
<local:SplitterControl x:Name="splitter" Grid.Column="1" />Add the below SplitterControl contentview to your application:
SplitterControl.xaml (Style this however you like, I added the CursorBehaviors to get the pointer to change on mouseover, but that is not necessary):
<ContentView
x:Class="YOURAPPLICATION.Resources.Controls.SplitterControl"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:YOURAPPLICATION">
<Grid
x:Name="splitter"
local:CursorBehavior.Cursor="SizeRightLeft"
BackgroundColor="DarkGray"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand">
<Grid.GestureRecognizers>
<DragGestureRecognizer DragStarting="OnDragStarting" />
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView
Grid.Row="1"
HorizontalOptions="Center"
WidthRequest="6"
Color="#757474" />
</Grid>
</ContentView>SplitterControl.xaml.cs
public partial class SplitterControl : ContentView
{
private DropGestureRecognizer _dropGestureRecognizer;
public SplitterControl()
{
InitializeComponent();
SetupGestureRecognizers();
}
private void SetupGestureRecognizers()
{
var dragGestureRecognizer = new DragGestureRecognizer();
dragGestureRecognizer.DragStarting += OnDragStarting;
splitter.GestureRecognizers.Add(dragGestureRecognizer);
PropertyChanged += (s, e) =>
{
if (e.PropertyName == "Parent" && Parent is Grid parentGrid)
{
if (_dropGestureRecognizer == null)
{
_dropGestureRecognizer = new DropGestureRecognizer();
_dropGestureRecognizer.DragOver += OnDragOver;
}
if (!parentGrid.GestureRecognizers.Contains(_dropGestureRecognizer))
{
parentGrid.GestureRecognizers.Add(_dropGestureRecognizer);
}
}
};
}
private void OnDragStarting(object sender, DragStartingEventArgs e)
{
splitter.IsVisible = false;
}
private void OnDragOver(object sender, DragEventArgs e)
{
UpdateSplitterPosition(sender, e);
}
public void UpdateSplitterPosition(object sender, DragEventArgs e)
{
int columnIndex = Grid.GetColumn(this);
columnIndex--;
var parentGrid = Parent as Grid;
if (parentGrid == null && columnIndex < 0 && columnIndex < parentGrid.ColumnDefinitions.Count)
{
return;
}
var newWidth = (int)e.GetPosition(null)!.Value.X;
splitter.IsVisible = true;
parentGrid.ColumnDefinitions[columnIndex].Width = new GridLength(newWidth);
#if WINDOWS
e.PlatformArgs.DragEventArgs.DragUIOverride!.IsCaptionVisible = false;
e.PlatformArgs.DragEventArgs.DragUIOverride!.IsGlyphVisible = false;
#endif
}
}