How to make StackPanel to fill his container with and height in WPF

Question

I'm really new to WPF and I am trying to make an app that will display Word,PDF, and Excel files in it. The left side of the window will show the content of the uploaded files in my app and the right side should have a list of all the uploaded files in a ScrollViewer for the user to select what to be displayed.

Everything is responsive and resize correctly to different window size, but the scroll viewer is fixed and doesn't resize. I want my ScrollViewer to always be at max width and height of his container, so that it resizes correctly on what ever the window size is.

I have tried different approaches, but all failed and now I have no idea how to do it.

Here is my code:

<Window x:Class="PPMGNews.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"
        xmlns:local="clr-namespace:PPMGNews"
        mc:Ignorable="d"
        Title="CoolAppForNews" Height="450" Width="800" Icon="./Resources/Logoto.ico">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Menu Grid.Row="1" Grid.ColumnSpan="6" BorderBrush="#FFAEA6A6" BorderThickness="0,0,0,1">
            <MenuItem Header="Add">
                <MenuItem Header="_Word" x:Name="addWord" Click="AddWord_Click"/>
                <MenuItem Header="_PDF"/>
                <MenuItem Header="_Excel"/>
            </MenuItem>
            <MenuItem Header="Delete">
                <!--<MenuItem Header="_Open"/>
                <MenuItem Header="_Close"/>
                <MenuItem Header="_Save"/> -->
            </MenuItem>
            <MenuItem Header="Edit">
                <!--<MenuItem Header="_Open"/>
                <MenuItem Header="_Close"/>
                <MenuItem Header="_Save"/>-->
            </MenuItem>
        </Menu>
        <DocumentViewer x:FieldModifier="public" x:Name="docViwer" 
                        Grid.Row="2" Grid.RowSpan="4" Grid.ColumnSpan="4"
                        BorderBrush="Black" BorderThickness="1" 
                        Margin="1,2,40,1">
        </DocumentViewer>
        <Border Grid.Row="2" Grid.RowSpan="5" Grid.Column="4"
                CornerRadius="0" BorderBrush="Gray"  
                BorderThickness="2" Margin="-35,0,0,0">
        <StackPanel Grid.Row="2" Grid.RowSpan="5" Grid.Column="4" 
                    Height="auto" Width="auto">
                <Label HorizontalAlignment="Center" FontSize="17">News</Label>
                <ScrollViewer VerticalScrollBarVisibility="Visible" 
                          HorizontalScrollBarVisibility="Disabled" 
                          HorizontalAlignment="Left">
                    <StackPanel>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                        <Label>Some News</Label>
                    </StackPanel>
                </ScrollViewer>
        </StackPanel>
        </Border>
    </Grid>
</Window>

The idea is that the app should fill the ScrollViewer with content in the backend whenever a user adds new files. And then attach click events on the content to change the DocumentViewer document.

Possible duplicate of [How to get controls in WPF to fill available space?](https://stackoverflow.com/questions/36108/how-to-get-controls-in-wpf-to-fill-available-space) — Dean Kuga, Jan 30 '19 at 20:51

score 0 · Accepted Answer · answered Jan 30 '19 at 19:22

0

You should use on the controls which you want to dock inside their respective parent controller.

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

answered Jan 30 '19 at 19:22

Manoj Choudhari

5,277
2
26
37

Hi, it worked perfectly, just as I wonted, but now if I add 200 more labels it won't show the scrollbar and I am not able to scroll between all the labels in the ScrollViewer when I start the program. I just added `HorizontalAlignment="Stretch" VerticalAlignment="Stretch"` in the ScrollViewer. – BlackSova Jan 30 '19 at 19:36
I am glad it worked. Can you please conclude the thread by marking this as answer in that case. – Manoj Choudhari Jan 30 '19 at 19:38

How to make StackPanel to fill his container with and height in WPF

1 Answers1