ControlTemplate中的DataTrigger不起作用

Question

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

有些事情我也不太理解：我必须动态引用Style，因为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}，并在<Image.Style>中将<DataTrigger>从<ControlTemplate.Triggers>移动到<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

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

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

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

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