[英]Invert a opacity mask
I'm styling my ListView
Item Template and decided to create an 'arrow-like' menu item from it. 我正在设计我的
ListView
项目模板的样式,并决定从中创建一个“箭头状”菜单项。
So I have created a Polygon
and made it a mask. 因此,我创建了一个
Polygon
并将其制成蒙版。
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. 基本上,我需要反转一个遮罩,但是-我不确定在WPF中这是否有可能。 What are the ways to get around problem like that?
解决这类问题的方法是什么?
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. 如果您只想创建一个类似箭头的项目,而不是坚持使用OpacityMasks,则可以在文本上覆盖一个半透明的箭头。 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: 出现的窗口如下所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.