用于移动网格内容的 WPF 锚点网格 OpacityMask

Question

我有一个六边形的Polygon，我试图将它用作OpacityMask，然后在多边形内有可以滚动和在边缘被剪裁的内容。我遇到的问题是，随着内容的移动，OpacityMask 也随之移动（尽管数量不同）。以下是我的代码：

<Window Title="MainWindow" Height="450" Width="800">
    <Grid Height="450" Width="800">
        <StackPanel>
        <Grid ClipToBounds="True">
        <Grid.OpacityMask >
            <VisualBrush Stretch="None" >
                <VisualBrush.Visual>
                    <Polygon Points="220,225 310,69 490,69 580,225 490, 381 310, 381" Fill="Black" />
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.OpacityMask>
        <Polygon Points="220,225 310,69 490,69 580,225 490, 381 310, 381" Stroke="Black" StrokeThickness="5"/>
        <Rectangle x:Name="TestRectangle" Height="400" Width="400" Fill="Red" />
        </Grid>
            <Button Content="Testing" >
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="Margin"
                                                    BeginTime="0:0:0" Duration="0:0:0.5" To="-400,0,0,0"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>
    </Grid>
</Window>

如何锚定不透明蒙版，以便网格内容可以在蒙版保持静止的情况下移动？

编辑：回答结果和附加测试

使用提供的答案中的代码，我仍然可以移动六边形：

开始： Begin State 结尾： End State

但是，我发现通过添加第二个透明矩形并沿红色矩形的相反方向移动，我可以达到预期的效果。虽然这确实有效，但似乎应该有更好的方法来做到这一点。

Answer 1

如果您尝试直接设置矩形的边距，您会注意到它在网格内被忽略。所以解决这个问题的一种方法是将矩形放在边框内并为该边框的边距设置动画

<Window x:Class="StackverflowTests.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:StackverflowTests"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid Height="450" Width="810">
    <StackPanel>
        <Grid ClipToBounds="True">
            <Grid.OpacityMask >
                <VisualBrush Stretch="None" >
                    <VisualBrush.Visual>
                        <Polygon Points="220,225 310,69 490,69 580,225 490, 381 310, 381" Fill="Black" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.OpacityMask>
            <Polygon Points="220,225 310,69 490,69 580,225 490, 381 310, 381" Stroke="Black" StrokeThickness="5"/>
            <Border x:Name="TestRectangle">
                <Rectangle Height="400" Width="400" Fill="#ff0000"/>
            </Border>
        </Grid>
        <Button Content="Testing" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="Margin"
                                        BeginTime="0:0:0" Duration="0:0:0.5" To="-400,0,0,0" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>
</Grid>