Use Data Triggers to Change the Appearance of Bound Data
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication1="clr-namespace:WpfApplication1"
x:Name="thisWindow" Title="WPF" Height="240" Width="280">
<Window.Resources>
<WpfApplication1:DataItems x:Key="dataItems"/>
<WpfApplication1:AmountToHeightConverter x:Key="amountToHeightConverter" />
<DataTemplate x:Key="dataItemtemplate">
<Rectangle x:Name="rectangle" Width="30"
VerticalAlignment="Bottom"
Fill="Green"
Height="{Binding Path=Amount,Converter={StaticResource amountToHeightConverter}}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsPositive}" Value="False">
<Setter TargetName="rectangle" Property="Fill" Value="Red"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ItemsControl ItemsSource="{Binding Source={StaticResource dataItems}}"
ItemTemplate="{StaticResource dataItemtemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Line Stroke="Black" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="{Binding ElementName=thisWindow, Path=ActualHeight}"/>
<Line Stroke="Black" StrokeThickness="2" X1="0" Y1="0" X2="{Binding ElementName=thisWindow, Path=ActualWidth}" Y2="0"/>
</StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows.Data;
using System.Globalization;
using System.Collections.ObjectModel;
namespace WpfApplication1
{
[ValueConversion(typeof (double), typeof (double))]
public class AmountToHeightConverter : IValueConverter
{
public Object Convert(Object value,Type targetType,Object parameter,CultureInfo culture)
{
double amount = System.Convert.ToDouble(value);
if(amount < 0)
amount = 0;
return amount;
}
public object ConvertBack(object value,Type targetType,object parameter,CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class DataItem
{
public double Amount
{
get;
set;
}
public bool IsPositive
{
get
{
return Amount >= 0;
}
}
}
public class DataItems : Collection<DataItem>
{
public DataItems()
{
this.Add(new DataItem(){Amount=5});
this.Add(new DataItem(){Amount=8});
this.Add(new DataItem(){Amount=-5});
this.Add(new DataItem(){Amount=2});
this.Add(new DataItem(){Amount=-5});
this.Add(new DataItem(){Amount=-5});
}
}
}
Related examples in the same category
