WPF布局的Trello板

Question

我试图在WPF上为我的课程项目做一个Trello的克隆。

我的板子的布局有一些问题。 例如 我希望我的列表可以滚动其内容，高度取决于内容。如此 但现在我的清单正随着最大容器的高度而不断延伸。如此 这是我的部分代码，有注释，它修复了第一个错误，但又产生了另一个错误。卷轴不灵

也许有人能帮我。谅谅

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0 0 0 5">
                <ItemsControl ItemsSource="{Binding CurrentBoard.Lists}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 0 0 20"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>

                            <!--<Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>

                                <Grid Grid.Row="0">-->
                            <Border CornerRadius="3" Width="272" MinHeight="78" Background="#ebecf0" Margin="8 0 4 0">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="38" />
                                    </Grid.RowDefinitions>

                                    <Grid Grid.Row="0">
                                        <TextBlock Text="{Binding Title}" Foreground="#172b4d" FontSize="16" 
                                                    FontWeight="DemiBold" TextWrapping="Wrap" Padding="8 10"/>
                                    </Grid>

                                    <Grid Grid.Row="1">
                                        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                                            <ItemsControl ItemsSource="{Binding Cards}">
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <StackPanel Orientation="Vertical" VerticalAlignment="Top" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Border CornerRadius="3" MinHeight="44" Background="White" Margin="8 0 8 8" Padding="8 6 8 2">
                                                            <Border.Effect>
                                                                <DropShadowEffect BlurRadius="1.5" Color="LightGray" Direction="-90" RenderingBias="Quality" ShadowDepth="1"/>
                                                            </Border.Effect>
                                                            <Grid>
                                                                <Grid.RowDefinitions>
                                                                    <RowDefinition Height="auto"/>
                                                                </Grid.RowDefinitions>

                                                                <Grid Grid.Row="0">
                                                                    <TextBlock Text="{Binding Title}" Foreground="#172b4d" FontSize="14" Margin="0 0 0 4"/>
                                                                </Grid>
                                                            </Grid>
                                                        </Border>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </ScrollViewer>
                                    </Grid>

                                    <Grid Grid.Row="2">
                                        <Button
                                            Style="{StaticResource MaterialDesignOutlinedButton}"
                                            ToolTip="MaterialDesignOutlinedButton"
                                            Foreground="#5e6c84"
                                            >
                                            + Add another card
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Border>
                            <!--</Grid>
                            </Grid>-->
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

Answer 1

只要添加 VerticalAlignment="Top" 对你的 <Border> 标签。