Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align button on wpf treeview

Tags:

wpf

treeview

Hi i am looking for a way to align the buttons in my treeview so that it will look like in the same column even if it is in any level. Eg:

Item1 [Button]
 Item2 [Button]
Item3[Button]

i want it to look like

Item1  [Button]
 Item2 [Button]
Item3  [Button]

Any way that i can do this..?

like image 682
biju Avatar asked Aug 14 '10 12:08

biju


1 Answers

First, take a look at this blog entry Horizontal stretch on TreeViewItems. The default ControlTemplate for TreeViewItem does not allow the header content to stretch, which you will need it to do. Use the TreeViewItem Style that the author recommends, but change

<Setter Property="HorizontalContentAlignment" Value="Center" />

to

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

Now you will have a TreeViewItem where the header content stretches across the entire width of the TreeViewItem. To get the TreeViewItem to render with text plus a button, use the ItemTemplate property of the TreeView. If you just want the buttons right-aligned, you could use a DockPanel:

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding ...}">
        <DockPanel LastChildFill="False">
            <TextBlock DockPanel.Dock="Left" Text="{Binding ...}"/>
            <Button DockPanel.Dock="Right" Content="{Binding ...}"/>
        </DockPanel>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

If the contents of the buttons may have variable size and you want them all to have the same width, use a Grid with SharedSizeScope. Set Grid.IsSharedSizeScope="True" in the TreeView and then in your ItemTemplate do something like this:

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding ...}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition SharedSizeGroup="Buttons"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding ...}"/>
            <Button Grid.Column="1" Content="{Binding ...}"/>
        </Grid>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>
like image 185
Quartermeister Avatar answered Nov 07 '22 03:11

Quartermeister