How to insert checkbox to the left of the treeviewitem (expander), so it was the same item.
A:
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:
Ed Gonzalez
2010-03-23 11:38:35
Thanks for your reply.I mean situation like this:-----------------------------|TreeViewColumn1 Column2CheckBox TreeViewItemCheckBox TreeViewItemCheckBox TreeViewItem All checkboxes have to be alignment on the left, treeview on the right side. Withou using LisBox or TreeListView
sergo_lsn
2010-03-23 11:58:30
When I use this http://msdn.microsoft.com/en-us/library/ms788727.aspxI have situation when checkbox on the left side but not alignment in column.
sergo_lsn
2010-03-23 13:36:03
What you want is for all checkboxes to be aligned underneath eachother along the left, regardless of nesting depth for the TreeViewItem. I'm nearly certain this is doable using the ControlTemplate, but it's been a while since I've looked into it. I'll see if I can find it and post some code.
Ed Gonzalez
2010-03-23 13:57:34
I want like this http://msdn.microsoft.com/en-us/library/ms771523.aspxBut without ListBox and TreeListView.On the left checkboxes, in next column treeview (main). CheckBox is the same treeviewitem from main treeview.
sergo_lsn
2010-03-23 14:31:49
A:
Thanks for your reply.
I mean situation like this:
-----------------------------|
TreeView
Column1 Column2
CheckBox TreeViewItem
CheckBox TreeViewItem
CheckBox TreeViewItem
All checkboxes have to be alignment on the left, treeview on the right side. Withou using LisBox or TreeListView
sergo_lsn
2010-03-23 13:34:01
A:
When I use this http://msdn.microsoft.com/en-us/library/ms788727.aspx I have situation when checkbox on the left side but not alignment in column.
sergo_lsn
2010-03-23 13:38:54
A:
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>
Ed Gonzalez
2010-03-23 14:25:14
Thanks a lot for example.You understand what I mean. Now we have root element Header='Item'and near checkbox - it's good, but next item Header='SubItem 1' has offset - it's ok too. But checkbox of Header='SubItem 1' has to stay under checkbox root, not has offset.
sergo_lsn
2010-03-23 14:50:57
If you want the TreeViewItems indented, but all of the checkboxes flush left (no matter their indent) then you may need to add some way of knowing your nesting level. I'm unsure of how to accomplish this in Xaml alone.
Ed Gonzalez
2010-03-23 15:31:34
A converter may work, where you take as input an ancestor's margin and move over that much plus some fixed amount. Honestly, I don't know how to solve this off the top of my head.
Ed Gonzalez
2010-03-23 16:32:05
