c# - 如何仅在 XAML 中将 SelectionChanged 事件绑定(bind)到其他元素的可见性属性

Question

在 SelectionChanged 应该变为可见的 TextBlock 之后，给出的是一个 ComboBox。我使用 ViemModel 构建此功能。

查看:

<ComboBox SelectionChanged="{mvvmHelper:EventBinding OnSelectionChanged}" />
<TextBlock Visibility="{Binding LanguageChanged, Converter={StaticResource BooleanVisibilityConverter}}"/>

View 模型:

bool LanguageChanged = false;

void OnSelectionChanged() => LanguageChanged = true;

我正在寻找仅在 XAML 中完成的优雅解决方案

到目前为止我尝试了什么:

<Style TargetType="{x:Type TextBlock}">
    <Setter Property="Visibility" Value="Collapsed" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsDropDownOpen, ElementName=Box, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
            <Setter Property="Visibility" Value="Visible" />
        </DataTrigger>
    </Style.Triggers>
</Style>

我想我必须使用 Storyboard

<ComboBox.Style>
    <Style TargetType="{x:Type ComboBox}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="SelectionChanged">
                <BeginStoryboard>
                    <Storyboard>
                        ???
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</ComboBox.Style>

另一个选项是 System.Windows.Interactivity 但这在 WpfCore 3.1 中不可用

Answer 1

这里有几个不错的选择。
由于使用 DataTrigger 的最后一个解决方案是最灵活的，因为它允许触发 ComboBox.SelectedItem 的某些状态，我建议实现它来解决你的问题。它也是一个仅限 XAML 的解决方案，不需要像 LanguageChanged 这样的额外属性。

动画触发属性

为了使 LanguageChanged 等属性具有动画效果，该属性必须是 DependencyProperty。因此，第一个示例将 LanguageChanged 实现为 MainWindow 的 DependencyProperty:

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public static readonly DependencyProperty LanguageChangedProperty = DependencyProperty.Register(
    "LanguageChanged",
    typeof(bool),
    typeof(MainWindow),
    new PropertyMetadata(default(bool)));

  public bool LanguageChanged
  {
    get => (bool) GetValue(MainWindow.LanguageChangedProperty);
    set => SetValue(MainWindow.LanguageChangedProperty, value);
  }
}

MainWindow.xaml

<Window x:Name="Window">
  <StackPanel>

    <TextBlock Text="Invisible"
               Visibility="{Binding RelativeSource={RelativeSource AncestorType=MainWindow}, Path=LanguageChanged, Converter={StaticResource BooleanToVisibilityConverter}}" />

    <ComboBox>
      <ComboBox.Triggers>
        <EventTrigger RoutedEvent="ComboBox.SelectionChanged">
          <BeginStoryboard>
            <Storyboard>
              <BooleanAnimationUsingKeyFrames Storyboard.TargetName="Window"
                                              Storyboard.TargetProperty="LanguageChanged">
                <DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
              </BooleanAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </ComboBox.Triggers>
    </ComboBox>
  </StackPanel>
</Window>

---

直接对目标控件进行动画处理

如果您希望切换可见性的控件与触发控件在同一范围内，您可以直接为 Visibility 设置动画:

MainWindow.xaml

<Window x:Name="Window">
  <StackPanel>

    <TextBlock x:Name="InvisibleTextBlock"
               Text="Invisible"
               Visibility="Hidden" />

    <ComboBox>
      <ComboBox.Triggers>
        <EventTrigger RoutedEvent="ComboBox.SelectionChanged">
          <BeginStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvisibleTextBlock"
                                             Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
              </BooleanAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </ComboBox.Triggers>
    </ComboBox>
  </StackPanel>
</Window>

---

实现 IValueConverter

如果您希望向触发器添加更多条件，例如选择了哪个值，您应该将 TextBlock.Visibility 绑定(bind)到 ComboBox.SelectedItem 并使用 IValueConverter 根据当前选中的item决定是返回Visibility.Visible还是返回Visibilty.Hidden:

MainWindow.xaml

<Window x:Name="Window">
  <Window.Resources>

    <!-- TODO::Implement IValueConverter -->
    <SelectedItemToVisibilityConverter x:Key="SelectedItemToVisibilityConverter" />
  </Window.Resources>

  <StackPanel>

    <TextBlock Text="Invisible"
               Visibility="{Binding ElementName=LanguageSelector, Path=SelectedItem, Converter={StaticResource SelectedItemToVisibilityConverter}}" />

    <ComboBox x:Name="LanguageSelector" />
  </StackPanel>
</Window>

在 TextBlock 上实现 DataTrigger

如果您希望向触发器添加更多条件，例如选择了哪个值，您还可以向 TetxtBlock 添加一个 DataTrigger，它会在一个或多个属性上触发ComboBox.SelectedItem 的。然后，您必须将 SelectedItem 转换为底层 ComboBox 项目的实际类型，以便在绑定(bind)路径中引用项目的属性。
以下示例将 SelectedItem 转换为虚构类型 LanguageItem 以访问 LanguageItem.LanguageName 属性，从而触发特定的选定语言:

MainWindow.xaml

<Window x:Name="Window">
  <StackPanel>

    <TextBlock x:Name="InvisibleTextBlock" Text="Invisible">
      <TextBlock.Style>
        <Style TargetType="TextBlock">
          <Setter Property="Visibility" Value="Hidden"/>
          <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=LanguageSelector, Path=SelectedItem.(LanguageItem.LanguageName)}" 
                         Value="English">
              <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </TextBlock.Style>
    </TextBlock>

    <ComboBox x:Name="LanguageSelector" />
  </StackPanel>
</Window>