包裝面板內的 ItemsControl 未使用所有可用空間

Question

我在 itemscontrol 中有很多元素。 這個 itemscontrol 在一個滾動查看器中，它是一個 Wrappanel 的父級。 無論有沒有這個滾動查看器，元素都將堆疊在彼此下方，並且永遠不會使用所有可用空間。 我究竟做錯了什么？ 包裝面板位於網格內。

                                                <TabItem Header="Game Sessions">
                        <Grid Margin="4,5,4,0">
                            <WrapPanel HorizontalAlignment="Stretch" Name="sessionsWrapPanel">
                                <Grid>
                                <ScrollViewer>
                                        <Grid>
                                <ItemsControl Name="listVideosSessions">

                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <materialDesign:Card Width="200" Margin="5,5,5,5">
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="140" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Image Source="{Binding sessionVideoThumbnail}" Height="140" Width="196" Stretch="UniformToFill" />
                                                    <Button Grid.Row="0" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 16 -20">
                                                        <materialDesign:PackIcon Kind="Bike" />
                                                    </Button>
                                                    <StackPanel Grid.Row="1" Margin="8 24 8 0">
                                                        <TextBlock FontWeight="Bold">
                                   <Run Text="{Binding sessionsVideoRecordDate}" />
                                                        </TextBlock>
                                                        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center">
                                   <Run Text="{Binding sessionsVideoRecordtime}" />
                                                        </TextBlock>
                                                    </StackPanel>
                                                    <StackPanel HorizontalAlignment="Right" Grid.Row="2" Orientation="Horizontal" Margin="8">
                                                        <Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0" materialDesign:RippleAssist.IsCentered="True">
                                                            <materialDesign:PackIcon Kind="ShareVariant" />
                                                        </Button>
                                                        <Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0" materialDesign:RippleAssist.IsCentered="True">
                                                            <materialDesign:PackIcon Kind="Heart" />
                                                        </Button>
                                                        <materialDesign:PopupBox Style="{StaticResource MaterialDesignToolPopupBox}" Padding="2 0 2 0">
                                                            <StackPanel>
                                                                <Button Content="More" />
                                                                <Button Content="Options" />
                                                            </StackPanel>
                                                        </materialDesign:PopupBox>
                                                    </StackPanel>
                                                </Grid>
                                            </materialDesign:Card>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                                        </Grid>
                                    </ScrollViewer>
                                </Grid>
                            </WrapPanel>

                        </Grid>
                    </TabItem>

Answer 1

目前尚不清楚您要實現的目標，但使用 WrapPanel 進行項目布局的可滾動 ItemsControl 應如下所示：

<ItemsControl ItemsSource="{Binding ...}">
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <ScrollViewer
                HorizontalScrollBarVisibility="Disabled"
                VerticalScrollBarVisibility="Auto">
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>