Kutu öğelerini listelemek için sıralar için farklı arkaplan renkleri nasıl eklenir windows phone 8

Question

Windows telefon geliştirme konusunda yeniyim.

Liste kutusunda veri gösteriyorum. Liste kutusundaki tüm satırlar için arka zemin rengi aynıdır. Ama kutu öğelerini listelemek için sıralı satırlar için iki farklı renk eklemek istiyorum.

Liste görünümü için kod aşağıdadır.

<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> 

Bunu nasıl yapabiliriz?

Teşekkür

Answer 1

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(); 
    } 
    } 

listBox

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

Answer 2

tanımlayın ur sayfa

<UserControl 

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

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

</UserControl> 

için converter eklemek bir dönüştürücü sınıfı oluşturmak Sınıf

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

XAML Kod

<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# kodu

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

ya:

<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>