WPF向Treeview底部添加按钮

时间:2011-05-06 08:54:09

标签: wpf treeview dockpanel

这可能看起来像是一个愚蠢的问题,但请跟我一起,因为我对WPF很新,UI很遗憾不是我的主要技能领域,所以我很难理解WPF的概念

我有一个用户控件,其中包含一个停靠面板,然后包含一个树视图,树视图使用分层数据模板进行绑定,该模板运行良好,所有项目和子控件都受到约束,我很高兴粗略的布局结果。但是我想在最后一个绑定的树视图项下添加一个按钮。

基本上这就是我想要实现的目标:enter image description here

目前我在Dock面板中有一个Grid,它有两行,一个用于树视图,一个用于按钮,但显然按钮不是树视图的一部分,我希望它在滚动区域内树视图的一部分,因此它显示为它的一部分,并且仅出现在最终项目之后。

这是我目前的XAML:

<DockPanel>
    <Grid Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition 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>

哦,在你问之前,是的,我基本上是在翻录SharePoint Workflow设计器,这是一个内部工具,出于某种原因,我需要编写一个轻量级的工作流引擎,并在WPF中为它设计一个看起来非常类似于SP。我不做出商业决策,只做一个代码猴;)。

非常感谢

2 个答案:

答案 0 :(得分:3)

您可以提取TreeView的默认模板并对其进行更改。在VS2010或Blend中可轻松完成提取。我已经提取它并在底部添加了一个按钮。我还添加了它所在的StackPanel。

<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>

答案 1 :(得分:2)

使用CompositeCollection,在代码中绑定原始集合有点困难,请参阅我在this answer中提供的示例以获取更多详细信息,只需将CollectionContainer置于顶部即可TreeViewItem在底部包含Button