WPF CheckBox to the left of the TreeView

How to insert开发者_开发百科 checkbox to the left of the treeviewitem (expander), so it was the same item.

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>

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