WP7.1 : TreeeView : ExpanderView - 5 Levels?

Question

We are trying to build a tree view structure ( Its necessary as per project requirement). What we are trying to build is

A

---A1

-------A11

----------A111

--------------------LastItem

--------------------LastItem

-------A12

---A2

B

---B1

--------------------LastItem

---B2

------B21

---------B211

------B22

---B3

C

----LastItem

----LastItem

Searched on stackoverflow most of folks recommended using longlistview as there is no treeview. Expanderview perfectly serves our purpose

but when we try to add items beyond Level4 XAML gives below error :

ArgumentException: Value does not fall within the expected range. at MS.Internal.XcpImports.CheckHResult(UInt32 hr) at MS.Internal.XcpImports.SetValue(IManagedPeerBase obj, DependencyProperty property, Double d) at System.Windows.DependencyObject.SetValue(DependencyProperty property, Double d) at Microsoft.Phone.Controls.ExpanderView.OnSizeChanged(Object sender, SizeChangedEventArgs e) at System.Windows.FrameworkElement.OnSizeChanged(Object sender, SizeChangedEventArgs e) at MS.Internal.JoltHelper.RaiseEvent(IntPtr targ

• ( Checked spelling mistakes, names - everythign is unique ).

Any suggestions will be appreciated!!!!. Is there better control available?

Sample XML ( Look for ERR. If we remove ERR works fine )

    <ScrollViewer>
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10">
        <StackPanel x:Name="sp1">
            <toolkit:ExpanderView x:Name="A1" Header="A1" FontSize="40" >
                <toolkit:ExpanderView.Items>
                    <toolkit:ExpanderView x:Name="A11" Header="A11" FontSize="40" >
                        <toolkit:ExpanderView.Items>
                            <Button FontSize="20" x:Name="A111" Content="A111" />
                            <Button FontSize="20" x:Name="A112" Content="A112"/>
                            <Button FontSize="20" x:Name="A113" Content="A113"/>
                        </toolkit:ExpanderView.Items>
                    </toolkit:ExpanderView>
                    <toolkit:ExpanderView x:Name="A21" Header="A21" FontSize="40" >
                            <toolkit:ExpanderView.Items>
                                <toolkit:ExpanderView x:Name="A211" Header="A212" FontSize="40" >
                                    <toolkit:ExpanderView.Items>
                                        <toolkit:ExpanderView x:Name="ERR" Header="ERR" FontSize="40" >
                                        </toolkit:ExpanderView>
                                    </toolkit:ExpanderView.Items>

                                </toolkit:ExpanderView>
                                <toolkit:ExpanderView x:Name="A212" Header="A212" FontSize="40" >
                                </toolkit:ExpanderView>

                            </toolkit:ExpanderView.Items>
                        </toolkit:ExpanderView>
                </toolkit:ExpanderView.Items>

            </toolkit:ExpanderView>

            <toolkit:ExpanderView x:Name="A2" Header="A2" FontSize="40" >
               <toolkit:ExpanderView.Items>
                    <toolkit:ExpanderView x:Name="A21" Header="A21" FontSize="40" >
                        <toolkit:ExpanderView.Items>
                            <RadioButton x:Name="rdbtn_1" FontSize="20" Content="TEST1"     Margin="0,-5" />
                        </toolkit:ExpanderView.Items>
                    </toolkit:ExpanderView>
                </toolkit:ExpanderView.Items>
            </toolkit:ExpanderView>

            <toolkit:ExpanderView x:Name="A3" Header="A3" FontSize="40" />

                <TextBlock x:Name="txt_result" Margin="0,20,0,0" TextWrapping="Wrap" FontSize="20"/>
        </StackPanel>        
    </Grid>
    </ScrollViewer>
</Grid>

Answer 1

This issue is best mitigated by setting the containing expandview control item width. somehow, the logic in the toolkit library tries to set the width to a negative number, and the framework guards against a negative width.

notice the "Width="200" on the 3rd level expander view in the code below

amended code should work

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->


    <!--ContentPanel - place additional content here-->
    <ScrollViewer>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10">
            <StackPanel x:Name="sp1">
                <toolkit:ExpanderView x:Name="A1" Header="A1" FontSize="40" >
                    <toolkit:ExpanderView.Items>
                        <toolkit:ExpanderView x:Name="A11" Header="A11" FontSize="40" >
                            <toolkit:ExpanderView.Items>
                                <Button FontSize="20" x:Name="A111" Content="A111" />
                                <Button FontSize="20" x:Name="A112" Content="A112"/>
                                <Button FontSize="20" x:Name="A113" Content="A113"/>
                            </toolkit:ExpanderView.Items>
                        </toolkit:ExpanderView>
                        <toolkit:ExpanderView x:Name="A221" Header="A21" FontSize="40" >
                            <toolkit:ExpanderView.Items>
                                <toolkit:ExpanderView x:Name="A211" Header="A212" FontSize="40" Width="200">
                                    <toolkit:ExpanderView.Items>
                                        <toolkit:ExpanderView x:Name="ERR" Header="ERR" FontSize="40" >
                                        </toolkit:ExpanderView>
                                    </toolkit:ExpanderView.Items>

                                </toolkit:ExpanderView>
                                <toolkit:ExpanderView x:Name="A212" Header="A212" FontSize="40" Width="200" >
                                </toolkit:ExpanderView>

                            </toolkit:ExpanderView.Items>
                        </toolkit:ExpanderView>
                    </toolkit:ExpanderView.Items>

                </toolkit:ExpanderView>

                <toolkit:ExpanderView x:Name="A2" Header="A2" FontSize="40" >
                    <toolkit:ExpanderView.Items>
                        <toolkit:ExpanderView x:Name="A21" Header="A21" FontSize="40" >
                            <toolkit:ExpanderView.Items>
                                <RadioButton x:Name="rdbtn_1" FontSize="20" Content="TEST1"     Margin="0,-5" />
                            </toolkit:ExpanderView.Items>
                        </toolkit:ExpanderView>
                    </toolkit:ExpanderView.Items>
                </toolkit:ExpanderView>

                <toolkit:ExpanderView x:Name="A3" Header="A3" FontSize="40" />

                <TextBlock x:Name="txt_result" Margin="0,20,0,0" TextWrapping="Wrap" FontSize="20"/>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Grid>