创建空心边框/正方形 wpf答案

【问题标题】：Create hollow border/square wpf创建空心边框/正方形 wpf
【发布时间】：2013-04-07 09:37:46
【问题描述】：

我想在 WPF/Silverlight 中创建一个控件。这个控件是矩形/边框，从中心是空心的。我的意图是将除矩形/边框容器内的正方形区域之外的所有其他内容变灰。有可能这样做吗？

此外，它应该能够在鼠标移动时移动这个空心区域。

提前感谢大家的帮助。

【问题讨论】：

这里的hollow是指什么？
嗨，大卫，我添加了一个示例图片以供参考。

标签： wpf silverlight wpf-controls

【解决方案1】：

嗯，最简单的解决方案是这样的：

<Grid Width="256" Height="256" MouseMove="UIElement_OnMouseMove">
    <Image Source="test1.jpg" Stretch="UniformToFill" />
    <Path Fill="#81808080" Stretch="Fill">
        <Path.Data>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="0,0,100,100" />
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <RectangleGeometry
                        x:Name="Hole"
                        RadiusX="7"
                        RadiusY="7"
                        Rect="20,20,60,60" /> <!-- this is the hole -->
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Path.Data>
    </Path> 
</Grid>

事件处理程序：

private void UIElement_OnMouseMove(object sender, MouseEventArgs e) {
    var element = (FrameworkElement) sender;
    var position = e.GetPosition(element);

    var relativeX = position.X/element.ActualWidth*100.0;
    var relativeY = position.Y/element.ActualHeight*100.0;

    Hole.Rect = new Rect(relativeX - 20, relativeY - 20, 40, 40);    
}

【讨论】：

是的，这似乎与我尝试实现的相同，但问题是当我想将 Gemotery2 的 DataBind "Rect" 属性绑定到鼠标移动时，似乎存在性能滞后。我的意思是运动不顺畅。我创建了一个示例项目，链接如下。我的意图是顺利移动memnt：sdrv.ms/11Ih7HE
谢谢！您的代码移动非常流畅。我仍然想知道为什么我的速度很慢（如果我们移动得更快）。