XAML：在listview中添加精选项目

Question

我有这个设计问题，我无法弄清楚怎么做或者甚至不知道它叫什么，这就是为什么我很难谷歌它。

我有一个ListView，并希望在其中添加一个“精选”项目，右上角有一个三角形角，文字为“精选”。 像这样的东西

这是示例代码

XAML

<ScrollViewer HorizontalAlignment="Stretch">
    <ListView x:Name="lstproductstype" HorizontalAlignment="Stretch" VirtualizingStackPanel.VirtualizationMode="Recycling" SelectionMode="None" IsActiveView="True"  Background="Transparent">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="-1"/>
                <Setter Property="Margin" Value="-2"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border Width="590" Background="White" Height="220" BorderBrush="Gray" BorderThickness="0,0,1,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid>
                        <Grid.RowDefinitions>
                        </Grid.RowDefinitions>
                        <StackPanel HorizontalAlignment="Center" Orientation="Vertical" VerticalAlignment="Center" >
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" x:Name="txtblktype" Text="{Binding Name}" Foreground="Black" Margin="0,10,0,0" FontSize="21"/>
                        </StackPanel>
                    </Grid>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollViewer>

CS

    MyData data1 = new MyData();
    data1.id = 1;
    data1.IsFeatured = true;
    data1.Name = "Featured Item 1";
    myDatas.Add(data1);


    MyData data2 = new MyData();
    data2.id = 2;
    data2.IsFeatured = true;
    data2.Name = "Featured Item 2";
    myDatas.Add(data2);

    MyData data3 = new MyData();
    data3.id = 3;
    data3.IsFeatured = false;
    data3.Name = "Ordinary Item 3";
    myDatas.Add(data3);

    MyData data4 = new MyData();
    data4.id = 4;
    data4.IsFeatured = false;
    data4.Name = "Ordinary Item 4";
    myDatas.Add(data4);
    lstproductstype.ItemsSource = myDatas;

Answer 1

好的，我认为最简单的方法是使用多边形。 只需弄清楚如何对角写文字。

Answer 2

我的建议如下在任何工具中创建如上图像然后在每个单元格中使用2列，第二行使用图像

基于隐藏图像。

这应该更简单。

Answer 3

使用透明背景和文本制作features.png。 然后还将转换器从布尔值转换为可见性。 然后将图像放在边框中的文本块顶部，在这些文本块中，网格彼此叠加。

<Border ...>
    <Grid>
        <Grid>
            <TextBlock .../>
        </Grid>
        <Grid>
            <Image Source="featured.png" 
                   VerticalAlignment="Top" 
                   HorizontalAlignment="Right"
                   Visibility="{Binding IsFeatured, Converter={StaticResource BooleanToVisibilityConverter}"/>
        </Grid>
    </Grid>
</Border>

将转换器创建为窗口/ usercontrol中的资源。

<custom:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>