0

我有一个六边形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>

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

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

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

开始： 开始状态 结束： 结束状态

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

4

1 回答 1

0

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

<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>
于 2020-12-17T13:07:03.217 回答