In WPF C#, How to Bind the Image Source according the selected item??

[LeLouch Fenette]

I have a image that is changing according to the selected image also.
Ex.
Code:

<Image Name="ImagesStatic" />
 
<Button Name="btn1">   <!-- When I choose this the Image -->
<Button.Header>        <!-- Source of img1 copy transfer -->
   <StackPanel>        <!-- ImagesStatic -->
     <Image name="img1">
   <StackPanel>
</Button.Header>
</Button>
 
 
<Button Name="btn1">
<Button.Header>      <!-- ViseVersa -->
   <StackPanel>
     <Image>
   <StackPanel>
</Button.Header>
</Button>

[arie]

If I understood correctly, you want to change the source of an image depending on which button was clicked. Then just use button's Click event and set new source there. You should do something like this:

First add your images to the project and set their building action to Resource.

Then in xaml:

<Window x:Class="test.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>
        <Grid.RowDefinitions>
            <RowDefinition  Height="Auto"/>
            <RowDefinition  Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image x:Name="MyImageControl" Grid.Row="1"  Grid.Column="0" Source="./Media/img.png" />
        <StackPanel Grid.Row="1"  Grid.Column="1">
            <Button x:Name="b1" Click="b1_Click">Button1</Button>
            <Button x:Name="b2" Click="b2_Click">Button2</Button>
        </StackPanel>
    </Grid>
</Window>
 

and in code behind:

        private void b1_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage img = new BitmapImage();
            img.BeginInit();
            // You set your Uri here, this example uses resources
            img.UriSource = new Uri("./Media/img.png", UriKind.Relative);
            img.EndInit();
 
            MyImageControl.Source = img;
        }
 
        private void b2_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage img = new BitmapImage();
            img.BeginInit();
            // You set your Uri here, this example uses resources
            img.UriSource = new Uri("./Media/img2.png", UriKind.Relative);
            img.EndInit();
 
            MyImageControl.Source = img;
}

[Frinavale]

You don't need to use the code behind to accomplish this.
For example, if you had a list of images you could bind the source of the image within the button to the image selected in the list using the ElementName attribute in the Binding statement.

For example:

<DockPanel Background="CornflowerBlue">
    <DockPanel.Resources>
        <x:Array x:Key="ImageLocations"  Type="sys:String">
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Desert.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Koala.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg</sys:String>
        </x:Array>
    </DockPanel.Resources>
    <ScrollViewer>
        <ListView x:Name="Images" ItemsSource="{StaticResource ImageLocations}" Background="Transparent">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding }" Height="50"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollViewer>
    <Button Margin="20" Height="100">
        <Grid>
            <Image Source="{Binding SelectedValue, ElementName=Images}" />
            <TextBlock Text="The Button" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold">
                <TextBlock.Effect>
                    <DropShadowEffect BlurRadius="18" Color="White" ShadowDepth="0" Opacity="1"/>
                </TextBlock.Effect>
            </TextBlock>
        </Grid>
    </Button>
</DockPanel>

In your case, you want your list to be 2 buttons...
Create a source that contains 2 pictures

Then, set this list to be the ItemsSource for the ListView displaying the options.

Then, set the ListView.ItemTemplate to display buttons with Images:

<StackPanel Background="Black">
    <StackPanel.Resources>
        <x:Array x:Key="ImageLocations"  Type="sys:String">
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Desert.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Koala.jpg</sys:String>
        </x:Array>
    </StackPanel.Resources>
    <Image x:Name="theImage" Height="200" Source="{Binding SelectedValue, ElementName=Images}"/>
    <ListView x:Name="Images" ItemsSource="{StaticResource ImageLocations}" 
                SelectedIndex="0" 
                Background="Transparent" 
                Margin="5,10"
                BorderThickness="0">
        <ListView.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        </ListView.Resources>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"></StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Button IsHitTestVisible="False" Height="50"  Width="50">
                    <Image Source="{Binding}" Height="20"/>
                </Button>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

-Frinny

[LeLouch Fenette]

All of these are best answer :)