Question

我通过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的样子：
Image of the WrapPanel

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

Answer 1

如果要将ItemsControl的子项水平放入WrapPanel，则需要告诉ItemsControl通过ItemsPanelTemplate为其子项使用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的右边，我把它对齐到顶部，因为这对我来说更有意义。

Answer 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内移动到布局信息中心。

您可以将按钮放在某处其他地方（与@EdPlunkett相同，我不知道放在哪里）：A - 可让您与仪表板一起滚动按钮并且B将保持按钮固定，忽略滚动。

WrapPanel不会使用DataTemplate进行水平包装

2 个答案: