Listing 3: XAML • Provide Visual Clues With Data Triggers
Setting the ItemsSource with no path or source arguments binds to the full collection that is the data context for the nearest ancestor with a non-null data context. Combining linear gradients and triggers displays an alert bar that extends from the right side of overdue items. Variations in the width of the red bar result from varying tab stops that repeat the transparent (white) color.
<UserControl x:Class="IncidentSelection"
xmlns=
"http://schemas.microsoft.com/winfx/2006/xaml/
presentation"
xmlns:biz="clr-namespace:TestApp"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<SolidColorBrush
x:Key="AssignmentBorderBrush">Green</SolidColorBrush>
<SolidColorBrush
x:Key="ResolvedBorderBrush">Blue</SolidColorBrush>
<Color x:Key="Late">Red</Color>
<Color x:Key="Due">Yellow</Color>
<LinearGradientBrush x:Key="AssignmentLateBrush"
StartPoint="0, 0.5" EndPoint="1, .5">
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Offset=".6" Color='Transparent"/>
<GradientStop Offset="1" Color="{StaticResource Late}"/>
</LinearGradientBrush>
<!— Linear Gradient Brushes for other states ommitted —>
<DataTemplate x:Key="IncidentSelect">
<Border BorderThickness="1" BorderBrush="Gray"
Padding="6" Name="incidentBorder" Width="300"
HorizontalAlignment="Stretch">
<StackPanel Name="incidentStackPanel"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Path=Title}"
FontWeight="Bold"/>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IncidentState}">
<DataTrigger.Value>AssignmentLate
</DataTrigger.Value>
<Setter Property="Background"
Value="{StaticResource AssignmentLateBrush}"
TargetName="incidentStackPanel"/>
<Setter Property="BorderBrush"
Value="{StaticResource AssignmentBorderBrush}"
TargetName="incidentBorder" />
<Setter Property="BorderThickness" Value="3"
TargetName="incidentBorder" />
<Setter Property="Padding" Value="1"
TargetName="incidentBorder" />
</DataTrigger>
<!—Data triggers for other states ommitted —>
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<Label>Select Incident</Label>
<ListBox Margin="5" ItemsSource="{Binding}"
Background="White"
IsSynchronizedWithCurrentItem="True"
ItemTemplate="{StaticResource IncidentSelect}">
</ListBox>
</StackPanel>
</UserControl>