XAML: Hinzufügen von Feature-Artikel in Listenansicht

Question

Ich habe dieses Design-Problem, dass ich nicht herausfinden kann, wie zu tun oder nicht einmal wissen, wie es heißt, deshalb ist es so schwer für mich, es zu googeln.

Ich habe eine ListView und wollte dort ein "Featured" -Element hinzufügen, das eine dreieckige Ecke in der oberen rechten Ecke mit dem Text "Featured" hat. So etwas wie dieses

Hier ist der Beispielcode

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

Okay, ich denke, der einfachste Weg ist, Polygon zu verwenden. Finde einfach heraus, wie man Text diagonal schreibt.

Answer 2

Mein Vorschlag ist unter ein Bild erstellen, wie oben in jedem Werkzeug Dann 2 Spalten in jeder Zelle verwenden, um mit dem 2. Reihe

Basierend dem Bild

mit auf der Haut ist das Bild.

Dies sollte einfacher sein.

Answer 3

Machen Sie eine featured.png mit einem transparenten Hintergrund und dem Text. Machen Sie dann einen Konverter von boolesch zu einer Sichtbarkeit. Und dann einfach das Bild oben auf den Textblock in Ihrem Rahmen, wo Sie Raster übereinander haben.

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

Erstellen Sie den Konverter als Ressource wie im Fenster/usercontrol.

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