wpfstackpanel

WPF StackPanel - how to push items off bottom


I have a StackPanel spanning the entire screen vertically in a grid, and the panel's VerticalAlignment option set to Bottom. When I add items to the panel in code, their positions start at the bottom, and move up when I add more. This is desired. However, what is not desired is that after the screen is filled vertically with items, adding more pushes them off the top of the screen. My desire is to have additional items fall off the bottom; I don't care if they are not visible; I just don't want the topmost items to disappear.

Any tricks you might know of to help me through this? Thank you in advance.


Solution

  • My desire is to have additional items fall off the bottom

    You need to wrap the StackPanel in another container that allows the StackPanel itself to grow as much as it wants, in a way that makes the StackPanel appear to expand from the bottom, but in reality expand from the top so that when it exceeds available space, the excess is removed from the bottom instead of the top.

    The Grid control will do exactly that. For example:

    <Window x:Class="TestSO67169225StackPanelFromBottom.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
      <Window.Resources>
        <Style TargetType="TextBlock">
          <Setter Property="FontSize" Value="36"/>
        </Style>
      </Window.Resources>
      
      <Grid VerticalAlignment="Bottom">
        <StackPanel>
          <TextBlock Text="StackPanel Item 1"/>
          <TextBlock Text="StackPanel Item 2"/>
          <TextBlock Text="StackPanel Item 3"/>
          <TextBlock Text="StackPanel Item 4"/>
          <TextBlock Text="StackPanel Item 5"/>
          <TextBlock Text="StackPanel Item 6"/>
        </StackPanel>
      </Grid>
    </Window>
    

    Looks like this:

    not-full StackPanel growing from bottom

    But when you add more items, looks like this:

    overfilled StackPanel with items flowing off bottom