WPF/Silverlight小技巧：实现拖动改变内容呈现范围

WPF/Silverlight小技巧：实现拖动改变内容呈现范围

效果图如图所示：（鼠标拖动中间标线，就可以拖动显示区域改变大小）

namespace DragGridSizeTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DragLine.MouseLeftButtonUp += new MouseButtonEventHandler(DragLine_MouseLeftButtonUp);
        }


        private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragLine.CaptureMouse();
            this.DragLine.MouseMove += new MouseEventHandler(DragLine_MouseMove);
        }

        private void DragLine_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            this.DragLine.ReleaseMouseCapture();
            this.DragLine.MouseMove -= new MouseEventHandler(DragLine_MouseMove);
        }

        private void DragLine_MouseMove(object sender, MouseEventArgs e)
        {
            Point TargetPoint = e.GetPosition(((Rectangle)sender).Parent as UIElement);//相对于grid坐标原点坐标
            double width = TargetPoint.X;
            if (TargetPoint.X < 0) return;//左侧拖动限制
            this.colLeftRegion.Width = new GridLength(e.GetPosition(this).X);
        }
    }
}

 

<Window x:Class="DragGridSizeTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="200"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="Azure"/>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" MinWidth="20" x:Name="colLeftRegion"/>
                <ColumnDefinition Width="2" />
                <ColumnDefinition Width="*" MinWidth="20" x:Name="colRightRegion"/>
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Background="Green"/>
            <Rectangle Grid.Column="1" Fill="Red" Cursor="SizeWE" x:Name="DragLine"  MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />
            <Border Grid.Column="2" Background="Purple"/>
        </Grid>
    </Grid>
</Window>

达到预期的效果！