WrapPanel doesnt wrap horizontal with DataTemplate

Question

I'm filling a two WrapPanel with Buttons via DataTemplate but they all align vertically for some reason, what exactly is wrong here? It doesn't matter if I set the Orientation property or not.

XAML:

<UserControl x:Class="DashboardClient.View.DashboardView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             Width="940" Height="640">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Column="0"  Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}">
            <ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5">
                <WrapPanel>
                    <ItemsControl ItemsSource="{Binding Dashboards}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}">
                                    <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
                                </Button>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" />
                </WrapPanel>
            </ScrollViewer>
            <StackPanel Height="100" Margin="5">
                <Label>Dashboardname:</Label>
                <TextBox Text="{Binding SelectedDashboard.Name}" />
                <RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" />
                <Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" />
            </StackPanel>
        </DockPanel>
        <StackPanel Grid.Column="1" Margin="0">
            <ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}">
                <WrapPanel>
                    <ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10">
                                    <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
                                </Button>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" />
                </WrapPanel>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</UserControl>

This is what the WrapPanel looks like:
Image of the WrapPanel

The Add Button is always cut off somehow, too.

`WrapPanel` will not arrange children of children. In your code it only deal with 2 children: `ItemsControl` and add-`Button`. I am not quite sure what will the easy fix. I'd made add-`Button` floating on top of `ScrollViewer` so you can at any time press it. Think of constant scrolling to the end of list when you need to add a dashboard. — Sinatr, Oct 26 '17 at 15:51
I think ItemsCOntrol is by default a StackPanel and thus your problem. Change the hositng panel of the ItemsControl to your WrapPanel. https://stackoverflow.com/questions/3131919/wrappanel-as-itempanel-for-itemscontrol — kenny, Oct 26 '17 at 15:56
On the scroll viewer, look at this too https://stackoverflow.com/a/2028583/3225 — kenny, Oct 26 '17 at 17:30

score 3 · Accepted Answer · answered Oct 26 '17 at 15:57

If you want to put the children of the ItemsControl horizontally in a WrapPanel, you need to tell the ItemsControl to use a WrapPanel for its children via an ItemsPanelTemplate:

<WrapPanel Orientation="Horizontal">
    <ItemsControl ItemsSource="{Binding Dashboards}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button 
                    Width="120" 
                    Height="120" 
                    Margin="5" 
                    Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                    CommandParameter="{Binding}"
                    >
                    <TextBlock 
                        TextWrapping="Wrap" 
                        HorizontalAlignment="Center" 
                        Text="{Binding Name}" 
                        />
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    <Button 
        Width="120" 
        Height="120" 
        Margin="5" 
        VerticalAlignment="Top"
        Command="{Binding DashboardAddCommand}" 
        Content="+" 
        FontSize="100" 
        />
</WrapPanel>

I don't know what you want to do with the button. My guess is that you want it to the right of the ItemsControl, and I aligned it to the top because that makes more sense to me.

Sinatr · Answer 2 · 2017-10-26T16:07:26.527

Instead of

<ScrollViewer>
    <WrapPanel>
        <ItemsControl ItemsSource="{Binding Dashboards}">
            <ItemsControl.ItemTemplate ... />
        </ItemsControl>
        <Button Content="+" ... />
    </WrapPanel>
</ScrollViewer>

You can use

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding Dashboards}">
        <ItemsControl.ItemTemplate ... />
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    <Button Content="+" ... /> <!-- A -->
</ScrollViewer>
<Button Content="+" ... /> <!-- B -->

WrapPanel is moved inside ItemsControl to layout dashboards.

You can put button somewhere else (same as @EdPlunkett I don't have a good idea where to put it): A - will let you to scroll button together with dashboards and B will keep button fixed, disregards scrolling.

WrapPanel doesnt wrap horizontal with DataTemplate

2 Answers2