Question

I am new to WPF and I want to create a WPF application with 5buttons. On the click of each button I want a content to be displayed on another panel. Right now I just want different images to be displayed on my right side panel on the button clicks.

Here’s my XAML code:

<Window x:Class="GridButton.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MyFirstApp" Height="350" Width="525" Loaded="Window_Loaded">
<Viewbox Stretch="Fill" StretchDirection="Both">
<DockPanel>
    <StackPanel DockPanel.Dock="left" Margin="5" Width="Auto" VerticalAlignment="Center" Height="Auto">
        <Button  Content="1" Name="button2" Click="button2_Click">
       </Button>
        <Button Content="2" Name="button1" Click="button1_Click_1">
</Button>
        <Button Content="3" Name="button3"  Click="button3_Click">
          </Button>
        <Button Content="4" Name="button4" Margin="5">
          </Button>
        <Button Content="5" Name="button5" Margin="5" Click="button5_Click_1">
          </Button>
    </StackPanel>
        <StackPanel DockPanel.Dock="Right">
            <Image Name="img1" Source="Blue Hills.jpg" Stretch="Uniform" Visibility="Hidden" ImageFailed="Image_ImageFailed" Height="257" />

        </StackPanel>

</DockPanel>

And my xaml.cs file contains code to display image:

private void button2_Click(object sender, RoutedEventArgs e)
{

    img1.Visibility = Visibility.Visible;
}

I could get only this far.

Answer 1

You can set the Source property of the Image control in code:

private void buttonx_Click(object sender, RoutedEventArgs e) 
{
    string path = ... // path to image file here
    img1.Source = new BitmapImage(new Uri(path));
}

You could easily reuse the same Click handler for all Buttons and check which one was pressed:

private void Button_Click(object sender, RoutedEventArgs e) 
{
    Button button = sender as Button;
    string path = null;
    if (button == button1)
    {
        path = ... // path to image file 1 here
    }
    else if ...

    if (path != null)
    {
        img1.Source = new BitmapImage(new Uri(path));
    }
}

If you want to remove the a child Panel (or other control) from a parent Panel and add another one, you would have to modify the Panel’s Children property:

<StackPanel Name="parent">   
    <StackPanel Name="child" />   
</StackPanel>  

parent.Children.Remove(child);
parent.Children.Add(...); // some other control here

This approach would usually make sense if you wanted to create child panels dynamically. If you want to declare everything in XAML you may put all child panels in a Grid and change their visibility as you did already.

However, you might also change the ZIndex attached property.

<Grid>
    <StackPanel Name="child1">
    </StackPanel>
    <StackPanel Name="child2">
    </StackPanel>
    <StackPanel Name="child3">
    </StackPanel>
</Grid>

child3 is topmost by default, but now you can set ZIndex to some value > 0 to make another child topmost:

private void Button_Click(object sender, RoutedEventArgs e) 
{
    ...
    // reset ZIndex on previous topmost panel to 0 before
    Panel.SetZIndex(child1, 1);
}

Or completely omit the Button/Grid/Panel design and use a TabControl.