バックグラウンドイメージをリストボックスアイテムに設定する

Question

バックグラウンドプロパティを使用してイメージをリストボックスに設定できます。 しかし、リストボックスの項目の背景として望ましい画像を設定するにはどうすればよいですか？

ありがとうございました。

Answer 1

ListBoxのItemTemplateプロパティを再定義する必要があります。 XAMLに自信がない場合は、Expression Blendを試してみてください。

ここでは、XAMLの外観の例を示します。ピボット・テンプレート・アプリケーションを使用して新しいアプリケーションを作成しました。

 <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にはコアラが表示されます。

Answer 2

境界線を使用して、リストボックスの項目をラップし、背景を設定すると、このサンプルに

<Border Width="380" Height="60" Margin="0,0,0,10" > 
     <Border.Background> 
      <ImageBrush ImageSource="Images/menu_bg.png" /> 
     </Border.Background> 
     <TextBlock Foreground="Black" FontSize="22" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
    </Border>