This project has moved. For the latest updates, please go here.

CheckComboBox - ItemTemplate

Nov 29, 2013 at 3:46 AM
Edited Nov 29, 2013 at 3:49 AM
Good morning,
i have some troubles with implementation of ItemTemplate to CheckComboBox. I need to customize viewing of enum values, but when i try to implement any DataTemplate, CheckComboBox does not react. May be i do some thing wrong?
<Style x:Key="comboItemContanerStyle" TargetType="{x:Type xctk:SelectorItem}">
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="VerticalContentAlignment" Value="Center" />
  <Setter Property="Template" >
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
        <Border x:Name="_background" 
                     Background="{TemplateBinding Background}" 
                     BorderBrush="{TemplateBinding BorderBrush}" 
                     BorderThickness="{TemplateBinding BorderThickness}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="auto"/>
               <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <CheckBox VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                      IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}" 
                      Grid.Column="0"/>
              <ContentPresenter Content="{TemplateBinding Content}"
                                          Grid.Column="1"
                                          Margin="5,0,0,0"/>
            </Grid>
          </Border>
          <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="_background" Property="Background" Value="#FFB8E0F3" />
            <Setter TargetName="_background" Property="BorderBrush" Value="#FF26A0DA" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<DataTemplate x:Key="WrappingComboTemplate">
  <TextBlock Text="{Binding Converter={StaticResource convert}}" />
</DataTemplate>

<xctk:CheckComboBox VerticalAlignment="Bottom"
                                  MaxHeight="50"
                                  Visibility="Collapsed"
                                  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                  ItemContainerStyle="{StaticResource comboItemContanerStyle}"
                                  ItemTemplate="{StaticResource WrappingComboTemplate}"/>
Developer
Nov 29, 2013 at 12:28 PM
Hi,

I used your code to make some tests :
First, make sure the Visibility of the CheckComboBox is Visible :-)
Then, only using the ItemTemplate for the CheckComboBox, the Converter does its job.
Then adding the ItemContainerStyle to the CheckComboBox prevent the Converter from doing its job...like you point out.
In the ControlTemplate of the comboItemContanerStyle, there is a ContentPresenter. Simply add
ContentTemplate="{TemplateBinding ContentTemplate}"
to it. It will do the job.

Here's the complete xaml
<Window x:Class="WpfApplication88.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        xmlns:local="clr-namespace:WpfApplication88"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="comboItemContanerStyle"
               TargetType="{x:Type xctk:SelectorItem}">
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="IsTabStop"
                    Value="False" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
                        <Border x:Name="_background"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <CheckBox VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                          IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
                                          Grid.Column="0" />
                                <ContentPresenter Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Grid.Column="1"
                                                  Margin="5,0,0,0" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="true">
                                <Setter TargetName="_background"
                                        Property="Background"
                                        Value="#FFB8E0F3" />
                                <Setter TargetName="_background"
                                        Property="BorderBrush"
                                        Value="#FF26A0DA" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <local:MyConverter x:Key="convert" />

        <DataTemplate x:Key="WrappingComboTemplate">
            <TextBlock Text="{Binding Converter={StaticResource convert}}" />
        </DataTemplate>
    </Window.Resources>
    
    <Grid>
        <xctk:CheckComboBox x:Name="_checkComboBox"
                            VerticalAlignment="Bottom"
                            MaxHeight="50"
                            Visibility="Visible"
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                            ItemContainerStyle="{StaticResource comboItemContanerStyle}"
                            ItemTemplate="{StaticResource WrappingComboTemplate}"/>
    </Grid>
</Window>
Dec 18, 2015 at 3:17 PM
Edited Dec 18, 2015 at 3:17 PM
Hello,

I want to use a global style for th checkbox.

If i run:
                <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
                    <Border x:Name="_background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <CheckBox Content="{TemplateBinding Content}" />
                    </Border>
...
The checkBox only is display, but if i run :
                <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
                    <Border x:Name="_background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <CheckBox Content=kjhdslkjf" />
                    </Border>
...
I can see the text and the checkbox

What's happened ?
Developer
Dec 21, 2015 at 12:43 PM
Hi,

Is the "Content" property you are trying to bind to is empty ?
Can you submit a complete sample ?
Please note that the CheckBox is not part of the "Extended WPF Toolkit". The "Extended WPF Toolkit" only includes a CheckComboBox.
Thanks.
Dec 21, 2015 at 12:58 PM
Edited Dec 21, 2015 at 1:14 PM
No, I 'm sure this is not an empty value .
I have lots of boxes in my application, and I have a global style for all:
    <Style TargetType="{x:Type CheckBox}">
        <Setter Property="FontFamily" Value="Verdana" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                        <BulletDecorator.Bullet>
                            <TextBlock Name="MyPin" Text="&#xE005;" FontFamily="Segoe UI Symbol" Foreground="{StaticResource scbBlue}" FontSize="14" />
                        </BulletDecorator.Bullet>
                        <TextBlock Text="{TemplateBinding ContentPresenter.Content}" TextWrapping="Wrap"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" 
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true">
                            <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                            <Setter Property="Padding" Value="4,0,0,0"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="MyPin" Property="Text" Value="&#xE003;" />
                            <Setter TargetName="MyPin" Property="Foreground" Value="{StaticResource scbBlack}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
in short, I want to merge the CheckBox with ContentPresenter for apply a common style (checkbox style).
And the text can chech the checkbox on click inside.
    <Style x:Key="comboItemContanerStyle" TargetType="{x:Type xctk:SelectorItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
                    <Border x:Name="_background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <CheckBox Grid.Column="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}" >
                            </CheckBox>
                            <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="5,0,0,0" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="_background" Property="Background" Value="#FFB8E0F3" />
                            <Setter TargetName="_background" Property="BorderBrush" Value="#FF26A0DA" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
But, the Content="{TemplateBinding Content}" is not the object content, at first glance.
How can y just select the objet binded for pass value to CheckBox control ?

For exemple, if i use :
<CheckBox Grid.Column="0" Content ="Coucou" ... />
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" ... />
In each item, i See "Coucou MyObjectValue1".
But if i use :
<CheckBox Grid.Column="0" Content ="{TemplateBinding Content}"  ... />
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" ... />
I just see "MyObjectValue1", i want see "MyObjectValue1 MyObjectValue1".
Is it possible ?

Regards
Developer
Dec 21, 2015 at 4:06 PM
Hi,

To be able to use
<CheckBox Grid.Column="0" Content ="{TemplateBinding Content}"  ... />
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" ... />
in the style of the "xctk:SelectorItem", I modified your style of the "CheckBox". Instead of using
<TextBlock Text="{TemplateBinding ContentPresenter.Content}" .../>
I used :
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" .../>