CODEWITHSUNDEEP
c#wpf
GrayFox
GrayFox

Reputation: 1089

Buttons should align horizontal in ItemsControl.ItemTemplate

I try to follow Rachel Lim's tutorial about a 'SingleWindow'-application: Click for tutorial . Everything works fine so far but:

The Buttons are aligned vertically and I want them to be horizontal! I have tired the following:

<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>

As you can see, I put all things from the Border into a StackPanel with horizontal orientation but it doesn't work. I have tried every position for the stackpanel without success! The buttons are always vertical

Much thanks in advance!

Upvotes: 1

Views: 567

Answers (1)

feO2x
feO2x

Reputation: 5728

An ItemsControl uses another panel inside (by default it's a VirtualizingStackPanel with vertical orientation) - you can change this via the ItemsControl.ItemPanel property. That's why the StackPanel that surrounds the ItemsControl does not affect the alignment of your buttons. You should use the following code:

<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>

If you want to learn more about ItemsControls, I would recommend the great series of blog posts "ItemsControl: A to Z" by Dr. WPF: http://drwpf.com/blog/itemscontrol-a-to-z/

If you have any further questions, please feel free to ask.

Upvotes: 3

Related Questions