Wrap panel hiding on vertical screen resize - xaml

Question

Hey so I have a question that's been driving me mad. Basically I have a xaml element that has a wrap panel and a listbox inside it. The listbox has no problems in resizing but the wrap panel will not resize even when I set the horizontal alignment to stretch.
Has anyone any suggestions on how to fix this as it is really driving me nuts? Thanks very much in advance.
<UserControl x:Class="citeright_word.SearchItemsPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:citeright_word"
xmlns:iconPacks1="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
d:DesignHeight="562.5" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label" Content="Search:" Margin="5,0,0,0"
VerticalAlignment="Top" FontSize="16" FontWeight="Bold"/>
<WrapPanel HorizontalAlignment="Stretch" Width="auto"
Margin="5,30,5,506.4">
<Button Click="refreshItems" Background="#FFF7F7F7"
VerticalAlignment="Top">
<iconPacks1:PackIconMaterial Kind="Refresh" MaxHeight="12"
MaxWidth="12"/>
</Button>
<TextBox x:Name="textBox" controls:TextBoxHelper.Watermark="Search
Items" controls:TextBoxHelper.ClearTextButton="True"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown" />
</WrapPanel>
<ListBox x:Name="listBox" Margin="5,63,5,5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ListBox>
</Grid>
</UserControl>

Answer 1

Is this what you're looking for?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
x:Name="label"
Grid.Row="0"
Content="Search:"
Margin="5,0,0,0"
VerticalAlignment="Top"
FontSize="16"
FontWeight="Bold"
/>
<Grid
Margin="5"
Grid.Row="1"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
Click="refreshItems"
Background="#FFF7F7F7"
VerticalAlignment="Top"
>
<iconPacks1:PackIconMaterial
Kind="Refresh"
MaxHeight="12"
MaxWidth="12" />
</Button>
<TextBox
Grid.Column="1"
Margin="2,0,0,0"
x:Name="textBox"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown"
controls:TextBoxHelper.Watermark="Search Items"
controls:TextBoxHelper.ClearTextButton="True"
/>
</Grid>
<ListBox
x:Name="listBox"
Grid.Row="2"
Margin="5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBoxItem>DSG Global Inc (re)</ListBoxItem>
<ListBoxItem>Law Society of New Brunswick v. Aucoin</ListBoxItem>
</ListBox>
</Grid>
I made some substitutions for testing because I don't have your icons or your textbox behaviors or the stuff that goes in the listbox.
I find it deeply incongenial to do XAML layout with margins. I know the designer positions elements that way, but I only use the designer for a visual check on the XAML I write by hand. I find it vastly easier and more powerful to use Grid rows and columns, stackpanels, wrappanels, and the odd UniformGrid. I don't think it's just me: On stack overflow, I've noticed that margin-driven layout correlates very well with folks who are inexperienced with XAML.