基於WPF實現簡單放大鏡效果

2022-12-27 14:00:44

WPF 如何實現簡單放大鏡

框架使用.NET40；

Visual Studio 2019;

實現此功能需要用到 VisualBrush ，放大鏡展現使用 Canvas -> Ellipse .

可以使用 VisualBrush 建立放大效果。
設定 Visual 獲取或設定畫筆的內容。
設定 ViewboxUnits Absolute 座標系與邊界框無關。
設定 Viewbox 獲取或設定 TileBrush 圖塊中內容的位置和尺寸。
當滑鼠移動獲取當前座標點修改 VisualBrush 的 Viewbox。
滑鼠移動修改 Ellipse 的 Canvas.Left 與 Canvas.Top 跟隨滑鼠。

實現程式碼

1） xaml 程式碼如下：

<Grid>
        <Image Source="0.png" Stretch="Fill"
               Name="image" MouseMove="image_MouseMove"
               MouseEnter="image_MouseEnter" MouseLeave="image_MouseLeave"/>

        <Canvas IsHitTestVisible="False" Name="MagnifierPanel">
            <Ellipse Stroke="LightBlue" Name="MagnifierCircle" 
                     Height="200" Width="200">
                <Ellipse.Fill>
                    <VisualBrush x:Name="MagnifierBrush"  
                                 Visual="{Binding ElementName=image}" 
                                 ViewboxUnits="Absolute"/>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </Grid>

2） xaml.cs 程式碼如下：

private void image_MouseMove(object sender, MouseEventArgs e)
        {
            var center = e.GetPosition(image);
            var length = MagnifierCircle.ActualWidth * _factor;
            var radius = length / 2;
            var viewboxRect = = new Rect(center.X - radius, center.Y - radius, length, length);
            MagnifierBrush.Viewbox = viewboxRect;
            MagnifierCircle.SetValue(Canvas.LeftProperty, center.X - MagnifierCircle.ActualWidth / 2);
            MagnifierCircle.SetValue(Canvas.TopProperty, center.Y - MagnifierCircle.ActualHeight / 2);

        }

        private void image_MouseEnter(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Visible;
        }

        private void image_MouseLeave(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Hidden;
        }

效果圖

到此這篇關於基於WPF實現簡單放大鏡效果的文章就介紹到這了,更多相關WPF放大鏡內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

基於WPF實現簡單放大鏡效果

熱門文章