Question

我正在使用dockpanel来显示从itemsource读取的按钮列表，并希望水平显示它们，但它会垂直显示它们。

我使用以下代码：

<DockPanel Name="DockPanel2"  Grid.Row="1"   Visibility="Visible">
            <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="260,50,0,0">
                <ItemsControl ItemsSource="{Binding PageViewModels}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Foreground="MidnightBlue"
                            Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                                CommandParameter="{Binding }"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
           <ContentControl  Content="{Binding CurrentPageViewModel}"/>
        </DockPanel>

如果我使用以下代码（将按钮作为静态列表，我可以以水平方式显示列表。

 <DockPanel Name="DockPanel2"  Grid.Row="1"   Visibility="Visible">
            <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="260,50,0,0">
                <Button Content="Button 1" Margin="2" />
                <Button Content="Button 2" Margin="2" />
                <Button Content="Button 3" Margin="2" />
                <Button Content="Button 4" Margin="2" />
                <Button Content="Button 5" Margin="2" />
            </StackPanel>

            <ContentControl  Content="{Binding CurrentPageViewModel}" />
        </DockPanel>

有人能告诉我哪里出错了。

谢谢， Ť

Answer 1

你应该使用ItemControl的属性ItemsPanelTemplate并在其中放置一个StackPanel。

如下所示：

<DockPanel Name="DockPanel2"  Grid.Row="1"   Visibility="Visible">
            <ItemsControl ItemsSource="{Binding PageViewModels}"
                          DockPanel.Dock="Top">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Foreground="MidnightBlue"
                        Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding }"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
       <ContentControl  Content="{Binding CurrentPageViewModel}"/>
    </DockPanel>

请注意，我已在stackPanel之后删除了dockPanel。

Answer 2

问题在于ItemsControl不会在StackPanel中生成单独的项目，它会在其自己的“面板”中生成项目，因此您必须使用StackPanel ItemsPanel。

一旦我自己尝试过，我会为您提供一些示例代码。

编辑：我只是讨厌那些只是采取其他答案并将其作为自己使用的人，我想我不需要添加示例代码......

Answer 3

您需要将ItemsControl的ItemsPanelTemplate指定为水平方向的StackPanel。你拥有的只是一个托管ItemsControl的StackPanel - 它是水平定位的事实在这里没有任何结果。所以试试这个：

<ItemsControl ItemsSource="{Binding PageViewModels}">
        <ItemsControl.ItemPanelTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
       </ItemsControl.ItemPanelTemplate>

       <ItemsControl.ItemTemplate ... your existing xaml >
</ItemsControl>

Answer 4

您必须将StackPanel设置为ItemsPanel的{{1}}。

示例：

ItemsControl

Answer 5

我发现您可以只创建要添加到列表中的元素，然后使用VirtualizingStackPanel。

我在foreach循环中使用它来将枚举变成按钮列表。

foreach (MyEnum myenum in(MyEnum[])Enum.GetValues(typeof(MyEnum))){
    Button btn = new Button();
        btn.Name = "This Is Optional";
        btn.Content = "Content";
        btn.Click += CustomCommand;
        btn.CommandParameter = myenum;
        buttonlist.Add(temp);
}

我将按钮列表存储在ObservableCollection中。

public ObservableCollection<Button> buttonlist = new ObservableCollection<Button>();

这是我可以基于Enum值执行命令的基本方式。

private void CustomCommand(object sender, RoutedEventArgs e)
{
    MyEnum parameter = (MyEnum)(sender as Button).CommandParameter;
}

然后使用VirtualizingStackPanel将它们全部添加到您的视图中。

<ItemsControl ItemsSource="{Binding buttonlist}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

只需共享它，就好像它是动态的一样，您可以将其用于任何WPF元素，甚至可以创建一个混合对象List，而VirtualizingStackPanel会照顾它。

在dockpanel中水平排列动态按钮列表

5 个答案: