XAML 如何使容器溢出?

mi7gmzs6  于 2023-04-27  发布在  其他
关注(0)|答案(1)|浏览(121)

如果stackpanel不适合应用程序,如何垂直堆叠它?

  • 下面的代码与全屏应用程序工作正常
  • 与调整大小,它不适合由于固定的宽度
  • 随着调整大小,如何垂直堆叠。即不适合堆叠面板应该溢出容器,即堆叠面板应该垂直堆叠和滚动条出现如第三个图像所示?
<ScrollViewer VerticalScrollBarVisibility="Auto"  HorizontalScrollBarVisibility="Disabled">
        <Grid HorizontalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Background="Red"/>
            <StackPanel Grid.Column="2" Background="Red"/>
            <StackPanel Grid.Column="4" Background="Red"/>
            <StackPanel Grid.Column="6" Background="Red"/>
            <StackPanel Grid.Column="8" Background="Red"/>
        </Grid>
       
    </ScrollViewer>

全屏输出:

将应用大小调整为小的输出:

**如何实现以下结果?**scorll appaers

向下滚动:

z4bn682m

z4bn682m1#

这是一个使用WrapPanel的示例。布局取决于实际需求。

<ScrollViewer HorizontalScrollBarVisibility="Disabled"
              VerticalScrollBarVisibility="Auto">
    <WrapPanel Margin="0,0,-15,-10">
        <WrapPanel.Resources>
            <Style x:Key="WrapPanelItem" TargetType="{x:Type ContentControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Border Background="White">
                                <Grid Width="200"
                                      Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}, Path=ActualHeight}"
                                      Margin="0,0,15,10"
                                      Background="Red">
                                    <ContentPresenter/>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </WrapPanel.Resources>

        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
        <ContentControl Style="{StaticResource WrapPanelItem}">
            <StackPanel/>
        </ContentControl>
    </WrapPanel>
</ScrollViewer>

相关问题