开发者

How to assign the source of an image in a style wrapping ListBoxItem

In the following code, there is a style for ListBoxItem, with a textblock and an Image. The textblock has a binding to the ListBoxItem content, and the Image is set in the style. I want to be able to set this image for each listboxitem and in code, I'm wondering if someone can get me on the right track.

Thanks for any help.

code snippet of the style and using it:

<Style x:Key="ExpanderListitemStyle" TargetType="{x:Type ListBoxItem}">
<StackPanel Orientation="Horizontal">
    <Image x:Name="iGalleryPreview" Source="images/someImage.png" Width="18" Height="18"/>
    <TextBlock x:Name="con" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Content}" 
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="5,0,0,0">
    <TextBlock.Foreground&g开发者_StackOverflow中文版t;
        <SolidColorBrush Color="#FF2A485C" x:Name="contentColor" />
        </TextBlock.Foreground>
    </TextBlock>
</StackPanel>

<ListBox BorderThickness="0" ItemContainerStyle="{DynamicResource ExpanderListitemStyle}" VerticalAlignment="Stretch" Height="Auto">
    <ListBoxItem Content="Some Label"  />
    <ListBoxItem Content="Another Label"/>
</ListBox>


Let's assume we have an Employee class, we store for each employee her name and image as follows:

public class Employee
{
    public string Image { get; set; }
    public string Name { get; set; }
}

Instead of a Style you need to use an ItemTemplate as follows:

<Window x:Class="ProofOfConcept.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                     <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="TextBlock.Foreground"
                                    Value="Green"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="TextBlock.Foreground"
                                    Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" >
                        <Image Stretch="UniformToFill" Height="24"
                                   Width="24" Margin="2,1"
                                   Source="{Binding Image}"/>
                        <TextBlock Text="{Binding Name}"
                                       VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

your code behind will be something like this:

using System.Windows;

namespace ProofOfConcept
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var emps =
                new Employee[]
                    {
                        new Employee {Image = "/Images/1.png", Name = "Mohamed A. Fadil"},
                        new Employee {Image = "/Images/6.png", Name = "Sara Konor :)"},
                        new Employee {Image = "/Images/2.png", Name = "John M. Arther"},
                        new Employee {Image = "/Images/3.png", Name = "Khalid El-Sheikh"},
                        new Employee {Image = "/Images/4.png", Name = "Hassan A. Fadil"},
                        new Employee {Image = "/Images/5.png", Name = "Criss Redfield"}
                    };
            DataContext = emps;
        }
    }
}

And finally the result :D

How to assign the source of an image in a style wrapping ListBoxItem

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜