Question

我需要在ListBox中以不同的背景显示替代行。我的ListBox看起来像这样：

<ListBox Height="547" HorizontalAlignment="Left" Margin="7,203,0,0" Name="lstboxProducts" VerticalAlignment="Top" Width="424" >
    <ListBoxItem>
        <Grid Height="100" Width="420">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>

            <Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
            <StackPanel Grid.Column="1">
                <TextBlock Text="Item heading" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="56" />
                <TextBlock Text="item description" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Height="46" Width="276" />
            </StackPanel>
            <Image Grid.Column="2" Source="/Images/dark/appbar.magnify.png"/>
        </Grid>
    </ListBoxItem>
</ListBox>

Answer 1

public class AlternatingRowsConverter : IValueConverter
{
private bool _alternate;

public object Convert(object value, Type targetType, object parameter,
           System.Globalization.CultureInfo culture)
{
  _alternate = !_alternate;
  return _alternate
        ? new SolidColorBrush(Color.FromArgb(255, 255, 0, 0))
        : new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));
}

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

然后，列表框模板：

  <ListBox ItemsSource="{Binding}"
       x:Name="Mylistbox"
       SelectionChanged="Mylistbox_SelectionChanged">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <StackPanel>
          <Grid Background="{Binding Converter={StaticResource alternateConvertor}}">
            <TextBlock Grid.Column="0"
                  Text="{Binding Name, Mode=TwoWay}"
                  VerticalAlignment="Center"
                  HorizontalAlignment="Left" />
          </Grid>
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>

最后在资源字典中定义convertor对象

   <phone:PhoneApplicationPage.Resources>
    <WindowsPhoneApplication5:AlternatingRowsConverter x:Key="alternateConvertor" />
   </phone:PhoneApplicationPage.Resources>

More info here

Answer 2

以下是您如何看待XAML的示例。我使用Pivot Template应用程序创建了一个新的应用程序。

   <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
        <ListBox.ItemTemplate>
            <DataTemplate>
              <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                <StackPanel.Background>
                    <ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
                </StackPanel.Background>
                  <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                  <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
              </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

因此默认的ItemTemplate使用StackPanel作为主容器。你想在这里做的是将图像设置为StackPanel的背景。这就是以下几行代表的内容：

<StackPanel.Background>
    <ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
</StackPanel.Background>

使用上面的代码，您将ImageBrush设置为StackPanel的Background属性。

使用该代码，每个ListBoxItem将显示一个考拉。

如何在Windows Phone 7中的列表框项目中应用替代行背景？

2 个答案: