how to change width in column definition using user interface in grid in uwp?

Question

How to change the width of columndefinition in grid like in the above image when user places mouser over the edge of cell it allows user to increase or decrease the width?

Answer 1

You could put some Rectangles on the top of the Grid which looks the same as Excel. Then handle the pointer-events of the Rectangles to get the pointer values when you pressed the Rectangle and move your cursor. After you get the values, you could change the width of the grid column corresponding to the Rectangle you pressed.

I've made a simple sample here and you could take a look.

Xaml:

 <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Grid x:Name="g">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="a" Width="100"></ColumnDefinition>
        <ColumnDefinition x:Name="b" Width="100"></ColumnDefinition>
        <ColumnDefinition x:Name="c" Width="100"></ColumnDefinition>
        <ColumnDefinition x:Name="d" Width="100"></ColumnDefinition>
        <ColumnDefinition x:Name="e" Width="100"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Rectangle StrokeThickness="1" x:Name="A" Stroke="Black" Grid.Column="0" Grid.Row="0" Fill="White" PointerPressed="Rectangle_PointerPressed" PointerMoved="Rectangle_PointerMoved" PointerReleased="Rectangle_PointerReleased" PointerExited="E_PointerExited"/>
    <Rectangle StrokeThickness="1" x:Name="B" Stroke="Black" Grid.Column="1" Grid.Row="0" Fill="White" PointerPressed="Rectangle_PointerPressed" PointerMoved="Rectangle_PointerMoved" PointerReleased="Rectangle_PointerReleased" PointerExited="E_PointerExited"/>
    <Rectangle StrokeThickness="1" x:Name="C" Stroke="Black" Grid.Column="2" Grid.Row="0" Fill="White" PointerPressed="Rectangle_PointerPressed" PointerMoved="Rectangle_PointerMoved" PointerReleased="Rectangle_PointerReleased" PointerExited="E_PointerExited"/>
    <Rectangle StrokeThickness="1" x:Name="D" Stroke="Black" Grid.Column="3" Grid.Row="0" Fill="White" PointerPressed="Rectangle_PointerPressed" PointerMoved="Rectangle_PointerMoved" PointerReleased="Rectangle_PointerReleased" PointerExited="E_PointerExited"/>
    <Rectangle StrokeThickness="1" x:Name="E" Stroke="Black" Grid.Column="4" Grid.Row="0" Fill="White" PointerPressed="Rectangle_PointerPressed" PointerMoved="Rectangle_PointerMoved" PointerReleased="Rectangle_PointerReleased" PointerExited="E_PointerExited"/>


    <Rectangle Grid.Column="0" Grid.Row="1" Fill="Red"/>
    <Rectangle Grid.Column="1" Grid.Row="1" Fill="Yellow"/>
    <Rectangle Grid.Column="2" Grid.Row="1" Fill="Red"/>
    <Rectangle Grid.Column="3" Grid.Row="1" Fill="Yellow"/>
    <Rectangle Grid.Column="4" Grid.Row="1" Fill="Red"/>
</Grid>
</ScrollViewer>

Code behind:

 public sealed partial class MainPage : Page
{
    public bool isPressed { get; set; } 
    //this is the start point
    public Point StartPoint = new Point(0, 0);
    //this is the original width of the grid column
    public double oldGridWidth { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        isPressed= false;
        oldGridWidth = 0;
    }

    private void Rectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        // get the start point when you press the rectangle
        isPressed = true;
        Rectangle rectangle = sender as Rectangle;
        PointerPoint CurrentPosition = e.GetCurrentPoint(rectangle);
        StartPoint = CurrentPosition.Position;
       
    }

    private void Rectangle_PointerMoved(object sender, PointerRoutedEventArgs args)
    {
        //make sure the code is executed only when the rectangle is pressed
        if (isPressed) 
        {
            // find out which rectangle is pressed
            Rectangle rectangle = sender as Rectangle;
            PointerPoint CurrentPosition = args.GetCurrentPoint(rectangle);
            Point PointerPosition = CurrentPosition.Position;
            // get the value that your mouse moved
            double xDistance = PointerPosition.X - StartPoint.X;

            // change the width of the Grid column correspond to the rectangle
            switch (rectangle.Name) 
            {
                // get the original width of the grid column first
                // the PointerMoved will be triggered for many times so make sure you will set the oldGridWidth for only once.
                case "A":
                    // if the oldGridWidth is 0, set the current  grid column width to it
                    // if the oldGridWidth is not zero. do nothing
                    oldGridWidth = oldGridWidth == 0 ? a.Width.Value : oldGridWidth;
                   
                    a.Width = new GridLength(oldGridWidth + xDistance);
                    break;
                case "B":

                    oldGridWidth = oldGridWidth == 0 ? b.Width.Value : oldGridWidth;

                    b.Width = new GridLength(oldGridWidth + xDistance);
                    break;
                case "C":

                    oldGridWidth = oldGridWidth == 0 ? c.Width.Value : oldGridWidth;

                    c.Width = new GridLength(oldGridWidth + xDistance);
                    break;
                case "D":

                    oldGridWidth = oldGridWidth == 0 ? d.Width.Value : oldGridWidth;

                    d.Width = new GridLength(oldGridWidth + xDistance);
                    break;
                case "E":

                    oldGridWidth = oldGridWidth == 0 ? e.Width.Value : oldGridWidth;

                    e.Width = new GridLength(oldGridWidth + xDistance);
                    break;
            }
            //change the width of the whole grid and the rectangle
            rectangle.Width = rectangle.Width + xDistance;
            g.Width = g.Width + xDistance;

        }
    }

    private void Rectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        // reset the original width of the grid column 
        // when the press is released
        isPressed = false;
        oldGridWidth = 0;
    }

    private void E_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        // reset the original width of the grid column 
        // when the pointer is out of the control
        isPressed = false;
        oldGridWidth = 0;
    }
}