XAML：在列表视图中添加特色项目答案

【问题标题】：XAML: Adding Featured item in listviewXAML：在列表视图中添加特色项目
【发布时间】：2016-10-26 22:55:42
【问题描述】：

我有这个设计问题，我不知道该怎么做，甚至不知道它叫什么，这就是为什么我很难用谷歌搜索它。

我有一个 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>

    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;

【问题讨论】：

标签： c# wpf xaml win-universal-app

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

基于隐藏图像。

这应该更简单。

【讨论】：

【解决方案3】：

制作一个带有透明背景和文字的特色.png。然后还制作一个从布尔值到可见性的转换器。然后只需将该图像放在边框中的文本块顶部，其中网格彼此重叠。

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

像在窗口/用户控件中一样将转换器创建为资源。

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

【讨论】：