反转不透明蒙版

Question

我正在设计我的 ListView 项模板并决定从中创建一个 'arrow-like' 菜单项。

所以我创建了一个 Polygon 并把它变成了一个面具。

这是我目前拥有的：

这是我想要的（基本上是掩码反转）：

当前代码：

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid Height="50" Background="Silver">
            <!-- Content* -> Arrow ->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>

            <!-- List text -->
            <TextBlock
                Grid.Column="0"
                VerticalAlignment="Center"
                Text="{Binding Name}"
                TextTrimming="CharacterEllipsis"
                TextWrapping="WrapWithOverflow" />

            <!-- Arrow mask -->
            <Grid
                Grid.Column="1"
                HorizontalAlignment="Right"
                Background="White">

                <Polygon
                    x:Name="Mask"
                    Fill="White"
                    Points="0,0 18,5 0,10" />

                <Grid.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=Mask}" />
                </Grid.OpacityMask>
            </Grid>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

基本上我需要反转掩码，但是 - 我不确定这在 WPF 中是否可行。有什么方法可以解决这样的问题？

Answer 1

如果您只想创建一个类似箭头的项目而不坚持使用 OpacityMasks，那么您可以在文本上叠加一个半透明的箭头。这是一个例子：

<Window x:Class="WpfApplication3.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:system="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="200">
    <Grid>
        <ListView>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0"
                            VerticalAlignment="Center"
                            Text="{Binding}"
                            TextTrimming="CharacterEllipsis"
                            TextWrapping="WrapWithOverflow" />
                        <Rectangle Grid.Column="0" Fill="Black" Opacity="0.3"/>
                        <Path Grid.Column="1" Fill="Black" Opacity="0.3">
                            <Path.Data>
                                <PathGeometry>
                                    <PathGeometry.Figures>
                                        <PathFigure StartPoint="0,0" IsClosed="True">
                                            <LineSegment Point="0,0"/>
                                            <LineSegment Point="20,25"/>
                                            <LineSegment Point="0,50"/>
                                            <LineSegment Point="0,50"/>
                                        </PathFigure>
                                    </PathGeometry.Figures>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <system:String>The quick brown fox jumps over the lazy dog.</system:String>
            <system:String>Short</system:String>
            <system:String>Somewhat longer text</system:String>
        </ListView>
    </Grid>
</Window>

结果 window 如下所示：

反转不透明蒙版

Invert a opacity mask

c#

wpf

xaml

mask