CODEWITHSUNDEEP
c#wpflistboxdatatemplate
Abdulsalam Elsharif
Abdulsalam Elsharif

Reputation: 5101

(WPF) How to change button image background in listBox with buttons in each line ?

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

Upvotes: 2

Views: 1774

Answers (3)

user1211499
user1211499

Reputation: 165

Try using Togglebutton instead of button.Use a trigger to check when the IsChecked property of the toggleButton changes. And based on that change your image.

Upvotes: 0

J R B
J R B

Reputation: 2136

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.

Upvotes: 0

Sheridan
Sheridan

Reputation: 69959

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">
                <Grid>
                    <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}}}">
                <Grid>
                    <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>

Upvotes: 1

Related Questions