Automatically resize elements when changing orientation in Windows Phone - xaml

Question

My app layout doesn't have any issues when in portrait mode, but when I change the orientation to landscape, there are some issues:
The app bar, which is minimized by default, is larger in landscape mode and overlaps the first button and the browser window
The URL text box and the Go button disappear when in landscape orientation.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonOne" Content="ButtonOne" IsEnabled="False" Click="ButtonOne_Click" Grid.Column="0"/>
<Button x:Name="ButtonTwo" Content="ButtonTwo" Click="ButtonTwo_Click" IsEnabled="False" Grid.Column="1"/>
</Grid>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox x:Name="URL" Margin="0,545,69,-41" TextWrapping="NoWrap" Text="http://www.xbox.com" VerticalAlignment="Top" Height="75"/>
<Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,545,0,-41" VerticalAlignment="Top" Click="Go_Click" Height="75"/>
<phone:WebBrowser x:Name="MiniBrowser" Margin="10,-25,10,79"/>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Click="Item1_Click" Text="Item 1"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
So what I would like to have is:
An app bar that doesn't overlap with the page content
If possible, I would like to hide the URL bar and the Go button when in landscape mode, and have the browser windows fill all available space

Answer 1

The overlap probably occurs because you try to position the controls hard coded by setting the margins. You better put your controls in a grid like this and remove Mode=Minimized from the application bar:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Item 1"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<phone:WebBrowser Grid.ColumnSpan="2" x:Name="MiniBrowser"/>
<TextBox Grid.Row="1" Grid.Column="0" x:Name="URL" TextWrapping="NoWrap" Text="http://www.xbox.com" VerticalAlignment="Top" Height="75"/>
<Button Grid.Row="1" Grid.Column="1" x:Name="Go" Content="Go" HorizontalAlignment="Right" VerticalAlignment="Top" Click="Go_Click" Height="75"/>
</Grid>
</Grid>
Hiding the textbox and the button can be done in the OrientationChanged event of the page:
private void MainPage_OnOrientationChanged(object sender, OrientationChangedEventArgs e)
{
// Switch the visibility of the controls based on an orientation change.
if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
{
ApplicationBar.Mode = ApplicationBarMode.Minimized;
URL.Visibility = Visibility.Visible;
Go.Visibility = Visibility.Visible;
}
// If not in portrait, hide controls.
else
{
ApplicationBar.Mode = ApplicationBarMode.Default;
URL.Visibility = System.Windows.Visibility.Collapsed;
Go.Visibility = System.Windows.Visibility.Collapsed;
}
}
In order for this eventhandler to work you need to add OrientationChanged="MainPage_OnOrientationChanged" to your MainPage.xaml (as an attribute of the phone:PhoneApplicationPage element.
Source: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207002(v=vs.105).aspx