我是Windows Phone 8开发的初学者。我已经在我的VS 2012中为Windows Phone安装了 Telerik试用套件。
待办事项： 我想要做的是显示一个项目列表，当用户点击以前列表的项目时，每个项目可以展开以显示另一个项目列表。
我做了什么： 我使用了RadDataBoundListBox和RadExpanderControl。其XAML代码附加在文件 - “MainPage.XAML”中。由于我使用了自己的ViewModel，我使用了一个名为“SampleData1.XAML”的示例数据文件，因此我可以在我的VS 2012的设计器选项卡中看到它的外观。它在设计器选项卡中看起来很完美，因为我在RadExpanderControl的IsExpanded属性的值（true或false）。
问题： 当我运行应用程序时，外部RadDataBoundListBox（名为myListBox）整齐地获取其内容并正确显示。但是当我点击它的任何一个项目（即myListBox项目）时，内部RadDataBoundListBox（名为subCategoryListBox）正确获取其内容但是在myListBox后面，导致两个列表框项目重叠。
它应该做什么： 在单击任何myListBox项时，subCategoryListBox应该在降低其他myListBox项后可用的空间中打开。
P.S：RadDataBoundListBox（即myListBox和subCategoryListBox）中的项目都是以编程方式加载的。
MainPage.XAML是：
<phone:Panorama Title="oscommerce">
<phone:Panorama.Background>
<ImageBrush ImageSource="/OSCommerce;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem Name="firstPanoramaItem" Header="Categories" Loaded="categories_Loaded">
<phone:PanoramaItem.Resources>
<helpers:StringToUpperConverter x:Key="StringToUpperConverter"/>
<ControlTemplate TargetType="telerikPrimitives:RadExpanderControl" x:Key="CustomAnimatedIndicatorExpanderTemplate">
<Border
HorizontalAlignment="Left"
VerticalAlignment="Top"
x:Name="PART_LayoutRoot"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Margin="0,0,0,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandedStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" To="Expanded">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="180">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
x:Name="PART_ExpandAnimation"
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="{Binding ElementName=PART_ExpandableContentPresenter, Path=DesiredSize.Height}"> <!--my addition-->
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="1">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" To="Collapsed">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="-100">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="0"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="0"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="-100"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="180">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="{Binding ElementName=PART_ExpandableContentPresenter, Path=DesiredSize.Height}"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Height="300">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="PART_ExpanderHeaderLayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentPresenter
x:Name="PART_MainContentPresenter"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" Margin="0,0,0,0"
/>
<ContentPresenter
Grid.Column="1"
Content="{TemplateBinding AnimatedIndicatorContent}"
ContentTemplate="{TemplateBinding AnimatedIndicatorContentTemplate}"
x:Name="PART_AnimatedIndicator"
RenderTransformOrigin="0.5, 0.47" Margin="0,0,0,0">
<ContentPresenter.RenderTransform>
<RotateTransform x:Name="AnimatedIndicatorRotate"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<Canvas
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
x:Name="PART_ExpandableContentHolder"
Height="Auto"
Width="396"
Background="{TemplateBinding Background}">
<ContentPresenter
Visibility="Collapsed"
x:Name="PART_ExpandableContentPresenter"
ContentTemplate="{TemplateBinding ExpandableContentTemplate}"
Content="{TemplateBinding ExpandableContent}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="PART_ExpandableContentTranslate"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</phone:PanoramaItem.Resources>
<telerikPrimitives:RadDataBoundListBox Name="myListBox" ItemsSource="{Binding Items}" Margin="12,3,12,0" SelectionChanged="myListBox_Tap">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<telerikPrimitives:RadExpanderControl ExpandableContent="{Binding}" Content="{Binding}" BorderThickness="0, 3, 0, 0" BorderBrush="{StaticResource PhoneSubtleBrush}" Template="{StaticResource CustomAnimatedIndicatorExpanderTemplate}" Height="Auto">
<telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
<DataTemplate>
<Image Margin="0,6,0,15" Source="Images/ExpanderArrow.png" Width="55"/>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
<telerikPrimitives:RadExpanderControl.ContentTemplate>
<DataTemplate>
<Grid Height="100" Width="Auto" Margin="0,0,0,0">
<StackPanel Orientation="Horizontal">
<Canvas Height="80" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Background="PaleGreen">
<Image Height="60" Width="60" Canvas.Left="10" Canvas.Top="10" Source="{Binding Image}" Stretch="UniformToFill"/>
</Canvas>
<StackPanel>
<TextBlock Margin="20,12,0,0" Text="{Binding Title, Converter={StaticResource StringToUpperConverter}}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="Segoe WP" FontWeight="Bold" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="34"/>
<TextBlock Margin="20,0,0,0" Text="{Binding DateAdded}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="Segoe WP" FontWeight="Normal" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="42"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ContentTemplate>
<telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
<DataTemplate>
<Grid Margin="40,0,0,0" Height="Auto">
<telerikPrimitives:RadDataBoundListBox Name="subCategoryListBox" ItemsSource="{Binding SubItems}" IsHitTestVisible="False">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal" Height="100">
<Canvas Height="80" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,12,0,0" Background="PaleGreen">
<Image Height="60" Width="60" Canvas.Left="10" Canvas.Top="10" Source="{Binding Image}" Stretch="UniformToFill"/>
</Canvas>
<StackPanel>
<TextBlock Margin="20,12,0,0" Text="{Binding Title, Converter={StaticResource StringToUpperConverter}}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="Segoe WP" FontWeight="Bold" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="34"/>
<TextBlock Margin="20,0,0,0" Text="{Binding DateAdded}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="Segoe WP" FontWeight="Normal" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="42"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
</Grid>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
</telerikPrimitives:RadExpanderControl>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
</phone:PanoramaItem>
</phone:Panorama>
答案 0 :(得分：0)
我现在有了解决方案而且非常简单。在另一个ListBox的ItemTemplate中添加一个ListBox，如下所示......（您可以在XAML中复制/粘贴下面的代码。）
<ListBox x:Name="myListBox" Margin="0,-28,-22,0" ItemsSource="{Binding Items}" SelectionChanged="myListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="Auto" VerticalAlignment="Bottom" Margin="0,0,0,0">
<Border Height="3" Background="White" Margin="0,0,0,5"/>
<StackPanel Orientation="Horizontal" Margin="12,0,0,10" Height="100">
<Canvas Width="100" Height="100" Background="#FFFFC702">
<Image Width="80" Height="80" Source="{Binding Image}" Stretch="UniformToFill" Canvas.Top="10" Canvas.Left="10"/>
</Canvas>
<StackPanel Width="309" Margin="8,0,0,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding DateAdded}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<ListBox Name="innerListBox" Width="367" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="60,0,0,0" Height="Auto" ItemsSource="{Binding SubItems}" Visibility="Collapsed" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="innerListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="100" Margin="0,0,0,10" VerticalAlignment="Bottom">
<Canvas Width="100" Height="100" Background="#FFFFC702">
<Image Width="80" Height="80" Source="{Binding Image}" Stretch="UniformToFill" Canvas.Top="10" Canvas.Left="10"/>
</Canvas>
<StackPanel Width="260" Margin="8,-7,0,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding DateAdded}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
现在要访问innerListBox（存在于myListBox中），请使用以下C＃代码。
var _container = myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.SelectedItem);
var _children = AllChildren(_container);
ListBox _control = (ListBox)_children.Find(x => x.Name.Equals("innerListBox"));
AllChildren（）方法的定义在下面你还需要添加C＃代码：
private List<Control> AllChildren(DependencyObject parent)
{
List<Control> _List = new List<Control>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var _child = VisualTreeHelper.GetChild(parent, i);
if (_child is Control)
_List.Add(_child as Control);
_List.AddRange(AllChildren(_child));
}
return _List;
}