locked
Treeview in a border doesn't work RRS feed

  • Question

  • I am trying to use a treeview to control navigation in a silverlight app. So I have the following test shell while I work out how to do this;

    <Grid Height="Auto" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Silver" BorderThickness="1" Grid.ColumnSpan="1" Height="Auto" HorizontalAlignment="Left" Margin="0" Name="border1" VerticalAlignment="Top" Width="Auto" IsHitTestVisible="False">
            <sdk:TreeView Height="Auto" Name="treeView1" Width="Auto" HorizontalAlignment="Left">
                <sdk:TreeViewItem Header="Choice1" Selected="TreeViewItem_Selected" />
                <sdk:TreeViewItem Header="Choice 2" Selected="TreeViewItem_Selected_1" />
                    </sdk:TreeView>
        </Border>
        <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="1" Height="100" HorizontalAlignment="Left" Margin="0" Name="border2" VerticalAlignment="Top" Width="200" />
    </Grid>

    i.e. a grid containing two cells, each cell contains a border, the left border contains a treeview, the right border contains selectable content.

    It doesn't work! or rather it does work if I remove the border from around the treeview, i.e.

    <Grid Height="Auto" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
            <sdk:TreeView Height="Auto" Name="treeView1" Width="Auto" HorizontalAlignment="Left">
                <sdk:TreeViewItem Header="Choice1" Selected="TreeViewItem_Selected" />
                <sdk:TreeViewItem Header="Choice 2" Selected="TreeViewItem_Selected_1" />
            </sdk:TreeView>
        <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="1" Height="100" HorizontalAlignment="Left" Margin="0" Name="border2" VerticalAlignment="Top" Width="200" />
    </Grid>
    So what's wrong with that treeview in that border?

    Thanks in advance for any help.

    Edit to add -  I have also found that TreeView will not work if it is inside a nested grid, i.e. it almost behaves as though my treeview must be the top control or in the top control and no lower than that.

    • Edited by J N Brand Tuesday, October 8, 2013 10:44 AM
    Tuesday, October 8, 2013 9:39 AM

Answers

  • Hi,

    According to you code, I created the project and reproduced the issue.  There is a work around: we can set BorderBrush and BorderThickness in Treeview like this:

    <sdk:TreeView Height="Auto" Name="treeView1" Width="Auto" HorizontalAlignment="Left"  Margin="5" BorderBrush="Silver" BorderThickness="1">
    
    

    In addition, I put treeview in a nested grid and it worked well.  You may refer to the code below:

    xaml:

    <Grid Height="Auto" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" Width="Auto" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="70"/>
                <RowDefinition />
                <RowDefinition Height="70"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" />
                <ColumnDefinition />
                <ColumnDefinition Width="150" />
            </Grid.ColumnDefinitions>
    
            <Grid Grid.Column="1" Grid.Row="1" ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
    
    
                <sdk:TreeView Height="Auto" Name="treeView1" Width="Auto" HorizontalAlignment="Left"  Margin="5" BorderBrush="Silver" BorderThickness="1">
                    <sdk:TreeViewItem Header="Choice1" Selected="TreeViewItem_Selected" />
                    <sdk:TreeViewItem Header="Choice2" Selected="TreeViewItem_Selected_1" />
                </sdk:TreeView>
    
    
                <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="1" Height="100" HorizontalAlignment="Left" Margin="0" Name="border2" VerticalAlignment="Top" Width="200" />
    
            </Grid>
    </Grid>
    
    Hope it helps.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 9, 2013 5:31 AM