Arrange dynamic list of buttons horizontally in dockpanel

stackpanel
dockpanel vs stackpanel
wpf stackpanel vertical content alignment
wpf margin
wpf stackpanel fill
xaml grid of buttons
wpf dockpanel fill
wpf grid

I am using dockpanel to display a list of buttons that are read from an itemsource and want to display them horizontally but it displays them vertically.

I am using the following code:

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

If I use the following code (taking buttons as static list I am able to display the list in a horizontal fashion.

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

Can someone tell me where am I going wrong.

Thanks, T

You should use the property ItemsPanelTemplate of the ItemControl and put a StackPanel inside it.

Something like the following:

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

Note, that I have removed the stackPanel just after the dockPanel.

Pro Dynamic .NET 4.0 Applications: Data-Driven Programming for the , Margin="10">Save</Button> <Button Height="23" Name="button3" Width="75" </StackPanel> </Grid> </Window> The image shows a list of buttons arranged together. In fact, grouping A StackPanel doesn't just position elements vertically . I have a DockPanel and it contains a ScrollViewer [ center aligned ] and a button on left and right . My xaml is like <DockPanel LastChildFill="True"> <;Button VerticalAlignment="Stret

You need to specify the ItemsPanelTemplate of the ItemsControl to be a StackPanel in horizontal orientation. What you have is just a StackPanel that hosts an ItemsControl - the fact that it is horizontally orientated is of no conseqeuence here. So try this:

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

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

How to: Horizontally or Vertically Align Content in a StackPanel , When a user selects a value in any of the ListBox elements, the associated property of the StackPanel and its child Button elements change. DockPanel defines an area to arrange child elements relative to each other, either horizontally or vertically. With DockPanel you can easily dock child elements to top, bottom, right, left and center using the Dock property.

You have to set the StackPanel as ItemsPanel of ItemsControl.

Example:

    <ItemsControl ....>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation ="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button .... />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Programming WPF: Building Windows UI with Windows Presentation , WrapPanel <WrapPanel Background="Beige"> <Button>One</Button> <Button> Two</Button> Setting this to Vertical will arrange the children in a sequence of vertical stacks, a layout style very similar to Windows Explorer's “List” view. DockPanel is useful for describing the overall layout of a simple user interface. Arrange objects into equal, or uniform, grid regions. This panel is great for arranging a list of images. (Available only for WPF projects.) Canvas. Arrange objects any way you want. When users run your app, these elements will have fixed positions on the screen. StackPanel. Arrange objects in a single line horizontally or vertically. WrapPanel

The problem is that an ItemsControl does not generate separate items in the StackPanel, it generates the items in it's own "Panel", therefore you will have to use a StackPanel for the ItemsPanel.

I will provide you with some example code once I've tried it myself.

EDIT: I just hate you guys who simply take other answers and use them as their own, I guess I don't need to add example code...

The StackPanel control, A thorough description of the WPF StackPanel and its most important features. Height="160" Width="300"> <StackPanel Orientation="Horizontal"> <Button� The position of child elements of a DockPanel on the screen is determined by the Dock property of the respective child elements and the relative order of those child elements under the DockPanel. Therefore, a set of child elements with the same Dock property values can be positioned differently on the screen depending on the order of these

I found you can just create the element you want add it to a list and then use a VirtualizingStackPanel.

I use this in a foreach loop to turn my enums into a button list.

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);
}

I store my button list in an ObservableCollection.

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

This is the basic way I can execute the command based on the Enum value.

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

And Then add them all to your view using a VirtualizingStackPanel.

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

Just sharing this as it seems dynamic and you can use it for any WPF element you can even make a mixed object List and the VirtualizingStackPanel will take care of it.

The DockPanel control, That is also why you will see the Right button take up a bit more space than the Left button - the extra character in the text simply requires more pixels. The last� The solution is a work around, but looks nice and, what is more important, allows you to order this pseudo radio buttons even in a form of a perpendicular kitten. Message 4 of 7 12,725 Views

WPF Layout: Horizontal and Vertical Alignment, This article focuses on the vertical and horizontal alignment of elements. The code listed in Listing 8 places four Button elements on a StackPanel and sets the property to Left, Center, Right and Stretch dynamically. Filter List Filter Table Filter Elements Filter Dropdown Sort List Sort Table Horizontal Button Groups. Group a series of buttons together on a single line in a

Silverlight - Dynamic Layout, Silverlight - Dynamic Layout - The Canvas is the least interesting of all of the StackPanel − which arranges elements in a vertical or horizontal stack. child elements can be arranged in a single line either horizontally or vertically Given below is the XAML implementation in which Buttons are created inside a StackPanel� DockPanel. DockPanel defines an area to arrange child elements relative to each other, either horizontally or vertically. With DockPanel, you can easily dock child elements to top, bottom, right, left, and center with Dock property. 4: CanvasPanel

StackPanel, This is very useful to create any kinds of lists. Stack Items horizontally < StackPanel Margin="8" Orientation="Horizontal"> <Button MinWidth="93">OK</ Button> Can you tell me how to align control in centre in stackpanel Superb for dynamic size changing functionality of a User Interface Controls� The code listed in Listing 2 creates a StackPanel and adds four Button controls and sets their HorizontalAlignment property to Left, Center, Right and Stretch dynamically. The output looks as in exactly Figure 1 .

Comments
  • You don't need the Visibility="Visible" part btw, as it is the default value
  • This works. Except that <ItemsControl.ItemsPanelTemplate> need to be changed to <ItemsPanelTemplate> else it throws an error. Many thanks for the answer.