Share via

Workaround for Style.Triggers Design Time Issue

  • Article

I've received two bug reports from Control Vendors regarding Style.Triggers not working correctly at design time in the WPF Designer RTM.  Fortunately, we do have a workaround to the problem.  Suppose you have a trigger defined as follows:

     <Style TargetType="{x:Type local:CustomControl1}">
        <Style.Triggers>
            <Trigger Property="local:CustomControl1.SecondTemplate" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                            <Border Background="Red"
                            BorderBrush="Green"
                            BorderThickness="4">
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 What you would expect is that in the designer when you set the SecondTemplate property to true you would get something that looks like this:

Unfortunately, the style doesn't update.

To work around this issue, if you define triggers for both the true and false values, you will get the desired behavior:

   <Style TargetType="{x:Type local:CustomControl1}">
        <Style.Triggers>
            <Trigger Property="local:CustomControl1.SecondTemplate" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                            <Border Background="Red"
                            BorderBrush="Green"
                            BorderThickness="4">
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="local:CustomControl1.SecondTemplate" Value="false">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                            <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

Hope that helps!

This sample is attached.  When you open the sample it will be in a state where the style triggers don't, well, trigger at design time.  If you uncomment the workaround and comment the original style, you will see the style triggers will then work in the designer.

StyleTriggerDesignTimeAdornerSample.zip

Comments