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

来源：互联网发布：淘宝天下怎么样编辑：程序博客网时间：2024/06/14 17:29

一、内容缩放

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. 运行效果

1 0