I am trying to create a messaging screen. This is my XAML:
<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:edc="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing" xmlns:em="clr-namespace:Microsoft.Expression.Media;assembly=Microsoft.Expression.Drawing" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" x:Class="chatScreen.MainPage" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <phone:PhoneApplicationPage.Resources></phone:PhoneApplicationPage.Resources> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar> <shell:ApplicationBarIconButton IconUri="/icons/appbar.message.send.png" IsEnabled="True" Text="send"/> </phone:PhoneApplicationPage.ApplicationBar> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid x:Name="userInfo" Grid.Row="0" Margin="12,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="15" /> <ColumnDefinition Width="84" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="48"/> </Grid.ColumnDefinitions> <Image x:Name="PresenceIcon" Grid.Column="0" Height="64" Width="12" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="available.jpg" /> <Image x:Name="DisplayImage" Grid.Column="1" Height="64" Width="64" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="tony.jpg" Margin="0" /> <Grid x:Name="metaContact_info" Grid.Column="2"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock x:Name="DisplayName" Grid.Row="0" Text="Tony Stark" TextWrapping="NoWrap" FontSize="40" /> <TextBlock x:Name="DisplayStatus" Grid.Row="1" Text="enjoying windows phone" FontSize="18" TextTrimming="WordEllipsis" /> </Grid> <Image x:Name="ServiceIcon" Grid.ColumnSpan="2" Grid.Column="3" Source="service_gtalk.jpg" Width="24" Height="24" VerticalAlignment="Top" Margin="0,20,0,0"/> </Grid> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,18,12,12"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ScrollViewer x:Name="messages" Grid.Row="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0"/> </Grid> <ScrollViewer x:Name="inputBox_scroller" Grid.Row="2" Margin="0" MaxHeight="108" VerticalAlignment="Bottom"> <TextBox x:Name="inputBox" TextWrapping="Wrap" HorizontalContentAlignment="Stretch" Text="" FontSize="{StaticResource PhoneFontSizeMedium}" InputScope="Chat" AcceptsReturn="True" /> </ScrollViewer>
I also use Jeff Wilcox PhoneThemeManager 1.2 to always load the app in a light theme.
When I have an appBar on this screen and the keyboard opens, there is an extra edge about 48 pixels below the text box. When the phone theme is black, it shows an ugly black bar above the keyboard and under the text box. When the phone theme is white, this black bar is white. Here are the screenshots to better demonstrate:
However, when I turn off the application panel and then open the keyboard, this additional field below the text field will not.
I want to disable this extra margin when the keyboard is open, just like it does in the messaging hub, where there is an appBar application, as well as an automatically configured keyboard bar, and yet this extra margin does not exist.
source share