Question

我设计了ListView项目模板的样式，并决定创建一个类似箭头的＆＃39;它的菜单项。

所以我创建了一个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>

生成的窗口如下所示：

反转不透明蒙版

1 个答案: