如何设置DataTrigger的高层级绑定数据并合并WPF资源

嘿，我来帮你搞定这个问题！你想要合并这几个XAML资源，同时解决DataTrigger在更高层级绑定的需求，咱们一步步来：

一、合并两个Image Style为一个通用Style #

两个Style核心逻辑都是根据布尔值切换图片，只是绑定属性和图片路径不同。我们可以用MultiDataTrigger结合Tag属性区分场景，把两个Style合并成一个：

<Style x:Key="StatusImageStyle" TargetType="{x:Type Image}">
    <Style.Triggers>
        <!-- 服务状态场景：Image.Tag="ServiceStatus" -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="ServiceStatus" />
                <Condition Binding="{Binding ServiceStatus}" Value="true" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Source" Value="/Resources/Images/StartedService.png" />
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="ServiceStatus" />
                <Condition Binding="{Binding ServiceStatus}" Value="false" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Source" Value="/Resources/Images/StopedService.png" />
        </MultiDataTrigger>
        
        <!-- 绘图模式场景：Image.Tag="DrawMode" -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="DrawMode" />
                <Condition Binding="{Binding bScrollViewMode}" Value="true" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Source" Value="/Resources/Images/scrollview24.png" />
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="DrawMode" />
                <Condition Binding="{Binding bScrollViewMode}" Value="false" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Source" Value="/Resources/Images/zoomview24.png" />
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

使用时只需给Image设置对应Tag，就能自动匹配对应的状态逻辑。

二、合并两个DataTemplate为一个通用模板 #

两个DataTemplate结构完全一致，仅绑定的属性不同。我们可以在模板里加入DataTrigger，根据ViewModel的标识属性切换内容：

第一步：添加布尔转图片的转换器 #

先写两个转换器，把布尔值直接转换成对应图片路径（放在你的项目代码中）：

public class BoolToServiceImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isStarted = (bool)value;
        return isStarted 
            ? new BitmapImage(new Uri("/Resources/Images/StartedService.png", UriKind.Relative)) 
            : new BitmapImage(new Uri("/Resources/Images/StopedService.png", UriKind.Relative));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

public class BoolToDrawImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isScrollMode = (bool)value;
        return isScrollMode 
            ? new BitmapImage(new Uri("/Resources/Images/scrollview24.png", UriKind.Relative)) 
            : new BitmapImage(new Uri("/Resources/Images/zoomview24.png", UriKind.Relative));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

第二步：声明转换器并合并DataTemplate #

在XAML资源里声明转换器，然后写出合并后的模板：

<!-- 声明转换器 -->
<local:BoolToServiceImageConverter x:Key="BoolToServiceImageConverter" />
<local:BoolToDrawImageConverter x:Key="BoolToDrawImageConverter" />

<!-- 合并后的通用DataTemplate -->
<DataTemplate x:Key="CombinedStatusTemplate" DataType="{x:Type local:MainWindowViewModel}">
    <Grid Width="220" Height="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="StatusImg" Grid.Column="0" Width="30" Height="30" Margin="5,0,0,0" />
        <TextBlock x:Name="StatusTxt" Grid.Column="1" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,0,0" Foreground="White" />
    </Grid>
    
    <DataTemplate.Triggers>
        <!-- 服务状态场景：ViewModel.IsServiceStatus = true -->
        <DataTrigger Binding="{Binding IsServiceStatus}" Value="true">
            <Setter TargetName="StatusImg" Property="Source" Value="{Binding ServiceStatus, Converter={StaticResource BoolToServiceImageConverter}}" />
            <Setter TargetName="StatusTxt" Property="Text" Value="{Binding ServiceStatusString}" />
        </DataTrigger>
        <!-- 绘图模式场景：ViewModel.IsDrawMode = true -->
        <DataTrigger Binding="{Binding IsDrawMode}" Value="true">
            <Setter TargetName="StatusImg" Property="Source" Value="{Binding bScrollViewMode, Converter={StaticResource BoolToDrawImageConverter}}" />
            <Setter TargetName="StatusTxt" Property="Text" Value="{Binding ViewModeName}" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

使用时只需在ViewModel里添加IsServiceStatus和IsDrawMode两个布尔属性，标记当前要显示的场景即可。

三、更高层级设置DataTrigger绑定数据 #

如果想在父容器（如Window、UserControl）层级统一设置DataTrigger的绑定，有三种常用方式：

• RelativeSource绑定父级上下文：

  <DataTrigger Binding="{Binding DataContext.GlobalStatus, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" Value="true">
      <!-- 要设置的属性 -->
  </DataTrigger>
  

• ElementName绑定父容器：

  <Window x:Name="MainWindow">
      <Style TargetType="Image">
          <Style.Triggers>
              <DataTrigger Binding="{Binding DataContext.GlobalStatus, ElementName=MainWindow}" Value="true">
                  <!-- ... -->
              </DataTrigger>
          </Style.Triggers>
      </Style>
  </Window>
  

• 全局DataContext共享：
  把父容器的DataContext设置为全局ViewModel实例，子元素会自动继承，DataTrigger可直接绑定全局属性。

四、统一管理所有资源 #

如果想把所有资源合并到一处，可以将Style、转换器声明、DataTemplate都放在同一个ResourceDictionary文件中，然后在App.xaml里合并引用：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/CombinedStatusResources.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

这样整个应用都能直接使用这些合并后的资源。

内容的提问来源于stack exchange，提问作者atoi