CODEWITHSUNDEEP
c#wpfwpf-controls
Steoates
Steoates

Reputation: 3168

WPF Custom control guidance - horizontal tree

I've been asked to create a new control for a feature that we need, I'm really struggling on how to best achieve this in a generic and flexible way.

basically the control is very similar to a tree view, where as you would click on a node and then its children would then appear underneath that node.

for this control, they want it like this - when you click on a node, its children are then displayed on the left of parents container and so on.

I've done a quick (super quick) diagram in paint... (please don't laugh, its terrible! :) )

this is how it should look

So you should just start with a single list of items and then progressive through the children of the selected item..

so my question is really, where do you start on something like this.. ? I'm fine with the data side but the XAML is the bit that's really confusing me, it needs to be very generic so it could potential cope with 100's of children panels

any help would be brilliant.

cheers. ste.

Upvotes: 0

Views: 300

Answers (2)

blindmeis
blindmeis

Reputation: 22445

If you are after a usercontrol and known bindings at designtime - it would be easy, but as a custom control - i'm very interested in good answers

enter image description here

like i said this can easy be done if you know the collection bindings and the childlevel. but its maybe a start to get a custom control.

<UserControl>
<UserControl.Resources>
    <Style x:Key="{x:Type ListBox}" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListBoxItem">
                    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <DataTemplate DataType="{x:Type local:TreeItems}">
        <Grid VerticalAlignment="Stretch">
            <Border BorderBrush="Black" BorderThickness="1" >
                <TextBlock Margin="5" Text="{Binding Name}"/>
            </Border>
        </Grid>
    </DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
    <ListBox x:Name="root" ItemsSource="{Binding}"></ListBox>
    <ListBox x:Name="Lvl1" ItemsSource="{Binding ElementName=root, Path=SelectedItem.Childs}" />
    <ListBox x:Name="Lvl2" ItemsSource="{Binding ElementName=Lvl1, Path=SelectedItem.Childs}" />
</StackPanel>
</UserControl>

Upvotes: 1

Nicolas Repiquet
Nicolas Repiquet

Reputation: 9265

This article from Josh Smith is a good starting point.

If all you need is a hierarchical data control, you better use a TreeView and not rolling your own control, as it is probably more complicated than you think (selection, keyboard navigation, etc.)

Upvotes: 0

Related Questions