XAML：リストビューのおすすめアイテムを追加

Question

私はこのような設計上の問題を抱えています。

私はListViewを持っていて、右上に三角コーナーがあり、そこに "Featured"という文字列が含まれている "Featured"アイテムを追加したかったのです。このような何かここで

は、サンプルコードで

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行目で各セルに2列を使用しそして任意のツール 上記のような画像を作成 未満です。

これは簡単です。

Answer 3

透明な背景とテキストでfeatured.pngを作成します。次に、booleanからvisibilityに変換するコンバータも作成します。そして、あなたのお互いの上にグリッドがあるあなたの国境のテキストブロックの上にそのイメージを置くだけです。

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

window/usercontrolのようにリソースとしてコンバータを作成します。

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