Come aggiungere colori di sfondo diversi alle righe alternate per elencare gli elementi della casella Windows Phone 8

Question

Sono nuovo nello sviluppo del telefono Windows.

Sto visualizzando i dati nella casella di riepilogo. Per tutte le righe nella casella di riepilogo, il colore di sfondo posteriore è lo stesso. Ma voglio aggiungere due colori diversi per le righe alternate agli elementi della casella di riepilogo.

Di seguito è riportato il codice per la visualizzazione elenco.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,10,0,0" Background="White"> 
     <ListBox Margin="6,6,-6,6" Name="itemslb" SelectionChanged="itemList_SelectionChanged"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid x:Name="listItem"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="100"/> 
          <RowDefinition Height="10"/> 
         </Grid.RowDefinitions> 

         <StackPanel Grid.Row="0" Orientation="Horizontal" Height="100" Margin="0,10,0,0"> 
           <StackPanel Width="85" Height="100" > 
            <StackPanel.Background> 
             <ImageBrush x:Name="defImage" ImageSource="/DailyFeeds;component/Images/default.png" Stretch="None"></ImageBrush> 
            </StackPanel.Background> 
             <Image Source="{Binding ImageUrl}" VerticalAlignment="Top" Height="90" Width="85" Margin="0,0,10,0" Stretch="Fill" /> 
           </StackPanel> 
           <StackPanel Width="370"> 
            <TextBlock Text="{Binding Title}" Foreground="SlateBlue" FontSize="25" TextWrapping="Wrap" /> 
            <TextBlock Text="{Binding Date}" Foreground="#FFC8AB14" FontSize="20"/>        
           </StackPanel>         
         </StackPanel> 

          <Image x:Name="line" Grid.Row="1" Width="460" HorizontalAlignment="Center" Margin="0,5,0,0" Source="/DailyFeeds;component/Images/separator.png" /> 
        </Grid> 

       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 

Come possiamo farlo.

Grazie

Answer 1

creare una classe convertitore

public class AlternateRowColour : IValueConverter 
    { 
    bool isAlternate; 
    SolidColorBrush even = new SolidColorBrush(Colors.Transparent); // Set these two brushes to your alternating background colours. 
    SolidColorBrush odd = new SolidColorBrush(Color.FromArgb(255, 241, 241, 241)); 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
    isAlternate = !isAlternate; 
    return isAlternate ? even : odd ; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
    throw new NotImplementedException(); 
    } 
    } 

aggiungere converter alla pagina

<UserControl 

    xmlns:conv="clr-namespace:MyApplication.Converters" 

    <UserControl.Resources> 
     <conv:AlternateRowColour x:Key="RowColour" /> 
    </UserControl.Resources> 

</UserControl> 

ur listBox

<ListBox.ItemTemplate> 
    <DataTemplate> 
     <StackPanel Background="{Binding Converter={StaticResource RowColour}}"> // your stackPanel 
     <!-- layout XAML --> 
     </StackPanel> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

Answer 2

Definire Classe

public class RowData 
    { 
     public string text { get; set; } 
     public Brush brush { get; set; } 
    } 

codice XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
     <ListBox Name="listBox"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid Height="60" Width="480" Background="{Binding brush}"> 
         <TextBlock VerticalAlignment="Center" Margin="12,0" Text="{Binding text}"/> 
        </Grid> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 

C# codice

ObservableCollection<RowData> items = new ObservableCollection<RowData>(); 

    items.Add(new RowData() { text = "Text 1", brush = new SolidColorBrush(Colors.Red) }); 
    items.Add(new RowData() { text = "Text 2", brush = new SolidColorBrush(Colors.Green) }); 
    items.Add(new RowData() { text = "Text 3", brush = new SolidColorBrush(Colors.Red) }); 
    items.Add(new RowData() { text = "Text 4", brush = new SolidColorBrush(Colors.Green) }); 
    items.Add(new RowData() { text = "Text 5", brush = new SolidColorBrush(Colors.Red) }); 
     listBox.ItemsSource = items; 

Answer 3

o:

<Grid> 
    <Grid.Resources> 
    <AlternationConverter x:Key="BackgroundConverter"> 
     <SolidColorBrush>Blue</SolidColorBrush> 
     <SolidColorBrush>CornflowerBlue</SolidColorBrush> 
     <SolidColorBrush>LightBlue</SolidColorBrush> 
    </AlternationConverter> 

    <AlternationConverter x:Key="AlternateForegroundConverter"> 
     <SolidColorBrush>White</SolidColorBrush> 
     <SolidColorBrush>Black</SolidColorBrush> 
     <SolidColorBrush>Navy</SolidColorBrush> 
    </AlternationConverter> 

    <Style x:Key="alternatingWithBinding" TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="Background" 
       Value="{Binding RelativeSource={RelativeSource Self}, 
        Path=(ItemsControl.AlternationIndex), 
        Converter={StaticResource BackgroundConverter}}"/> 

     <Setter Property="Foreground" 
       Value="{Binding RelativeSource={RelativeSource Self}, 
        Path=(ItemsControl.AlternationIndex), 
        Converter={StaticResource AlternateForegroundConverter}}"/> 
    </Style> 

    </Grid.Resources> 

    <ListBox AlternationCount="3" ItemsSource="{StaticResource data}" 
      ItemContainerStyle="{StaticResource alternatingWithBinding}"/> 
</Grid>