What can cause my template to be ignored in this Custom Control

Question

EDIT: Original title: When I add a custom control based on a timer, my templates are ignored.

I'm working on the 70-511 training kit from Microsoft Press, and combined two practice exercises together from chapter 5.

The problem is that when I add the custom control to my MainWindow, it runs, but the triggers on the Button template are ignored. When the same control is removed, the triggers are honored.

For those who don't have access to the book, and don't feel like analyzing the code, it's a custom control with a label that has a dependency property setup to update on a timer object (once per second) with the current system time.

As you might infer from my attached code, the custom control is in a separate assembly referenced by the 5_3 project.

I'm a bit stumped on this one. What is causing this?

Here is the code:

MainWindow.xaml:

<Window x:Class="chapter5_3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:chapter5_3CustomControl;assembly=chapter5_4CustomControl">
<Window.Resources>
    <ControlTemplate TargetType="{x:Type Button}" x:Key="ButtonTemplate">

        <Border Name="Bord1" BorderBrush="Olive" BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <Rectangle Name="rect1">
                    <Rectangle.Fill>
                        <SolidColorBrush x:Name="rosyBrush" Color="RosyBrown"/>
                    </Rectangle.Fill>
                </Rectangle>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True" >
                <Trigger.EnterActions>
                    <BeginStoryboard Name="bst2">
                        <Storyboard AutoReverse="False">
                            <ColorAnimation Duration="0:0:.3"
                                            Storyboard.TargetProperty="Color" 
                                            Storyboard.TargetName="rosyBrush" >
                                <ColorAnimation.By>
                                    <Color A="0" R="100" B="0" G="0"/>
                                </ColorAnimation.By>
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>

                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="bst2" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Name="bst1">
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetName="Bord1"
                 Storyboard.TargetProperty="BorderThickness"
                 By=".1" Duration="0:0:.3" />
                            <ColorAnimation AutoReverse="False" To="DarkRed" Duration="0:0:.3"
                                            Storyboard.TargetProperty="Color" 
                                            Storyboard.TargetName="rosyBrush" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="bst1" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="rect1" Property="Fill" Value="Gray"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Template="{StaticResource ResourceKey=ButtonTemplate}" Height="23" Width="100" BorderThickness="2" Name="btnHello" Content="Hello" IsEnabled="False">

    </Button>
    <ToolBarPanel>
        <CheckBox IsChecked="True" Content="Enable Button" Name="cbEnabled" Checked="cbEnabled_Checked" Unchecked="cbEnabled_Checked"/>

    </ToolBarPanel>
    <my:CustomControl1 Name="customControl11" />
</Grid>

CustomControl1.xaml: (separate assembly)

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:chapter5_3CustomControl">
<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <TextBlock Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center"
                                   Text="{Binding Path=Time}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

CustomControl.cs

public class CustomControl1 : Control
{

    public static readonly DependencyProperty TimeProperty;

    System.Timers.Timer myTimer = new System.Timers.Timer();

    delegate void SetterDelegate();

    static CustomControl1()
    {
        FrameworkPropertyMetadata metadata = new FrameworkPropertyMetadata();
        TimeProperty = DependencyProperty.Register("Time", typeof(string), typeof(CustomControl1), metadata);

        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));
    }

    public CustomControl1()
    {
        myTimer.Elapsed += timer_elapsed;
        myTimer.Interval = 1000;
        myTimer.Start();
        this.DataContext = this;
    }

    void TimeSetter()
    {
        SetValue(TimeProperty, DateTime.Now.ToLongTimeString());
    }

    void timer_elapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
        Dispatcher.Invoke(new SetterDelegate(TimeSetter), 
            System.Windows.Threading.DispatcherPriority.Normal);

    }
}

Edit:

I wanted to plug a free tool that I use called snoop! You can find it here, and I recommend it as it allows you to inspect your controls at runtime! Snoop Lives here at time of edit: http://snoopwpf.codeplex.com/ It has saved me a lot of time!

Answer 1

Because your Button and CustomControl are in the same row and column of the Grid, your CustomControl is probably covering the Button. You probably just can't see it.

If you set the Background of your CustomControl to say Red, then you will see what area it is covering.

You would need to ensure that the CustomControl doesn't cover the Button, if you want the Button to respond to mouse events. Alternatively, you can set IsHitTestVisible to false on your CustomControl or ensure it's Background is null.