Ajouter un rectangle à WPF Listbox et faire alterner la couleur de remplissage de ce rectangle

Question

J'ai une listbox avec un TextBlock lié à un champ, et j'ai mis le AlternationCount = "2" cela fonctionne très bien pour changer la couleur d'arrière-plan des éléments contrôle; cependant, je ne peux pas obtenir l'effet que je veux avec mon rectangle ... J'essaye d'avoir un effet de coins arrondis sur chaque élément de liste.

modifier: le XAML

<DataTemplate x:Key="TaskListTemplate"> 
    <Grid Height="276" Width="Auto"> 
     <Rectangle Fill="Gray" Stroke="Black" RadiusX="8" RadiusY="8" Margin="0"/> 
     <TextBox x:Name="txtDescription" Text="{Binding Path=Des}" /> 
     <TextBox x:Name="txtComments" Text="{Binding Path=Com}"/> 
     <Label Content="{Binding Path=Title}"> 
    </Grid> 
</DataTemplate> 

<ListBox Margin="8,37,0,6" 
    ItemContainerStyle="{DynamicResource ListBoxItemStyle}" 
    AlternationCount="2" 
    ItemTemplate="{DynamicResource TaskListTemplate}"/> 

<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="FontSize" Value="12" /> 
     <Setter Property="FontFamily" Value="Tahoma" /> 
     <Setter Property="Background" Value="#006C3B3B"/> 
     <Style.Resources> 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF533F70"/> 
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF533F70"/> 
      <Storyboard x:Key="MouseOverStoryBoard"> 
      <ColorAnimationUsingKeyFrames AutoReverse="True" BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF48F21"/> 
       <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF4A475C"/> 
      </ColorAnimationUsingKeyFrames> 
      </Storyboard> 
     </Style.Resources> 
     <Style.Triggers> 
      <Trigger Property="ItemsControl.AlternationIndex" Value="0"> 
       <Setter Property="Background"> 
        <Setter.Value> 
         <SolidColorBrush Color="#FFA2BAD4"/> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="Foreground" Value="White"/> 
      </Trigger> 
      <Trigger Property="ItemsControl.AlternationIndex" Value="1"> 
       <Setter Property="Background" Value="#FF7395B9"/> 
       <Setter Property="Foreground" Value="White"/> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource MouseOverStoryBoard}"/> 
       </Trigger.EnterActions> 
       <Setter Property="Foreground" Value="White" /> 
       <Setter Property="Background" Value="#FFF48F21"/> 
       <Setter Property="FontStyle" Value="Normal"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

Answer 1

Dans mes tests, changer le ItemTemplate (TaskListTemplate) n'a pas eu d'effet. Donc la première étape serait de le faire d'une autre manière, j'ai choisi de définir le ContentTemplate dans le ListBoxItemStyle, qui a fonctionné. En outre, vous voulez un rectangle arrondi avec un fond alternatif: J'ai utilisé une bordure pour cela dans ma modification de votre code, mais un rectangle fonctionnerait également de manière similaire. Ici, je pense, la clé est de définir l'arrière-plan des autres éléments transparents, sinon ils vont cacher votre rectangle. Il suffit de copier le code suivant dans Kaxaml pour voir à quoi il ressemble.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Page.Resources> 
     <DataTemplate x:Key="TaskListTemplate"> 
      <Border MinWidth="50" Height="70" Background="{TemplateBinding ListBoxItem.Background}" BorderBrush="Black" CornerRadius="8" Margin="0"> 
       <Grid Background="Transparent"> 
        <TextBox x:Name="txtDescription" Text="{Binding Path=Des}" Background="Transparent"/> 
        <TextBox x:Name="txtComments" Text="{Binding Path=Com}" Background="Transparent"/> 
        <Label Content="{Binding Path=Title}" Background="Transparent"/> 
       </Grid> 
      </Border> 
     </DataTemplate> 
     <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}"> 
      <Setter Property="FontSize" Value="12"/> 
      <Setter Property="FontFamily" Value="Tahoma"/> 
      <Setter Property="Background" Value="#006C3B3B"/> 
      <Setter Property="ContentTemplate" Value="{DynamicResource TaskListTemplate}"/> 
      <Style.Resources> 
       <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF533F70"/> 
       <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF533F70"/> 
       <Storyboard x:Key="MouseOverStoryBoard"> 
        <ColorAnimationUsingKeyFrames AutoReverse="True" BeginTime="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
         <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF48F21"/> 
         <SplineColorKeyFrame KeyTime="00:00:00.500" Value="#FF4A475C"/> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </Style.Resources> 
      <Style.Triggers> 
       <Trigger Property="ItemsControl.AlternationIndex" Value="0"> 
        <Setter Property="Background"> 
         <Setter.Value> 
          <SolidColorBrush Color="#FFA2BAD4"/> 
         </Setter.Value> 
        </Setter> 
        <Setter Property="Foreground" Value="White"/> 
       </Trigger> 
       <Trigger Property="ItemsControl.AlternationIndex" Value="1"> 
        <Setter Property="Background" Value="#FF7395B9"/> 
        <Setter Property="Foreground" Value="White"/> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Trigger.EnterActions> 
         <BeginStoryboard Storyboard="{StaticResource MouseOverStoryBoard}"/> 
        </Trigger.EnterActions> 
        <Setter Property="Foreground" Value="White"/> 
        <Setter Property="Background" Value="#FFF48F21"/> 
        <Setter Property="FontStyle" Value="Normal"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Page.Resources> 
    <Grid> 
     <ListBox Margin="8,37,0,6" 
       ItemContainerStyle="{DynamicResource ListBoxItemStyle}" 
       AlternationCount="2"> 
      <ListBoxItem>Test1</ListBoxItem> 
      <ListBoxItem>Test2</ListBoxItem> 
      <ListBoxItem>Test3</ListBoxItem> 
     </ListBox> 
    </Grid> 
</Page>