TemplateBinding not passing the correct value

Question

In my WPF application, I have retemplated the ComboBox. The problem is I can't seem to get the BorderThickness to be properly applied. I think I am doing it correctly but I must be missing something because the result is not what I expected (it always stays as a thickness of 1).

The ComboBox as used in the UserControl (notice the thickness of 3):

<ComboBox DockPanel.Dock="Top" SelectedItem="{Binding CurrentAnalysisKey}" 
          ItemsSource="{Binding AnalysisKeys}" Height="25"
          BorderBrush="{StaticResource ListBoxBorderBrush}"
          BorderThickness="3"
          DisplayMemberPath="ReaffectedName" Margin="0,5" />

The ComboBox Style as defined in the resource file:

<Style TargetType="{x:Type ComboBox}">
  <Setter Property="Foreground"
          Value="White" />
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="BorderBrush"
          Value="{StaticResource BlackBorderBrush}" />
  <Setter Property="BorderThickness"
          Value="2" />
  <Setter Property="Template"
          Value="{DynamicResource ComboBoxTemplate}" />
</Style>

<Style d:IsControlPart="True"
       TargetType="{x:Type ComboBoxItem}">
  <Setter Property="Foreground"
          Value="White" />
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ComboBoxItem}">
        <ControlTemplate.Resources>
          <Storyboard x:Key="HoverOn">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                           Storyboard.TargetName="HoverRectangle"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                                    Value="1" />
            </DoubleAnimationUsingKeyFrames>

          </Storyboard>
          <Storyboard x:Key="HoverOff">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                           Storyboard.TargetName="HoverRectangle"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.4000000"
                                    Value="0" />
            </DoubleAnimationUsingKeyFrames>

          </Storyboard>
          <Storyboard x:Key="SelectedOn">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                           Storyboard.TargetName="SelectedRectangle"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                                    Value="1" />
            </DoubleAnimationUsingKeyFrames>

          </Storyboard>
          <Storyboard x:Key="SelectedOff">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                           Storyboard.TargetName="SelectedRectangle"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.4000000"
                                    Value="0" />
            </DoubleAnimationUsingKeyFrames>

          </Storyboard>

        </ControlTemplate.Resources>
        <Grid SnapsToDevicePixels="true"
              Margin="1"
              IsHitTestVisible="True">
          <Rectangle x:Name="Background"
                     IsHitTestVisible="True"
                     Opacity="0.25"
                     Fill="{StaticResource NormalBrush}"
                     RadiusX="1"
                     RadiusY="1" />
          <Rectangle x:Name="HoverRectangle"
                     IsHitTestVisible="True"
                     Opacity="0"
                     Fill="{StaticResource NormalBrush}"
                     RadiusX="1"
                     RadiusY="1" />
          <Rectangle x:Name="SelectedRectangle"
                     IsHitTestVisible="False"
                     Opacity="0"
                     Fill="{StaticResource SelectedBackgroundBrush}"
                     RadiusX="1"
                     RadiusY="1" />
          <ContentPresenter Margin="5,2,0,2"
                            x:Name="contentPresenter"
                            VerticalAlignment="Center" />
          <Rectangle x:Name="FocusVisualElement"
                     Visibility="Collapsed"
                     Stroke="{StaticResource HoverShineBrush}"
                     StrokeThickness="1"
                     RadiusX="1"
                     RadiusY="1" />
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsHighlighted"
                   Value="true">
            <Trigger.ExitActions>
              <BeginStoryboard Storyboard="{StaticResource SelectedOff}"
                               x:Name="SelectedOff_BeginStoryboard" />
            </Trigger.ExitActions>
            <Trigger.EnterActions>
              <BeginStoryboard Storyboard="{StaticResource SelectedOn}"
                               x:Name="SelectedOn_BeginStoryboard" />
            </Trigger.EnterActions>

          </Trigger>
          <Trigger Property="IsMouseOver"
                   Value="True">
            <Trigger.ExitActions>
              <BeginStoryboard Storyboard="{StaticResource HoverOff}"
                               x:Name="HoverOff_BeginStoryboard" />
            </Trigger.ExitActions>
            <Trigger.EnterActions>
              <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
            </Trigger.EnterActions>
          </Trigger>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter Property="Foreground"
                    Value="{DynamicResource DisabledForegroundBrush}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Static ToolBar.ComboBoxStyleKey}"
       TargetType="{x:Type ComboBox}">
  <Setter Property="FontSize"
          Value="10" />
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="Template"
          Value="{DynamicResource ComboBoxTemplate}" />
  <Setter Property="Foreground"
          Value="White" />
</Style>

The ComboBox Template: (the ThicknessConverter was used to spit out the Thickness received into the debug window)

<ControlTemplate x:Key="ComboBoxTemplate"
                 TargetType="{x:Type ComboBox}">
  <Grid x:Name="grid">
    <Grid.Resources>
      <converters:ComboBoxThicknessConverter x:Key="thicknessConv" />
    </Grid.Resources>
    <ToggleButton Template="{DynamicResource ComboBoxToggleButton}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  x:Name="ToggleButton"
                  Focusable="false"
                  IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                  ClickMode="Press" />
    <ContentPresenter HorizontalAlignment="Left"
                      x:Name="ContentSite"
                      Margin="{TemplateBinding BorderThickness, Converter={StaticResource thicknessConv}}"
                      VerticalAlignment="Center"
                      Content="{TemplateBinding SelectedItem}"
                      ContentTemplate="{TemplateBinding ItemTemplate}"
                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                      IsHitTestVisible="False" />
    <Popup IsOpen="{TemplateBinding IsDropDownOpen}"
           Placement="Bottom"
           x:Name="Popup"
           Focusable="False"
           AllowsTransparency="True"
           PopupAnimation="Slide">
      <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}"
            MinWidth="{TemplateBinding ActualWidth}"
            x:Name="DropDown"
            SnapsToDevicePixels="True">
        <Border x:Name="DropDownBorder"
                Background="{DynamicResource ControlBackgroundBrush}"
                CornerRadius="3" />
        <ScrollViewer Margin="4,6"
                      Style="{DynamicResource NuclearScrollViewer}"
                      SnapsToDevicePixels="True"
                      HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto"
                      CanContentScroll="True"
                      Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}">
          <StackPanel IsItemsHost="True"
                      KeyboardNavigation.DirectionalNavigation="Contained" />
        </ScrollViewer>
      </Grid>
    </Popup>
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="HasItems"
             Value="false">
      <Setter Property="MinHeight"
              Value="95"
              TargetName="DropDownBorder" />
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="false">
      <Setter Property="Foreground"
              Value="{DynamicResource DisabledForegroundBrush}" />
      <Setter Property="Opacity"
              TargetName="grid"
              Value="0.5" />
    </Trigger>
    <Trigger Property="IsGrouping"
             Value="true">
      <Setter Property="ScrollViewer.CanContentScroll"
              Value="false" />
    </Trigger>
    <Trigger Property="AllowsTransparency"
             SourceName="Popup"
             Value="true">
      <Setter Property="Margin"
              Value="0,2,0,0"
              TargetName="DropDownBorder" />
    </Trigger>
    <Trigger Property="local:Dragging.IsDragTarget"
             Value="True">
      <Setter Property="BorderBrush"
              Value="{StaticResource DragTargetBorderBrush}"
              TargetName="ToggleButton" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

The ComboBoxToggleButton:

<ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">
  <Grid x:Name="grid">
    <Grid.Resources>
      <converters:SpecialThicknessConverter x:Key="cv2" />
    </Grid.Resources>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.ColumnSpan="2"
               HorizontalAlignment="Stretch"
               x:Name="Rectangle"
               VerticalAlignment="Stretch"
               RadiusX="3"
               RadiusY="3"
               StrokeThickness="{TemplateBinding BorderThickness, Converter={StaticResource cv2}}"
               Fill="{DynamicResource LightBrush}"
               Stroke="{TemplateBinding BorderBrush}" />

    <Border Grid.Column="1"
            Margin="2"
            Background="{DynamicResource BorderBrush}"
            CornerRadius="3"
            x:Name="border" />
    <Border Grid.Column="1"
            Margin="2"
            Background="{DynamicResource HoverBrush}"
            CornerRadius="3"
            x:Name="HoverBorder"
            Opacity="0" />
    <Border Grid.Column="1"
            Margin="2"
            Background="{DynamicResource HoverShineBrush}"
            CornerRadius="3"
            x:Name="HoverShineBorder"
            Opacity="0" />
    <Path Grid.Column="1"
          HorizontalAlignment="Center"
          x:Name="Arrow"
          VerticalAlignment="Center"
          Fill="{x:Null}"
          Data="M0.5,0.5 L3,6.5 5.5,0.5"
          Stroke="{DynamicResource GlyphBrush}"
          Margin="5,0"
          Height="7"
          StrokeThickness="2"
          Stretch="Fill" />
    <Border Grid.Column="1"
            Margin="2"
            Background="{DynamicResource ShineBrush}"
            CornerRadius="3"
            x:Name="ShineBorder" />
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver"
             Value="true">
      <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource HoverOff}"
                         x:Name="HoverOff_BeginStoryboard" />
      </Trigger.ExitActions>
      <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
      </Trigger.EnterActions>
    </Trigger>
    <Trigger Property="IsChecked"
             Value="true" />
    <Trigger Property="IsEnabled"
             Value="False">
      <Setter Property="Foreground"
              Value="{DynamicResource DisabledForegroundBrush}" />
      <Setter Property="Stroke"
              TargetName="Arrow"
              Value="{DynamicResource DisabledForegroundBrush}" />
      <Setter Property="Background"
              TargetName="border"
              Value="{DynamicResource DisabledBorderBrush}" />
      <Setter Property="Opacity"
              TargetName="grid"
              Value="0.8" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

One of the thickness converters is used to leave space for the Borders and the Path that constitute the Button on the right side of the ComboBox (20 pixels). Both are included below:

public class ComboBoxThicknessConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var oldT = (Thickness)value;
        //Debug.WriteLine("cbx templ thickness = {" + oldT.Left + ", " + oldT.Top + ", " + oldT.Right + ", " + oldT.Bottom + "}");
        return new Thickness(oldT.Left, oldT.Top, oldT.Right + 20, oldT.Bottom);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}


public class SpecialThicknessConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var oldT = (Thickness)value;
        Debug.WriteLine("toggle btn thickness = {" + oldT.Left + ", " + oldT.Top + ", " + oldT.Right + ", " + oldT.Bottom + "}");
        return oldT;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

Unless I change the StrokeThickness manually inside the ComboBoxToggleButton to a hard-coded value, I always end up with the same thickness: 1.

Any ideas where I'm going wrong? As far as I understand, I am passing the BorderThickness from the ComboBox properly along every level of hierarchy into the Rectangle in the ComboBoxToggleButton. However, when I look at the debug window, I see the value used in the setter in the ComboBox Style, not the one used when the ComboBox is declared.

Thanks in advance!

Sean

Answer 1

TemplateBinding is not the same as a normal Binding. It is optimized to take in a value of a specific type and pass it through directly to a property of the same type. Other options like Converters, StringFormat, etc don't work on TemplateBinding, and annoyingly don't give any errors. If you need to do any conversions or are trying to connect properties of different types by relying on built in type conversions you need to use a normal Binding with RelativeSource TemplatedParent instead:

{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource cv2}}

Answer 2

In the end, the problem was the type difference between Rectangle.Stroke (Shape.StrokeThickness is a double) and Control.BorderThickness (which is a Thickness... 4 doubles).

Added a Converter and used the TemplateBinding as suggested in the accepted answer and it worked.

StrokeThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource rect2DoubleConv}}"


public class RectangleToDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var oldT = (Thickness)value;
        return (oldT.Left + oldT.Top + oldT.Right + oldT.Bottom) / 4.0;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}