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

标签： c#wpfxaml

Answer 1

只需添加VerticalAlignment="Top"到您的<Border>标签。