我正在尝试创建一个水平方向的堆栈面板,其中包含垂直方向的项目堆栈面板。这是我的代码。
首先是 XAML
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
>
<UserControl.Resources>
<DataTemplate x:Key="SquareTemplate">
<Border Margin="2" Background="Blue" Width="80" Height="80"/>
</DataTemplate>
<DataTemplate x:Key="VerticallyTiledItemTemplate">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource SquareTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource VerticallyTiledItemTemplate}"/>
</StackPanel>
</Grid>
</UserControl>
现在代码隐藏......
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public ObservableCollection<ObservableCollection<object>> _myCollection = new ObservableCollection<ObservableCollection<object>>();
public ObservableCollection<ObservableCollection<object>> MyCollection
{
get
{
return _myCollection;
}
set
{
_myCollection = value;
}
}
public MainPage()
{
InitializeComponent();
LayoutRoot.DataContext = MyCollection;
for (int i = 0; i < 2; i++)
{
var innerCollection = new ObservableCollection<object>();
for (int j = 0; j < 3; j++)
{
innerCollection.Add(new object());
}
_myCollection.Add(innerCollection);
}
}
}
}
我希望看到两列三个蓝色方块,但我看到一列六个方块
我无法看到任何关于突然出现错误的代码......
有什么想法吗?
由于
答案 0 :(得分:1)
当您确实要将ItemsControl
中的项目放入StackPanel
时,您已将根ItemsControl
置于StackPanel
。改为:
<Grid x:Name="LayoutRoot">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource VerticallyTiledItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>