Fire trigger in UserControl based on DependencyProperty - wpf

Question

have a very easy question, but it seems I could not find the answer on the Internet for it. Possibly because I am not looking in the right places.
I have a user control with a DependencyProperty of a custom enum type.
In XAML I would like to Show/Hide elements based on the value of the enum type. I tried to do this with DataTriggers but I fail to get it working.
<UserControl x:Class="WpfApplication1.DisplayIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50"
x:Name="control">
<UserControl.Resources>
<Style TargetType="Ellipse">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Ellipse x:Name="el1" Fill="Red" Width="30" Height="30" />
<Rectangle x:Name="el2" Fill="Green" Width="20" Height="20" />
<TextBlock Text="{Binding MyIconType, ElementName=control}" Margin="0,40,0,0"/>
</Grid></UserControl>
And my code behind looks like this:
public enum IconType
{
Ellipse,
Rectangle
}
public partial class DisplayIcon : UserControl
{
public DisplayIcon()
{
InitializeComponent();
}
public IconType MyIconType
{
get { return (IconType)GetValue(MyIconTypeProperty); }
set { SetValue(MyIconTypeProperty, value); }
}
// Using a DependencyProperty as the backing store for MyIconType. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyIconTypeProperty =
DependencyProperty.Register("MyIconType", typeof(IconType), typeof(DisplayIcon), new PropertyMetadata(IconType.Ellipse));
}
Can someone help me?
Thanks,
Jim

Answer 1

You can create a Style for each element and define the Triggers there:
<UserControl x:Class="WpfApplication1.DisplayIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50"
x:Name="control">
<UserControl.Resources>
<Style TargetType="Ellipse">
<Style.Triggers>
<DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Ellipse x:Name="el1" Fill="Red" Width="20" Height="20"/>
<Rectangle Grid.Row="1" x:Name="el2" Fill="Green" Width="20" Height="20"/>
</Grid>
EDIT:
Infact it would probably make more sense to invert the Visibility logic. That way you can add shapes without needing to modify the code:
<UserControl x:Class="WpfApplication1.DisplayIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50"
x:Name="control">
<UserControl.Resources>
<Style TargetType="Ellipse">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Ellipse x:Name="el1" Fill="Red" Width="20" Height="20"/>
<Rectangle x:Name="el2" Fill="Green" Width="20" Height="20"/>
</Grid>