c# WPF, How to expand form on button click?

Question

I'm working on ac# WPF program, and im trying to make the search form expand(grow bigger), when a button is clicked (much like the Expander function, but the entire form).

Picture of the form NOT expanded:

Picture of the form when expanded:

I made the controls hidden to begin with, and when the expand button is clicked, the controls is visible, but the form doesnt follow, i have to make the form bigger manually. I tried everything, and I've been searching for hours.

I tried the expander function. I tried the auto sizeToContent function.

Here is the XAML-code:

<Window x:Class="MockUps.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Search" Icon="C:\Users\rasmus\Desktop\Lejos.dk\LejosLogo.jpg" WindowStartupLocation="Manual" Height="319" Width="480">
<Grid AllowDrop="False" Height="auto" Width="480" SizeChanged="Grid_SizeChanged" Margin="2,0,1,-151">
    <ComboBox HorizontalAlignment="Left" Margin="184,24,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Electrician"/>
        <ComboBoxItem Content="Metalworker"/>
        <ComboBoxItem Content="Landscaper"/>
        <ComboBoxItem Content="Painter"/>
        <ComboBoxItem Content="Plumber"/>
        <ComboBoxItem Content="Driver"/>
        <ComboBoxItem Content="Craneworker"/>
        <ComboBoxItem Content="Machineworker"/>
    </ComboBox>
    <Label Content="Job Type" HorizontalAlignment="Left" Margin="47,20,0,0" VerticalAlignment="Top"/>
    <Label Content="Certificate(s)" HorizontalAlignment="Left" Margin="28,60,0,0" VerticalAlignment="Top"/>
    <Label Content="Nationality" HorizontalAlignment="Left" Margin="36,140,0,0" VerticalAlignment="Top"/>
    <Label Content="Language(s)" HorizontalAlignment="Left" Margin="30,100,0,0" VerticalAlignment="Top"/>
    <ComboBox HorizontalAlignment="Left" Margin="184,64,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Welding"/>
        <ComboBoxItem Content="Offshore"/>
        <ComboBoxItem Content="Crane C"/>
        <ComboBoxItem Content="Crane B"/>
        <ComboBoxItem Content="Crane A"/>
        <ComboBoxItem Content="Arc-Welding / Lysbuesvejsning"/>
        <ComboBoxItem Content="TIG-Welding"/>
        <ComboBoxItem Content="Gas-Welding"/>
    </ComboBox>
    <ComboBox HorizontalAlignment="Left" Margin="184,104,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Danish"/>
        <ComboBoxItem/>
        <ComboBoxItem Content="Swedish"/>
        <ComboBoxItem Content="Norwegian"/>
        <ComboBoxItem Content="Deutsch"/>
        <ComboBoxItem Content="Polish"/>
        <ComboBoxItem Content="English"/>
    </ComboBox>
    <ComboBox HorizontalAlignment="Right" Margin="0,104,27,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Danish"/>
        <ComboBoxItem Content="Swedish"/>
        <ComboBoxItem Content="Norwegian"/>
        <ComboBoxItem Content="Deutsch"/>
        <ComboBoxItem Content="Polish"/>
        <ComboBoxItem Content="English"/>
    </ComboBox>
    <ComboBox HorizontalAlignment="Left" Margin="184,144,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Danish"/>
        <ComboBoxItem Content="Swedish"/>
        <ComboBoxItem Content="Norwegian"/>
        <ComboBoxItem Content="German"/>
        <ComboBoxItem Content="Polish"/>
    </ComboBox>
    <Label Content="Drivers License" HorizontalAlignment="Left" Margin="15,180,0,0" VerticalAlignment="Top"/>
    <ComboBox HorizontalAlignment="Left" Margin="184,180,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="B - Car"/>
        <ComboBoxItem Content="C1 - Small Truck"/>
        <ComboBoxItem Content="C - Big Truck"/>
        <ComboBoxItem Content="D1 - Small Bus"/>
        <ComboBoxItem Content="D - Big Bus"/>
        <ComboBoxItem Content="E - Trailer"/>
    </ComboBox>
    <ComboBox HorizontalAlignment="Right" Margin="0,64,27,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Welding"/>
        <ComboBoxItem Content="Offshore"/>
        <ComboBoxItem Content="Crane C"/>
        <ComboBoxItem Content="Crane B"/>
        <ComboBoxItem Content="Crane A"/>
        <ComboBoxItem Content="Arc-Welding / Lysbuesvejsning"/>
        <ComboBoxItem Content="TIG-Welding"/>
        <ComboBoxItem Content="Gas-Welding"/>
    </ComboBox>
    <Button Content="Search" HorizontalAlignment="Left" Margin="137,257,0,0" VerticalAlignment="Top" Width="75"/>
    <Label Content="Experience" HorizontalAlignment="Left" Margin="37,220,0,0" VerticalAlignment="Top"/>
    <ComboBox HorizontalAlignment="Left" Margin="184,220,0,0" VerticalAlignment="Top" Width="120">
        <ComboBoxItem Content="Min. 5 Years"/>
        <ComboBoxItem Content="Min. 10 Years"/>
        <ComboBoxItem Content="Min. 15 Years"/>
        <ComboBoxItem Content="Min. 20 Years"/>
    </ComboBox>
    <Image HorizontalAlignment="Right" Height="96" VerticalAlignment="Top" Width="120" Margin="0,144,27,0" Source="C:\Users\rasmus\Desktop\Lejos.dk\LejosLogo.jpg" Stretch="Fill"/>
    <Button Content="Expand" HorizontalAlignment="Left" Margin="268,257,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    <Label x:Name="lblGender" Content="Gender" HorizontalAlignment="Left" Margin="55,300,0,0" VerticalAlignment="Top" Visibility="Hidden"/>
    <Label x:Name="lblMinAge" Content="Min. Age" HorizontalAlignment="Left" Margin="47,340,0,0" VerticalAlignment="Top" Visibility="Hidden"/>
    <Label x:Name="lblMaxAge" Content="Max. Age" HorizontalAlignment="Left" Margin="47,380,0,0" VerticalAlignment="Top" Visibility="Hidden"/>
    <ComboBox x:Name="CBGender" HorizontalAlignment="Left" Margin="184,304,0,0" VerticalAlignment="Top" Width="120" Visibility="Hidden">
        <ComboBoxItem Content="Male"/>
        <ComboBoxItem Content="Female"/>
    </ComboBox>
    <ComboBox x:Name="CBMinAge" HorizontalAlignment="Left" Margin="184,344,0,0" VerticalAlignment="Top" Width="120" SelectionChanged="CBMinAge_SelectionChanged" Visibility="Hidden"/>
    <ComboBox x:Name="CBMaxAge" HorizontalAlignment="Left" Margin="184,384,0,0" VerticalAlignment="Top" Width="120" Visibility="Hidden"/>

</Grid>

Thanks Guys //Rasmus

Answer 1

Oh wow, you should probably re-write your entire layout and not use 1 Grid to place all your content and use margins to place them. Here is an example how you can use simple styles to toggle the visibility of the lower part of the form.

Also Hidden for visibility is different from Collapsed. Hidden elements will take the layout space reserved for them. Collapsed will not.

<Window x:Class="MockUps.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Title="Search" 
                SizeToContent="WidthAndHeight">
    <StackPanel>
        <Grid>
            <ToggleButton x:Name="ExpandButton" Content="Expand"/>
        </Grid>

        <Grid>
            <Grid.Style>
                <Style TargetType="{x:Type Grid}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=ExpandButton, Path=IsChecked}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>

            <Label Content="Gender"/>
            <Label Content="Min. Age"/>
            <Label Content="Max. Age"/>

            <ComboBox>
                <ComboBoxItem Content="Male"/>
                <ComboBoxItem Content="Female"/>
            </ComboBox>

            <ComboBox/>

            <ComboBox/>
        </Grid>
    </StackPanel>
</Window>