Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

i have listbox, and the data template is button :

 <ListBox  x:Name="lbname" ItemsSource="{Binding myCollection}">        
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Button x:Name="btnname" Content="{Binding name}" Click="btnname_Click">
                    <Button.Background>
                        <ImageBrush ImageSource="/myApplication;component/images/buttons/normal.png"/>
                    </Button.Background>
                </Button>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
i have two image backgroud for this listBox image (normal.png for normal mode, click.png for selected item in listBox)
The listBox view items in list of buttons, the button image background is normally normal.png
my question is how to change the button image background to click.png for selected one and the old selected button retrieve to normal.png
How to change image background for selected item in listBox with buttons in each line ?
hope this clear, please i spend about one day about this issue
can any one help
Thanks 
I haven't tested it, but you need some code that looks like this:
<ListBox x:Name="lbname" ItemsSource="{Binding myCollection}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button x:Name="btnname" Click="btnname_Click">
                    <Image>
                        <Image.Style>
                            <Style>
                                <Setter Property="Image.Source" 
Value="/myApplication;component/images/buttons/normal.png" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsSelected, 
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" 
Value="True">
                                        <Setter Property="Image.Source" 
Value="/myApplication;component/images/buttons/click.png" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <TextBlock Text="{Binding name}" HorizontalAlignment="Center" 
VerticalAlignment="Center" />
                </Grid>
            </Button>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
The idea is to bind directly to the IsSelected property of the ListBoxItem object. This is done using a RelativeSource binding. However, I'm guessing that this code doesn't do what you want... I suggest that you might want to use a ToggleButton instead... something like this:
<ListBox x:Name="lbname" ItemsSource="{Binding myCollection}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <ToggleButton x:Name="btnname" Click="btnname_Click" IsChecked="{Binding 
IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type 
ListBoxItem}}}">
                    <Image>
                        <Image.Style>
                            <Style>
                                <Setter Property="Image.Source" 
Value="/myApplication;component/images/buttons/normal.png" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsSelected, 
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" 
Value="True">
                                        <Setter Property="Image.Source" 
Value="/myApplication;component/images/buttons/click.png" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <TextBlock Text="{Binding name}" HorizontalAlignment="Center" 
VerticalAlignment="Center" />
                </Grid>
            </ToggleButton>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
                Thanks Sheridan, it's work with some changes, i got the idea and with using the toggle button it's solved, Thanks so much :)
– Abdulsalam Elsharif
                Aug 14, 2013 at 10:36
if you are using MVVM then make a property in viewModel and bind this to ImageBrush as ImageSource,
when you are selecting value in ListView then get selected record and change image path of this property.
                -1 Why would you add an answer after a correct answer had been selected and just provide some small part of information from that correct answer in your answer?... utterly pointless.
– Sheridan
                Aug 14, 2013 at 11:18
                I didnot see the answer had been given.I went on to receive a call opening this tab and no answer were given then.And I posted the answer after coming back
– user1211499
                Aug 16, 2013 at 12:36
                +1 Fair enough. In future, it might be an idea to update the page just before you post an answer? Note: I had to edit your answer (I simply added a space) before I was allowed to remove the -1.
– Sheridan
                Aug 16, 2013 at 13:00
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.