WPF CheckBox to the left of the TreeView - wpf

Question

How to insert checkbox to the left of the treeviewitem (expander), so it was the same item.

Answer 1

Sergo, Here is a version using the Control Template and we have Checkboxes being placed in column 0 of the item. They should align to the left with the TreeViewItem to the right. The 'magic' piece is in the CheckboxTreeItem style where we add a WrapPanel and place it in Grid.Column='0'.
<Window
x:Class="TreeViewHeaderTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1"
Height="300"
Width="300">
<Window.Resources>
<SolidColorBrush
x:Key="GlyphBrush"
Color="#444" />
<Style
x:Key="ExpandCollapseToggleStyle"
TargetType="ToggleButton">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="ToggleButton">
<WrapPanel
Background="Transparent">
<Path
x:Name="ExpandPath"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Fill="{StaticResource GlyphBrush}"
Data="M 4 0 L 8 4 L 4 8 Z" />
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger
Property="IsChecked"
Value="True">
<Setter
Property="Data"
TargetName="ExpandPath"
Value="M 0 4 L 8 4 L 4 8 Z" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="TreeViewItemFocusVisual">
<Setter
Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle
Margin="0,0,0,0"
StrokeThickness="5"
Stroke="Black"
StrokeDashArray="1 2"
Opacity="0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="CheckboxTreeItem"
TargetType="{x:Type TreeViewItem}">
<Setter
Property="IsExpanded"
Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter
Property="IsSelected"
Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="HorizontalContentAlignment"
Value="{Binding Path=HorizontalContentAlignment,
RelativeSource={RelativeSource
AncestorType={x:Type ItemsControl}}}" />
<Setter
Property="VerticalContentAlignment"
Value="{Binding Path=VerticalContentAlignment,
RelativeSource={RelativeSource
AncestorType={x:Type ItemsControl}}}" />
<Setter
Property="Padding"
Value="1,0,0,0" />
<Setter
Property="Foreground"
Value="{StaticResource {x:Static
SystemColors.ControlTextBrushKey}}" />
<Setter
Property="FocusVisualStyle"
Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
MinWidth="19"
Width="Auto" />
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<WrapPanel
Grid.Column='0'>
<CheckBox />
<ToggleButton
x:Name="Expander"
Style="{StaticResource
ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource
TemplatedParent}}"
ClickMode="Press" />
</WrapPanel>
<Border
Name="Bd"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding
BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter
x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsExpanded"
Value="false">
<Setter
TargetName="ItemsHost"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger
Property="HasItems"
Value="false">
<Setter
TargetName="Expander"
Property="Visibility"
Value="Hidden" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="HasHeader"
Value="false" />
<Condition
Property="Width"
Value="Auto" />
</MultiTrigger.Conditions>
<Setter
TargetName="PART_Header"
Property="MinWidth"
Value="75" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="HasHeader"
Value="false" />
<Condition
Property="Height"
Value="Auto" />
</MultiTrigger.Conditions>
<Setter
TargetName="PART_Header"
Property="MinHeight"
Value="19" />
</MultiTrigger>
<Trigger
Property="IsSelected"
Value="true">
<Setter
TargetName="Bd"
Property="Background"
Value="AliceBlue" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="IsSelected"
Value="true" />
<Condition
Property="IsSelectionActive"
Value="false" />
</MultiTrigger.Conditions>
<Setter
TargetName="Bd"
Property="Background"
Value="{StaticResource {x:Static
SystemColors.ControlBrushKey}}" />
<Setter
Property="Foreground"
Value="{StaticResource {x:Static
SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger
Property="IsEnabled"
Value="false">
<Setter
Property="Foreground"
Value="{StaticResource {x:Static
SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TreeView>
<TreeViewItem
Style='{StaticResource CheckboxTreeItem}'
Header='Item'
IsExpanded='True'>
<TreeViewItem
Style='{StaticResource CheckboxTreeItem}'
Header='SubItem 1' />
<TreeViewItem
Style='{StaticResource CheckboxTreeItem}'
Header='SubItem 2'>
<TreeViewItem
Style='{StaticResource CheckboxTreeItem}'
Header='SubItem a' />
<TreeViewItem
Style='{StaticResource CheckboxTreeItem}'
Header='SubItem b' />
</TreeViewItem>
</TreeViewItem>
</TreeView>
</Window>

Answer 2

You can modify the header of your TreeViewItem to add a Checkbox to the left. Here's a quick example to get you started, this xaml just adds a checkbox to the left and a TextBlock to the right.
<TreeView>
<TreeViewItem>
<TreeViewItem.Header>
<WrapPanel>
<CheckBox />
<TextBlock
Margin='5,0'
Text='Item' />
</WrapPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<WrapPanel>
<CheckBox />
<TextBlock
Margin='5,0'
Text='SubItem' />
</WrapPanel>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
</TreeView>
Depending on your scenario you may want to create a whole new template to override the default look for all TreeViewItems, if you do, then checkout the MSDN TreeViewItem Control Template example:
http://msdn.microsoft.com/en-us/library/ms788727.aspx