Question

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! 🙂 )

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.

Answer 1

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

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>