按钮应在 ItemsControl.ItemTemplate 中水平对齐

Question

我尝试按照 Rachel Lim 关于“SingleWindow”应用程序的教程进行操作： Click for tutorial .到目前为止一切正常，但是：

按钮是垂直对齐的，我希望它们是水平的！我已经厌倦了以下内容：

<DockPanel DataContext="{StaticResource ResourceKey=MainFrameViewModel}">
    <Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <ItemsControl ItemsSource="{Binding PageViewModels}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Name}"
                            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource  AncestorType= DockPanel}}"
                            CommandParameter="{Binding }"
                            Width="200"
                            />

                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
        </StackPanel>
    </Border>

如您所见，我将 Border 中的所有内容都放入了水平方向的 StackPanel 中，但它不起作用。我已经尝试了堆栈面板的每个位置，但都没有成功！按钮总是垂直的

提前非常感谢！

Answer 1

ItemsControl 在内部使用另一个面板（默认情况下它是一个垂直方向的VirtualizingStackPanel） - 您可以通过ItemsControl.ItemPanel 属性更改它。这就是为什么围绕ItemsControl 的StackPanel 不会影响按钮对齐的原因。您应该使用以下代码：

<DockPanel DataContext="{StaticResource ResourceKey=MainFrameViewModel}">
    <Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
        <ItemsControl ItemsSource="{Binding PageViewModels}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Name}"
                            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource  AncestorType= DockPanel}}"
                            CommandParameter="{Binding }"
                            Width="200" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Border>
</DockPanel>

如果您想了解有关 ItemsControls 的更多信息，我会推荐 WPF 博士的系列博文“ItemsControl：A 到 Z”：http://drwpf.com/blog/itemscontrol-a-to-z/

如果您还有其他问题，请随时提出。