Question

我有一个重叠椭圆的矩形。我希望椭圆有一个边框，它基本上“切出”矩形并显示两个对象下面的背景。有没有办法做到这一点？我不知道如何做到这一点。

以下是我的目标：

<Canvas Background="LightGray"/> <!-- this Canvas will show an image -->
<Rectangle Fill="#590ABAB5" VerticalAlignment="Bottom" Height="70"/>
<Ellipse Width="120" Height="120" Fill="Red" VerticalAlignment="Bottom" Margin="0,0,0,10"/>

这就是它目前的样子： enter image description here

Answer 1

正如@Chris在评论中所述，您可以使用OpacityMask和GeometryDrawing：

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="https://c.s-microsoft.com/fr-fr/CMSImages/ltr_mobile_still.png?version=4863852c-ce59-fe13-2d00-11a37dfdc665" />
    </Grid.Background>

    <local:GeometryBorder CircleSize="140"
                          Background="#590ABAB5"
                          VerticalAlignment="Bottom"
                          Height="70"/>

    <Ellipse Width="120"
             Height="120"
             Fill="Red"
             VerticalAlignment="Bottom"
             Margin="0,0,0,10"/>
</Grid>

使用自定义边框控件：

public class GeometryBorder : Border
{
    #region CircleSize

    public double CircleSize
    {
        get { return (double)GetValue(CircleSizeProperty); }
        set { SetValue(CircleSizeProperty, value); }
    }

    public static readonly DependencyProperty CircleSizeProperty =
        DependencyProperty.Register("CircleSize", typeof(double), typeof(GeometryBorder), new PropertyMetadata(1.0, OnCircleSizeChanged));

    private static void OnCircleSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var border = d as GeometryBorder;
        border.ApplyOpacityMask();
    }

    #endregion

    public GeometryBorder()
    {
        SizeChanged += OnSizeChanged;
    }

    protected void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        ApplyOpacityMask();
    }

    protected void ApplyOpacityMask()
    {
        if (ActualWidth > 0 && ActualHeight > 0)
        {
            var rectangle = new RectangleGeometry(new Rect(0, 0, ActualWidth, ActualHeight));
            var ellipse = new EllipseGeometry(new Point(ActualWidth / 2.0, 0), CircleSize / 2.0, CircleSize / 2.0);
            var geometry = new CombinedGeometry(GeometryCombineMode.Exclude, rectangle, ellipse);
            var drawing = new GeometryDrawing(Brushes.Black, new Pen(), geometry);
            var brush = new DrawingBrush(drawing);
            OpacityMask = brush;
        }
    }
}

Answer 2

这是基于visualbrush和模糊效果的WPF中的空气效果，透明项（在本例中为Rectangle）以这种方式定义：

<Rectangle>  
    <Rectangle.Effect>  
        <BlurEffect Radius="{DynamicResource BlurRadius}"/>  
    </Rectangle.Effect>  
    <Rectangle.Fill>  
        <VisualBrush  ViewboxUnits="Absolute"  Viewbox="{Binding RenderTransform.Children[3],  Converter={StaticResource TranslateTransformToRectViewboxVisualBrushConverter},  
        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}},  
        UpdateSourceTrigger=PropertyChanged}"  
        AlignmentX="Left" AlignmentY="Top"  
    Visual="{Binding ElementName=BackgroundContainer}" Stretch="None">  
            <VisualBrush.Transform>  
                <TranslateTransform X="0" />  
            </VisualBrush.Transform>  
        </VisualBrush>  
    </Rectangle.Fill>  
</Rectangle>

这是一个屏幕

enter image description here

XAML透明度通过多个层次

2 个答案: