ControlTemplate 中的 DataTrigger 不起作用

Question

我是新来的，希望我的第一个问题符合堆栈溢出的要求。到目前为止，我已经做了一些研究，但我自己无法弄清楚。
我创建了一个 UserControl（从中间基类派生），它应该能够根据其作为 DependencyProperty 的“VisualAlarmState”属性将颜色符号更改为不同的颜色。
Style plus ControlTemplate 按预期呈现，但样式末尾的 DataTrigger 不会更改作为 Image 元素的 VisualAlarmSign 的颜色 (=image)。
代码可以编译运行，没有错误，但是报警状态不会按预期显示。

我也不太明白的东西：我必须动态引用样式，因为 Style="{StaticResource DashboardItemStyle}" 将加下划线，并且在鼠标悬停时说：“资源“DashboardItemStyle”无法解析。”

<ucbase:DashboardItemBase.Resources>
            <BitmapImage x:Key="MO-Zylinderdeckel" UriSource="/ModuleDashboard;component/Resources/MO-Zylinderdeckel.tif" />
            <BitmapImage x:Key="MO-Zylindermantel" UriSource="/ModuleDashboard;component/Resources/MO-Zylindermantel.tif" />
            <BitmapImage x:Key="MO-Zylinderboden" UriSource="/ModuleDashboard;component/Resources/MO-Zylinderboden.tif" />
            <BitmapImage x:Key="MO-Marker-Grün" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Grün.tif" />
            <BitmapImage x:Key="MO-Marker-Orange" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Orange.tif" />
            <BitmapImage x:Key="MO-Marker-Rot" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Rot.tif" />

    <Style x:Key="DashboardItemStyle" TargetType="{x:Type ucbase:DashboardItemBase}">

        <Setter Property="Template" x:Name="Template1">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ucbase:DashboardItemBase}">                        
                    <dxlc:Tile x:Name="Tile" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
                            Height="128.5" Width="208.5" Background="{x:Null}">
                        <dxlc:Tile.Content>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="11.5" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="12.5" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="6.5" />
                                </Grid.ColumnDefinitions>

                                <Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
                                        HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
                                        Source="{StaticResource MO-Zylinderdeckel}" />

                                <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="6.5" />
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="2"
                                            HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
                                            Source="{StaticResource MO-Zylindermantel}" />


                                        <Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Height="14"
                                            Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
                                            VerticalAlignment="Top" Source="{StaticResource MO-Marker-Grün}" />
                                </Grid>

                                <Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="3" Grid.RowSpan="1"
                                        HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
                                        Source="{StaticResource MO-Zylinderboden}" />
                            </Grid>
                        </dxlc:Tile.Content>
                    </dxlc:Tile>

                    <ControlTemplate.Triggers>

                        <!-- This Trigger has no effect. Why?-->
                        <DataTrigger
                                Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisualAlarmState}">
                            <DataTrigger.Value>
                                <vmbase:AlarmState>Alarm</vmbase:AlarmState>
                            </DataTrigger.Value>
                            <Setter TargetName="VisualAlarmSign" Property="Source"
                                    Value="{StaticResource MO-Marker-Rot}" />
                        </DataTrigger>                      </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ucbase:DashboardItemBase.Resources>

工作解决方案

我从<Image> 元素中删除了Source={StaticResource MO-Marker-Grün}，并将<DataTrigger> 从<ControlTemplate.Triggers> 移到<Image.Style> 中的<Style.Triggers>，这导致了以下XAML 代码：

<ucbase:DashboardItemBase.Resources>
    ...
    <BitmapImage x:Key="MO-Marker-Rot" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Rot.tif" />
    ...
        <Style x:Key="DashboardItemStyle" TargetType="{x:Type ucbase:DashboardItemBase}">
            <Setter Property="Template" x:Name="Template1">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ucbase:DashboardItemBase}">                        
                        <dxlc:Tile x:Name="Tile" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
                                Height="128.5" Width="208.5" Background="{x:Null}">
                            <dxlc:Tile.Content>
                                <Grid>
                                    ...                                     
                                    <Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"
                                            Height="14" Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
                                            VerticalAlignment="Top" >
                                        <Image.Style>
                                            <Style>
                                                <Style.Triggers>
                                                    <DataTrigger
                                                            Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisualAlarmState}"
                                                            Value="Alarm">
                                                        <Setter Property="Image.Source"
                                                                Value="{StaticResource MO-Marker-Rot}" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Image.Style>
                                    </Image>
                                    ...
                                </Grid>
                            </dxlc:Tile.Content>                        
                        </dxlc:Tile>                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</ucbase:DashboardItemBase.Resources>

Answer 1

尝试使用样式属性设置器设置图像的来源。一些触发器的行为方式。

<Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Height="14"
                                            Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
                                            VerticalAlignment="Top">
    <Image.Style>
    <Style>
     <Setter TargetName="VisualAlarmSign" Property="Source"
                                        Value="{StaticResource MO-Marker-Grün}" />
    </Style>
    </Image.Style>
</Image>

确保删除图像标签中的源属性。

某些触发器可能无法设置我们在标签中使用的属性。在您的情况下，您在图像标签中设置了 source 的值。如果您通过样式设置器设置相同的值，它可能会蠕虫。值得一试。