How can I make controls in WPF stretch to fill available width when HorizontalAlignment and Horizont-CodePudding

I'm trying to make a simple WPF app that has sections that fill the available width. Despite trying various ways of stretching the width of elements, containers, and children, nothing is working and I can't figure out why.

Another question said to use uniformgrid which worked well EXCEPT that it set the height of all the elements uniformly which was definitely not what I wanted. I want all of the sections to look like the one in the picture - filled width, height auto based on the content. Here's the basic setup:

<Window x:Class="A_Customizer.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:A_Customizer"
        mc:Ignorable="d"
        Title="MainWindow"
        Background="#FF2B2B2B"
        Width="800"
        >
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type CheckBox}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <Grid Name="mainApp" >

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <WrapPanel Grid.Row="0" >
            <Button ToolTip="Click to apply the below settings to this Jumpbox" Click="ApplyCustomizations">Customize</Button>
        </WrapPanel>

        <ScrollViewer Grid.Row="1">

            <WrapPanel HorizontalAlignment="Stretch" >
                <GroupBox
                    Background="#FFE2E2E2"
                    BorderBrush="#FF7F7F7F"
                    Margin="10,10,10,10"
                    Name="pathsBox"
                    HorizontalContentAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    >
                    <GroupBox.Header>
                        <Border Background="#FFAFAFAF" CornerRadius="3">
                            <Label FontWeight="Bold">Key Paths</Label>
                        </Border>
                    </GroupBox.Header>

                    <StackPanel HorizontalAlignment="Stretch">
                        <Grid Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>

                            <TextBox Name="homeFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
                            <Button Grid.Column="1" Click="NewQuickPath" ToolTip="Change home folder">
                                <Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
                            </Button>
                        </Grid>

                        <TextBox Name="progFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
                    </StackPanel>

                </GroupBox>

                <GroupBox
                    Background="#FFE2E2E2"
                    BorderBrush="#FF7F7F7F"
                    Margin="10,10,10,10"
                    Name="quickBox"
                    Height="auto"
                    HorizontalContentAlignment="Stretch"
                    >
                    <GroupBox.Header>
                        <Border Background="#FFAFAFAF" CornerRadius="3">
                            <Label FontWeight="Bold">Quick Access Folders</Label>
                        </Border>
                    </GroupBox.Header>
            
                    <StackPanel HorizontalAlignment="Stretch">
                        <TextBlock TextWrapping="Wrap" Margin="15">
                            There are going to be folders you'll need to access frequently and keeping them pinned on top of the left menu in Explorer is helpful. 
                            Select here to add them to the list of folders restored with the "Customize" button. Click any folder to remove it.
                        </TextBlock>

                        <Border CornerRadius="3" Background="#FFF3C7C7" Margin="6" Visibility="Collapsed" Name="quickErr" Tag="err_box">
                            <TextBlock Tag="errMsg" Foreground="#FFFD3434" TextWrapping="Wrap" Margin="6" ></TextBlock>
                        </Border>

                        <UniformGrid Name="quickPathsArea" Columns="1">
                    
                        </UniformGrid>
                
                        <Grid Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>

                            <TextBox  Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
                            <Button Grid.Column="1" Click="NewQuickPath" ToolTip="Add a new folder">
                                <Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
                            </Button>
                        </Grid>
                    </StackPanel>
                </GroupBox>     
</wrappanel>
</scrollviewer>
</grid>

CodePudding user response：

StackPanel with Orientation="Vertical" (default value) instead of WrapPanel should work: it will allow each child element use full width and as much height as necessary

CodePudding user response：

At first guess i would say that the problem is with your WrapPanel. WrapPanel's default Orientation is Horizontal, and in this cause Horizontal WrapPanel will match the height, but it won't match the width.

You should try to change the Orientation of the wrapPanel to vertical:

<WrapPanel Orientation="Vertical">

There is a really basic tutorial about wrapPanels, which states:

"Please be aware that while the Horizontal WrapPanel will match the height in the same row and the Vertical WrapPanel will match the width in the same column, height is not matched in a Vertical WrapPanel and width is not matched in a Horizontal WrapPanel."

WrapPanel tutorial

I hope this helps, if not, let me know, i can search futher!