WPF Add Button To Bottom Of Treeview

this is probably going to seem like a daft question but please bear with me as I am very new to WPF, UI is sadly not my main area of skills and so I'm struggling to get my head around the concepts of WPF.

I have a user control which contains a dock panel which then contains a tree view, the tree view is being bound using a Hierarchical Data Template which is working great, all the items and sub controls are being bound and I'm pleased with the rough layout result. However I wanted to add a button under the last bound tree view item.

Basically this is what I am trying to acheive :

At the moment I have a Grid inside the dock panel which has two rows, one for the tree view and one for the button but obviously the button is not part of the tree view, I want it to be within the scrolling area of the tree view so it appears as part of it and only appearing after the final item.

Here is my current XAML:

<DockPanel>
    <Grid Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDef开发者_如何转开发inition Height="*"/>
            <RowDefinition Height="23"/>
        </Grid.RowDefinitions>
    <TreeView ItemsSource="{Binding Path=Steps}" FontFamily="Calibri" FontSize="14" DataContext="{Binding}" Grid.Row="0">
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Margin" Value="20,20,0,0"/>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:StepViewModel}" ItemsSource="{Binding Segments}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type local:SegmentViewModel}">
                <DockPanel HorizontalAlignment="Stretch" >
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <myUserControl:SegmentLayout HorizontalAlignment="Stretch"/>
                        <TextBlock Text="{Binding Value}"/>
                    </StackPanel>
                </DockPanel>
            </DataTemplate>
        </TreeView.Resources>
        </TreeView>
        <Button HorizontalAlignment="Left" Content="Add Step" Name="addStepButton" Height="23" Width="103" Grid.Row="1"/>
    </Grid>

Oh and before you ask, yes I am basically ripping the SharePoint Workflow designer, this is for an internal tool and for some reason I'm required to write a lightweight workflow engine which is done and a designer for it in WPF that looks very similar to the SP one. I don't make business decisions, just a code monkey ;) .

Many Thanks

Paul

You can extract the default template for TreeView and alter it. Extraction is easily done in VS2010 or Blend. I've extracted it and added a button at the bottom. I also added the StackPanel it is in.

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="Template1"
                         TargetType="TreeView">
            <Border BorderBrush="{TemplateBinding Control.BorderBrush}"
                    BorderThickness="{TemplateBinding Control.BorderThickness}"
                    Name="Bd"
                    SnapsToDevicePixels="True">
                <ScrollViewer Background="{TemplateBinding Control.Background}"
                              CanContentScroll="False"
                              Focusable="False"
                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                              Name="_tv_scrollviewer_"
                              Padding="{TemplateBinding Control.Padding}"
                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                    <StackPanel FlowDirection="LeftToRight">
                        <ItemsPresenter />
                        <Button>My button</Button>
                    </StackPanel>

                </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsEnabled"
                         Value="False">
                    <Setter Property="Border.Background"
                            TargetName="Bd"
                            Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                </Trigger>
                <Trigger Property="VirtualizingStackPanel.IsVirtualizing"
                         Value="True">
                    <Setter Property="ScrollViewer.CanContentScroll"
                            TargetName="_tv_scrollviewer_"
                            Value="True" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <TreeView Template="{StaticResource Template1}">
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
            <TreeViewItem>fgbhbgfdshgsfde</TreeViewItem>
        </TreeView>
    </Grid>
</Window>

Use a CompositeCollection, binding the original collection in code is a bit difficult, see the example i give in this answer for some more detail, just put the CollectionContainer on top and a TreeViewItem including a Button at the bottom.