Question

我正在创建一些看起来像下面图像的东西

我有理由相信我在XAML的正确轨道上，但我正在努力让图像旋转，以便它们从左向右流动。理想情况下，我想使用WrapPanel，但StackPanel也会这样做。

这就是我现在所处的位置

这是我此时的XAML

<UserControl x:Class="SAFEPanel.LatestDeal.LatestDeal"
         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" 
         xmlns:xpanels="clr-namespace:SAFEPanel.XPanel"
         mc:Ignorable="d" Width="575" Height="239">
<Grid>
    <ItemsControl ItemsSource="{Binding Deals}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80*"/>
                            <ColumnDefinition Width="30*"/>
                            <ColumnDefinition Width="30*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Label x:Name="CompanyName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                            <Label x:Name="CandidateName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                            <Label x:Name="Startdate" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Startdate}" Width="130" Height="32"/>
                            <Label x:Name="Fees" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Fees}" Width="130" Height="32"/>
                        </StackPanel>
                        <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Label x:Name="TitleCompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="Company" Width="130" Height="32"/>
                            <Label x:Name="TitleCandidateName" HorizontalAlignment="Left" Content="Candidate" Width="130" Height="32"/>
                            <Label x:Name="TitleStartdate" HorizontalAlignment="Left" Content="Start" Width="130" Height="32"/>
                            <Label x:Name="TitleFees" HorizontalAlignment="Left" Content="Fees" Width="130" Height="32"/>
                        </StackPanel>
                        <WrapPanel  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">

                            <ItemsControl ItemsSource="{Binding Contributors}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">
                                            <Image Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110"/>
                                            <Label HorizontalAlignment="Center"  Grid.ColumnSpan="2" HorizontalContentAlignment="Left" Content="{Binding ContributorText}" Width="130" Height="32"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

                        </WrapPanel>

                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Answer 1

正如Massimiliano Kraus建议你应该使用WrapPanel作为内部ItemsControl的ItemsPanel，即你不要将整个内部ItemsControl本身放在WrapPanel中，而是使用WrapPanel作为其ItemsPanel，以便每个中都有StackPanels。 ItemTemplates将被添加到WrapPanel并从左到右包裹：

    <ItemsControl ItemsSource="{Binding Deals}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80*"/>
                            <ColumnDefinition Width="30*"/>
                            <ColumnDefinition Width="30*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            ...
                        </StackPanel>
                        <ItemsControl ItemsSource="{Binding Contributors}" Grid.Column="0">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <Image Source="pic.png" MaxHeight="110" MaxWidth="110"/>
                                        <Label HorizontalAlignment="Center"  Grid.ColumnSpan="2" HorizontalContentAlignment="Left" Content="ContributorText" Width="130" Height="32"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

C＃WPF XAML旋转记录列表

1 个答案: