创建多个面板并在wpf中单击按钮时显示一个面板

Question

我是 WPF 新手，我想创建一个带有 5 个按钮的 WPF 应用程序。单击每个按钮时，我希望将内容显示在另一个面板上。现在，我只想在单击按钮时在右侧面板上显示不同的图像。

这是我的 XAML 代码：

<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>

我的 xaml.cs 文件包含显示图像的代码：

private void button2_Click(object sender, RoutedEventArgs e)
{

    img1.Visibility = Visibility.Visible;
}

我只能走到这一步。

Answer 1

您可以在代码中设置Image控件的Source属性：

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

您可以轻松地为所有按钮重用相同的 Click 处理程序并检查按下了哪个按钮：

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));
    }
}

如果您想从父面板中删除子面板（或其他控件）并添加另一个面板，则必须修改面板的 Children 属性：

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

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

如果您想动态创建子面板，这种方法通常是有意义的。如果您想在 XAML 中声明所有内容，您可以将所有子面板放在一个 Grid 中，并像以前一样更改它们的可见性。

但是，您也可以更改 ZIndex 附加属性。

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

child3 默认位于最顶层，但现在您可以将ZIndex 设置为某个值 > 0 以使另一个孩子位于最顶层：

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

或者完全省略按钮/网格/面板设计并使用TabControl。