WrapPanel 不使用 DataTemplate 水平环绕答案

【问题标题】：WrapPanel doesnt wrap horizontal with DataTemplateWrapPanel 不使用 DataTemplate 水平环绕
【发布时间】：2018-04-08 02:07:43
【问题描述】：

我正在通过 DataTemplate 用按钮填充两个 WrapPanel，但由于某种原因它们都垂直对齐，这里到底出了什么问题？我是否设置 Orientation 属性都没有关系。

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>

这就是 WrapPanel 的样子：

添加按钮也总是以某种方式被切断。

【问题讨论】：

WrapPanel 不会安排孩子的孩子。在您的代码中，它只处理 2 个孩子：ItemsControl 和 add-Button。我不太确定容易解决的问题是什么。我让 add-Button 浮动在ScrollViewer 之上，这样你就可以随时按下它。当您需要添加仪表板时，请考虑不断滚动到列表末尾。
我认为 ItemsCONtrol 默认情况下是 StackPanel ，因此是您的问题。将 ItemsControl 的主机面板更改为 WrapPanel。 stackoverflow.com/questions/3131919/…
在滚动查看器上，也看这个stackoverflow.com/a/2028583/3225

标签： c# wpf wrappanel

【解决方案1】：

如果您想将 ItemsControl 的子级水平放置在 WrapPanel 中，您需要通过 ItemsPanelTemplate 告诉 ItemsControl 为其子级使用 WrapPanel：

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

我不知道你想用这个按钮做什么。我的猜测是您希望它位于 ItemsControl 的右侧，我将其对齐到顶部，因为这对我来说更有意义。

【讨论】：

【解决方案2】：

代替

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

你可以使用

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

WrapPanel 被移动内部 ItemsControl 以布局仪表板。

您可以将按钮 somewhere 放在其他地方（与@EdPlunkett 相同，我不知道该放在哪里）：A - 可以让您滚动按钮与仪表板和@ 987654326@ 将保持按钮固定，忽略滚动。

【讨论】：