Completed
Last Updated: 13 Nov 2024 16:23 by ADMIN
Release 8.0.0 (2024 Q4)
sorg
Created on: 27 Apr 2023 07:16
Category: UI for .NET MAUI
Type: Feature Request
11
Add Splitter control
I'm looking for a control for .net maui for cross-platform desktop development that lets you resize the different sections of your user interface like the GridSplitter control does in WinUI.
Duplicated Items
9 comments
ADMIN
Didi
Posted on: 13 Nov 2024 16:23

Hello all,

Review the Telerik .NET MAUI GridSplitter control documentation for more details how to use the control and what are the exposed features.

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.

Legrand
Posted on: 03 Jan 2024 14:08
Need this feature too
Hanoch
Posted on: 21 Dec 2023 09:13
 Also vertical grid splitter.
Attached Files:
Hanoch
Posted on: 19 Dec 2023 11:09

This  content view can be used to resize the Grid window by dragging.

However, this method is only valid for the horizontal direction.

Attached Files:
Clint
Posted on: 19 Nov 2023 18:54

Here's a cleaner approach:


Add a Drop Gesture Recognizer to your Grid and subscribe to the DragOver event:

<Grid  x:Name="myGrid" Grid.Row="1">
<Grid.GestureRecognizers>
<DropGestureRecognizer DragOver="DropGestureRecognizer_DragOver">
</DropGestureRecognizer>
</Grid.GestureRecognizers>

Place the splitter in your grid between two columns:

xmlns:local="clr-namespace:yournamespace.Controls"

<local:SplitterControl Grid.Column="1" x:Name="splitter"/>

Call to SplitterControl Class

    private void DropGestureRecognizer_DragOver(object sender, DragEventArgs e)
    {
        splitter.UpdateSplitterPosition(sender, e);
    }

Add the SplitterControl class to your project:

namespace YourNameSpace.Resources.Controls;

public partial class SplitterControl : ContentView
{

public SplitterControl()
{
InitializeComponent();
}

private void OnDragStarting(object sender, DragStartingEventArgs e)
{
splitter.IsVisible = false;
}

public void UpdateSplitterPosition(object sender, DragEventArgs e)
{
int columnIndex = Grid.GetColumn(this);
columnIndex--;

var newWidth = (int)e.GetPosition(null)!.Value.X;

if (DeviceInfo.Platform == DevicePlatform.WinUI)
{
e.PlatformArgs.DragEventArgs.DragUIOverride!.IsCaptionVisible = false;
e.PlatformArgs.DragEventArgs.DragUIOverride!.IsGlyphVisible = false;
}

splitter.IsVisible = true;

var parentGrid = Parent as Grid;

if (parentGrid != null && columnIndex < parentGrid.ColumnDefinitions.Count)
{
parentGrid.ColumnDefinitions[columnIndex].Width = new GridLength(newWidth);
}
}
}

 

Clint
Posted on: 17 Nov 2023 15:51

The recent .NET 8 update has now made it possible to create your own splitter.

Add DropGestureRecognizer to get cursor position:

    <Grid>
        <Grid.GestureRecognizers>
            <DropGestureRecognizer DragOver="DropGestureRecognizer_DragOver">
            </DropGestureRecognizer>
        </Grid.GestureRecognizers>

Create a BoxView to use as a splitter and place between two columns:

<!-- Splitter -->
<BoxView x:Name="splitter" 
Grid.Column="1" 
WidthRequest="5" 
BackgroundColor="Gray"                     
HorizontalOptions="Center" 
VerticalOptions="FillAndExpand" >
<BoxView.GestureRecognizers>
<DragGestureRecognizer DragStarting="DragGestureRecognizer_DragStarting" >                        
</DragGestureRecognizer>
</BoxView.GestureRecognizers>
</BoxView>

Hide splitter in DragStarting. This prevents a "double splitter" effect:

private void DragGestureRecognizer_DragStarting(object sender, DragStartingEventArgs e)
    {
        splitter.IsVisible = false;
    }

Calculate X position and set left column width. Make splitter Visible so we can see if while dragging. Use DragUIOverride options to hide caption and glyph while dragging.

    private void DropGestureRecognizer_DragOver(object sender, DragEventArgs e)
    {
        e.PlatformArgs.DragEventArgs.DragUIOverride!.IsCaptionVisible = false;
        e.PlatformArgs.DragEventArgs.DragUIOverride!.IsGlyphVisible = false;

        splitter.IsVisible = true;

        double newWidth = (int)e.GetPosition(null)!.Value.X;        
        myGrid.ColumnDefinitions[0].Width = new GridLength(newWidth);

    }

Craig
Posted on: 17 Oct 2023 05:52

This would be an amazing feature and a bit surprised it is not there.

Feels like a fundamental part of a sophisticated UI to allow the user to apportion their available size as they see fit!!

Looking forward to it :)

Florian
Posted on: 07 Sep 2023 12:21
looking for this feature too
Clint
Posted on: 03 Jul 2023 19:43
I'm looking for this feature as well.