I am new here and hope my first question meets stack overflow’s requirements. I have done some research so far but could not figure it out myself.
I create a UserControl (derived from an intermediate base Class) which should be able to change a color sign to a different color depending on its “VisualAlarmState” Property which is a DependencyProperty.
The Style plus ControlTemplate are rendered as expected but the DataTrigger at the end of the style does not change the color (=image) of VisualAlarmSign which is an Image element.
The code can be compiled and run without errors but the alarm state will not be shown as expected.
Something I do ot really understand either: I have to reference the Style dynamically because Style=”{StaticResource DashboardItemStyle}” will be underlinded and at mouse hover says: “The resource “DashboardItemStyle” could not be resolved.”
<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>
Working Solution
I removed Source={StaticResource MO-Marker-Grün} from the <Image> element and I moved the <DataTrigger> from <ControlTemplate.Triggers> to <Style.Triggers> in <Image.Style> which resulted in the following XAML code:
<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>
Try setting the source of image using style property setter. Some how trigger behave wired.
Make sure to remove the source property in the image tag.
Some how triggers may not set properties we have used in the tag. in your case you set the value of source in the image tag. if you set the same value through style setter it may worm. its worth a try.