如何使用 uwp 中网格中的用户界面更改列定义中的宽度？

Question

当用户将鼠标放在单元格边缘时，如何像上图那样更改网格中列定义的宽度，它允许用户增加或减少宽度？

Answer 1

您可以在网格顶部放置一些 Rectangles，看起来与 Excel 相同。然后处理 Rectangles 的 pointer-events 以获取当您按下 Rectangle 并移动光标时的指针值。获得这些值后，您可以更改对应于您按下的 Rectangle 的网格列的宽度。

我这里做了一个简单的例子，你可以看看

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>

后面的代码：

 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;
    }
}