Hide Drop Down in WP8

Question

I am trying to hide dropdown in wp8.it's working fine, But showing space.How Can i Remove this space and make the buttons group upwards and downwords based upon the shown/hide list

Is it any other Way to hide the textblock.because System.Windows.Visibility.Collapsed Not Working on Textblock.

  <Grid HorizontalAlignment="Left" Height="661" Margin="0,130,0,0" VerticalAlignment="Top" Width="440">
                            <Grid>
                                <TextBox HorizontalAlignment="Left" Height="65" Margin="-3,10,0,0" TextWrapping="Wrap"   VerticalAlignment="Top" Width="433" GotFocus="WatermarkTB_GotFocus" Foreground="Gray"
          LostFocus="WatermarkTB_LostFocus" x:Name="txtsearch" Text="Search" BorderBrush="LightGray"/>

                                <toolkit:ListPicker x:Name="lstLocations" Foreground="Black"   
                         BorderThickness="0.2" SelectionMode="Single" SelectionChanged="Locations_SelectionChanged"
                        VerticalAlignment="Bottom" Margin="10,0,23,500"   BorderBrush="Black" Height="88"  >
                                    <toolkit:ListPicker.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel >
                                                <TextBlock Text="{Binding name}"  Foreground="Black" FontSize="18"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.ItemTemplate>
                                    <toolkit:ListPicker.FullModeItemTemplate>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Text="{Binding name}"                                  
                                       FontSize="28"
                                                       Foreground="White"
                                                                                              />
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.FullModeItemTemplate>
                                </toolkit:ListPicker>

                                <toolkit:ListPicker x:Name="lstSubLocations" Foreground="Black"   
                         BorderThickness="0.2" SelectionMode="Single" SelectionChanged="lstSubLocations2_SelectionChanged"
                        VerticalAlignment="Bottom" Margin="10,0,23,460" ExpansionMode="FullScreenOnly" Visibility="Collapsed"  BorderBrush="Black" Height="64"  >
                                    <toolkit:ListPicker.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel >
                                                <TextBlock Text="{Binding name}"  Foreground="Black" FontSize="18"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.ItemTemplate>
                                    <toolkit:ListPicker.FullModeItemTemplate>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Text="{Binding name}"                                  
                                       FontSize="28"
                                                       Foreground="White"
                                                                                              />
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.FullModeItemTemplate>
                                </toolkit:ListPicker>

                                <toolkit:ListPicker x:Name="lstSubLocations2" Foreground="Black"   
                         BorderThickness="0.2" SelectionMode="Single" 
                        VerticalAlignment="Bottom" Margin="10,0,23,390" ExpansionMode="FullScreenOnly" BorderBrush="Black" Height="64" Visibility="Collapsed"  >
                                    <toolkit:ListPicker.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel >
                                                <TextBlock Text="{Binding name}"  Foreground="Black" FontSize="18" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.ItemTemplate>
                                    <toolkit:ListPicker.FullModeItemTemplate>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Text="{Binding name}"                                  
                                       FontSize="28"
                                                       Foreground="White"
                                                                                              />
                                            </StackPanel>
                                        </DataTemplate>
                                    </toolkit:ListPicker.FullModeItemTemplate>
                                </toolkit:ListPicker>
                            </Grid>
                            <Grid Margin="0 170 0 0">
                                <Button Content="Search Jobs" x:Name="Serachjob" FontSize="20" Foreground="White" HorizontalAlignment="Left" Margin="0,172,0,0" VerticalAlignment="Top" Width="204" Grid.ColumnSpan="2" BorderThickness="0" Click="Serachjob_Click">
                                    <Button.Background>
                                        <ImageBrush Stretch="Fill"  ImageSource="/Image/jobseeker.png"/>
                                    </Button.Background>

                                </Button>
                                <Button Content="Advanced Search" x:Name="Advanced_Search" Foreground="White" FontSize="20"  HorizontalAlignment="Left" Margin="202,172,0,0" VerticalAlignment="Top" Width="215" BorderThickness="0" Click="Advanced_Search_Click">
                                    <Button.Background>
                                        <ImageBrush Stretch="Fill" ImageSource="/Image/loginEmp.png"/>
                                    </Button.Background>
                                </Button>
                                <Button Content="Post Resumes" x:Name="Post_Resume" FontSize="20" Foreground="White" HorizontalAlignment="Left" Margin="0,222,0,0" VerticalAlignment="Top" Width="204" Grid.ColumnSpan="2" BorderThickness="0" Click="Post_Resume_Click">
                                    <Button.Background>
                                        <ImageBrush Stretch="Fill"  ImageSource="/Image/jobseeker.png"/>
                                    </Button.Background>

                                </Button>
                                <Button Content="Browse Jobs" x:Name="Browse_Jobs" Foreground="White" FontSize="20"  HorizontalAlignment="Left" Margin="202,222,0,0" VerticalAlignment="Top" Width="215" BorderThickness="0" Click="Browse_Jobs_Click">
                                    <Button.Background>
                                        <ImageBrush Stretch="Fill" ImageSource="/Image/loginEmp.png"/>
                                    </Button.Background>
                                </Button>

                            </Grid>


                        </Grid>

Answer 1

The problem is that you're using a Margin on that grid. Specifically this one,

 <Grid Margin="0 170 0 0">

If you want to auto-resize based on content try using a Grid with RowDefinition set to Auto and place your controls in individual rows.

Or you can use a StackPanel to house your controls. You can also use a StackPanel inside the Grid .

Something like this:

<Grid x:Name="LayoutRoot" Background="#FFAAAAAA">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Background="#FFD8CCFF">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Dogecoin WP8" Foreground="Black" Margin="12,0"/>
        <TextBlock x:Name="StatusLabel" Grid.Column="1" Text="" HorizontalAlignment="Right" Padding="0,0,12,0" Foreground="Black"/>
    </Grid>

    <StackPanel Grid.Row="1" Margin="0,5,0,0">
    <!-- TODO: your controls here -->
    </StackPanel>
</Grid>

Then expanding or hiding the ListPicker that is inside the collapsible StackPanel / Grid should result in this

See how it pushed everything down when the ListPicker is expanded?

As a side note, be careful using Margins when you want something reactive.