带嵌套列表的ItemsControl布局-自身下的每个包装器

时间:2018-06-20 04:22:27

标签: wpf stackpanel dockpanel

我的目标是将第三包装纸放在第二包装纸下面。对于这种布局,我使用了码头面板+堆栈面板的组合。

  • 第一个包装器是标签的堆栈面板
  • 第二个包装器是将控件面板作为模板的项目控件(成员列表)
  • 第三个包装器是以项面板为模板(每个成员的地址的嵌套列表)的项目控件。

Layout

查看

<Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
            <DockPanel>
                <StackPanel DockPanel.Dock="Top"  Orientation="Horizontal">
                    <Label Style="{StaticResource MinWidthLeft}" Content="Typ Adresu"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Imie"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Nazwisko"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Nazwa Firmy"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="NIP"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="REGON"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Ulica"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Adres"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Kod pocztowy"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Miasto"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Kraj"/>
                    <Label Style="{StaticResource MinWidthLeft}" Content="Dodatkowe informacje"/>
                </StackPanel>

                <ItemsControl ItemsSource = "{Binding listContractorAddAddress}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
                                <Button Style="{StaticResource MinWidth}" Content="Dodaj Adres" Command="{Binding Path=AddAddress}"/>
                                <TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Login}"/>
                                <TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Email}"/>

                                <ItemsControl ItemsSource = "{Binding Addresses}" >
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
                                                <Button Style="{StaticResource MinWidth}" Content="Edytuj" Command="{Binding Path=EditAddress}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.TypAdresu}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Imie}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Nazwisko}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NazwaFirmy}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NIP}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.REGON}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Ulica}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Adres}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.KodPocztowy}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Miasto}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Kraj}"/>
                                                <TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.DodatkoweInformacje}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <!--<DockPanel/>-->
                                            <StackPanel DockPanel.Dock="Top" Orientation="Vertical" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ItemsControl>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <!--<DockPanel/>-->
                            <StackPanel DockPanel.Dock="Top"  Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </DockPanel>
        </ScrollViewer>
    </Grid>

我花了很多时间,尝试使用:

  • 仅水平/垂直方向的堆栈面板(我将 与使用船坞面板的布局相同)。
  • 仅网格,但是这对我有用-灾难和时间浪费 (我很难说自己在做什么错,每一行都是 右侧而不是一个在另一个下方)

谢谢!

1 个答案:

答案 0 :(得分:0)

我不得不重新构建所有内容并重新考虑网格模式:

<Grid IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="A" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
        <Label Style="{StaticResource MinWidthLeft}" Content="Typ Adresu"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Imie"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Nazwisko"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Nazwa Firmy"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="NIP"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="REGON"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Ulica"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Adres"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Kod pocztowy"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Miasto"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Kraj"/>
        <Label Style="{StaticResource MinWidthLeft}" Content="Dodatkowe informacje"/>
    </StackPanel>

    <ItemsControl Grid.Row="1" Grid.Column="0" ItemsSource="{Binding listContractorAddAddress}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Row="0" Orientation="Horizontal">
                        <Button Style="{StaticResource MinWidth}" Content="Dodaj Adres" Command="{Binding Path=AddAddress}"/>
                        <TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Login}"/>
                        <TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Email}"/>
                    </StackPanel>
                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <ItemsControl ItemsSource="{Binding Addresses}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Button Grid.Column="0" Style="{StaticResource MinWidth}" Content="Edytuj" Command="{Binding Path=EditAddress}"/>
                                        <TextBlock Grid.Column="1" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.TypAdresu}"/>
                                        <TextBlock Grid.Column="2" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Imie}"/>
                                        <TextBlock Grid.Column="3" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Nazwisko}"/>
                                        <TextBlock Grid.Column="4" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NazwaFirmy}"/>
                                        <TextBlock Grid.Column="5" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NIP}"/>
                                        <TextBlock Grid.Column="6" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.REGON}"/>
                                        <TextBlock Grid.Column="7" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Ulica}"/>
                                        <TextBlock Grid.Column="8" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Adres}"/>
                                        <TextBlock Grid.Column="9" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.KodPocztowy}"/>
                                        <TextBlock Grid.Column="10" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Miasto}"/>
                                        <TextBlock Grid.Column="11" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Kraj}"/>
                                        <TextBlock Grid.Column="12" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.DodatkoweInformacje}"/>
                                    </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

HTML + CSS对我来说比xaml更直观。 乌夫那是疯狂的5小时:) Foggy Finder感谢您的有趣。

this is a template that helped me solve the problem

enter image description here