WPF控件内容自动缩放及放大镜

一、内容缩放

1、布局

1、使用Grid的GridSplitter实现可拖拽分隔栏效果。当ShowsPreview设置为True时，拖拽过程中不会刷新（控件内容要等到鼠标释放时才变化）；当ShowsPreview设置为False时，控件内容实时跟随变化。

2、使用ViewBox特性实现控件内容随拖拽自动变化。

3、布局代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
        
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" MinWidth="50"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <TextBox Text="Row-0 Column-0" Grid.ColumnSpan="3" BorderBrush="Black"/>
    <Viewbox Grid.Row="1">
        <TextBox Text="Row-1 Column-1" BorderBrush="Black"/>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="2">
        <TextBox Text="Row-1 Column-2" BorderBrush="Black"/>
    </Viewbox>
        
    <GridSplitter Grid.Row="1" Grid.Column="1"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Center"
                Width="10"
                Background="Red"
                ShowsPreview="False"
                />
</Grid>

2、界面效果

1. 启动时界面：

2、拖拽后界面：

二、放大镜

1. 布局

<Grid Name="rootLayout">
        <Grid Name="contextArea" PreviewMouseMove="contextArea_PreviewMouseMove" Background="Green">
            <Image Source="Icons/mthumb1.jpg" Margin="0" Stretch="UniformToFill"/>
        </Grid>
        <Canvas>
            <Canvas Name="magnifierCanvas" IsHitTestVisible="False">
                <Ellipse Width="150" Height="150" StrokeThickness="3" Fill="LightBlue" />
                <!--为了看得清楚椭圆控件我再添加了一个一样大小的Ellipse重叠再一起,  
                    将其背景颜色设置为LightBlue  
                    当然你也可以不要这个Ellipse 可以删除-->
                <!--magnifierEllipse就是我们要填充的控件  就像上一个的Rectangle控件-->
                <Ellipse Width="150" Height="150" Name="magnifierEllipse">
                    <Ellipse.Fill>
                        <VisualBrush x:Name="vb" Visual="{Binding ElementName=contextArea}" Stretch="UniformToFill" 
                                     ViewboxUnits="Absolute" Viewbox="0, 25, 50, 50"
                                     ViewportUnits="RelativeToBoundingBox" Viewport="0, 0, 1, 1">
                        </VisualBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Canvas>
        </Canvas>
    </Grid>

2. C#代码逻辑

private void contextArea_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            Point rate = new Point(2, 2);
            Point pos = e.MouseDevice.GetPosition(rootLayout);  //相对于outsideGrid 获取鼠标的坐标  
            Rect viewBox = vb.Viewbox;    //这里的Viewbox和前台的一样   这里就是获取前台Viewbox的值
            double xoffset=0;  //因为鼠标要让它在矩形(放大镜)的中间  那么我们就要让矩形的左上角重新移动位置  
            double yoffset=0;

            xoffset = magnifierEllipse.ActualWidth / 2;
            yoffset = magnifierEllipse.ActualHeight / 2;

            viewBox.X = pos.X - xoffset + (magnifierEllipse.ActualWidth - magnifierEllipse.ActualWidth / rate.X)/2;
            viewBox.Y = pos.Y - yoffset + (magnifierEllipse.ActualHeight - magnifierEllipse.ActualHeight / rate.Y)/2;
            vb.Viewbox = viewBox;
            Canvas.SetLeft(magnifierCanvas, pos.X - xoffset);  //同理重新定位Canvas magnifierCanvas的坐标  
            Canvas.SetTop(magnifierCanvas, pos.Y - yoffset);  
        }

3. 运行效果