当 XAML 中的一个元素获得/失去焦点时，将一个元素重叠在另一个元素之上的方法是什么?

Question

我有两个DockPanel元素：

<DockPanel Margin="10">
<TextBlock Text="+ Add new note" />
</DockPanel>

<DockPanel Margin="10">
<ComboBox>
<ComboBoxItem>One</ComboBoxItem>
<ComboBoxItem>Two</ComboBoxItem>
</ComboBox>
<Button Content="Add Note" DockPanel.Dock="Right" Margin="0" Padding="10,0" />
<TextBox Margin="10,0"  />
</DockPanel>

我想得到以下结果：一旦我单击第一个DockPanel，它必须被隐藏并显示第二个。单击按钮Add Note后，必须隐藏第二个DockPanel，并且必须再次出现第一个。

我想知道如何做到这一点，但不知道从哪里开始。

我非常感谢任何建议。

Answer 1

粗略的解决方案(没有 MVVM 基础(可能如下：

MainWindow.xaml

<Grid>
<DockPanel Margin="10" x:Name="EditDP" Visibility="Collapsed">
<ComboBox>
<ComboBoxItem>One</ComboBoxItem>
<ComboBoxItem>Two</ComboBoxItem>
</ComboBox>
<Button Content="Add Note" DockPanel.Dock="Right" Margin="0" Padding="10,0" Click="ButtonBase_OnClick"/>
<TextBox Margin="10,0"  />
</DockPanel>
<DockPanel x:Name="MainDP" Margin="10" MouseLeftButtonDown="UIElement_OnMouseLeftButtonDown">
<TextBlock Text="+ Add new note" />
</DockPanel>
</Grid>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void UIElement_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.MainDP.Visibility = Visibility.Collapsed;
this.EditDP.Visibility = Visibility.Visible;
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
this.MainDP.Visibility = Visibility.Visible;
this.EditDP.Visibility = Visibility.Collapsed;
}
}

Answer 2

将两个停靠面板的Visibility属性绑定到同一个布尔值，并在每个停靠面板上使用InverseBooleanToVisibilityConverter/BooleanToVisibilityConverter。

这样，当您使用第一个 Dock 面板上的单击事件或第二个面板上的按钮单击翻转布尔值时，两个面板将交替显示