Invert a opacity mask

Question

I'm styling my ListView Item Template and decided to create an 'arrow-like' menu item from it.

So I have created a Polygon and made it a mask.

Here is what I currently have:

Here is what I want (basically a mask invertion):

Current code:

<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>

Basically I would need to invert a mask, however - I'm not sure if this is even possible in WPF. What are the ways to get around problem like that?

Answer 1

If you just want to create an arrow-like item and do not insist on using OpacityMasks, then you might overlay a semi-transparent arrow over your text. Here is an example:

<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>

The resulting window looks like this: