Fire trigger in UserControl based on DependencyProperty

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

Richard E · Answer 1 · 2013-07-05T15:07:32.450

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>

Thanks for the reply, but this doesn't seem to work either. The triggers aren't fired. — jim, Jul 05 '13 at 15:18
I copied your code, and it doesn't work. Do you have a working copy? — jim, Jul 05 '13 at 15:22
I tested it by changing the MyIconType value in a button click handler. Works for me: private void ButtonBase_OnClick(object sender, RoutedEventArgs e) { if (MyIconType == IconType.Ellipse) MyIconType = IconType.Rectangle; else { MyIconType = IconType.Ellipse; } } — Richard E, Jul 05 '13 at 15:24
I use it in a MainWindow with the following XAML (and it doesn't work). Any clues? — jim, Jul 05 '13 at 15:41
Not sure. I copied your MainWindow code and it just displayed the Ellipse. Changed MyIconType to "Rectangle" and it just displayed the Rectangle. — Richard E, Jul 05 '13 at 15:45
I updated the code again, and now it works. Strange behaviour. — jim, Jul 05 '13 at 15:55

Fire trigger in UserControl based on DependencyProperty

1 Answers1

Linked