Windows phone columns and grids during orientation change - windows-phone-8

Question

Hey people I have this in my xml
<Grid x:Name="LayoutRoot" Background="Black">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="72"/>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="72"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="FirstBorder" Background="Red" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="3"/>
<Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" x:Name="LivePreviewTapTarget">
<Canvas>
<Rectangle x:Name="CameraRectangle" Width="638" Height="480" Fill="{Binding PreviewBrush}">
<Rectangle.RenderTransform>
<CompositeTransform x:Name="LivePreviewTransform"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Grid>
<Border x:Name="SecondBorder" Background="Yellow" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3"></Border>
And even this red panel is in first column only, when I run the app, it expands somehow (you can see that on the image attached, there is red border over camera view). What am I doing wrong?
NEW PROBLEM!
When I change page rotation I get this in portrait view. The xaml of the page is the same. And I do this in OnOrientationChanged event handler.
if (IsPortrait(Orientation))
{
Grid.SetRow(FirstBorder, 0);
Grid.SetColumn(FirstBorder, 0);
Grid.SetColumnSpan(FirstBorder, 3);
Grid.SetRow(LivePreviewTapTarget, 1);
Grid.SetColumn(LivePreviewTapTarget, 0);
Grid.SetColumnSpan(LivePreviewTapTarget, 3);
Grid.SetRow(SecondBorder, 2);
Grid.SetColumn(SecondBorder, 0);
Grid.SetColumnSpan(SecondBorder, 3);
CameraRectangle.Width = 480;
CameraRectangle.Height = 638;
}
else
{
Grid.SetColumn(FirstBorder, 0);
Grid.SetRow(FirstBorder, 0);
Grid.SetRowSpan(FirstBorder, 3);
Grid.SetColumn(SecondBorder, 2);
Grid.SetRow(SecondBorder, 0);
Grid.SetRowSpan(SecondBorder, 3);
Grid.SetColumn(LivePreviewTapTarget, 1);
Grid.SetRow(LivePreviewTapTarget, 0);
Grid.SetRowSpan(LivePreviewTapTarget, 3);
CameraRectangle.Width = 638;
CameraRectangle.Height = 480;
}
if (IsPortrait(Orientation))
{
_livePreviewTransform.Rotation = _viewModel.ViewfinderRotation;
_livePreviewTransform.CenterX = 240;
_livePreviewTransform.CenterY = 400;
_livePreviewTransform.TranslateX = -100;
_livePreviewTransform.TranslateY = -160;
}
else if (Orientation == PageOrientation.LandscapeRight)
{
_livePreviewTransform.Rotation = 180;
_livePreviewTransform.CenterX = 400;
_livePreviewTransform.CenterY = 240;
_livePreviewTransform.TranslateX = -160;
_livePreviewTransform.TranslateY = 0;
}
else
{
_livePreviewTransform.Rotation = 0;
_livePreviewTransform.CenterX = 400;
_livePreviewTransform.CenterY = 240;
_livePreviewTransform.TranslateX = 0;
_livePreviewTransform.TranslateY = 0;
}
var scaleX = 1.0;
if (_viewModel.CameraSensorLocation == CameraSensorLocation.Front)
scaleX = -1.0;
_livePreviewTransform.ScaleX = scaleX;
Here is the page look in portrait mode.

Answer 1

Strange, I've tested your code on my HTC 8X and it works just fine. Maybe the red color is already part of the PhotoCamera stream on your device?
As a workaround I'd recommend adding few pixels of negative margin to the the CameraRectangle element, that should hide the red borders.