Incorrect UI element rendering while using viewbox and canvas - windows-8

Question

I am creating an app which uses both the orientation portrait & landscape. The app contains root as viewbox and the children of it is scrollviewer. Scrollviewer contains the canvas.
Now the current visible (bound) part of canvas is called two page (horizontally consecutive). User can put other UI elements on it and create a form. Now when the orientation is changed to portrait the bound will have two pages as vertically consecutive. Apart from it the UI elements should also move. See the below screenshot which shows what I want to achieve.
I tried this to achieve by using first determining the page number (from current X and page size) and relative X Y position (relative from single page edge). I am getting values mathematically correct but rending happens wrong. Can any one tell me why this is happening ?
UPDATE 1
Here's my code.
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Button Content="Click" Click="Button_Click_1" />
<Viewbox x:Name="vBox" Stretch="Fill" StretchDirection="Both" Grid.Row="1" Grid.Column="1">
<ScrollViewer x:Name="sv" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Canvas x:Name="MyCanvas" Background="Aqua" Height="768" Width="1366">
<Rectangle x:Name="sepertor1" Fill="Red" Width="20" Height="768" Canvas.Left="546.4" />
<Rectangle x:Name="sepertor2" Fill="Red" Width="20" Height="768" Canvas.Left="1092.8" />
<Rectangle x:Name="sepertor3" Fill="Red" Width="20" Height="768" Canvas.Left="1639.2" />
<Rectangle x:Name="sepertor4" Fill="Red" Width="20" Height="768" Canvas.Left="2165.6" />
<TextBox x:Name="txtFirst" Height="30" Width="200" Text="First" Canvas.Left="326.4" Canvas.Top="518" />
<TextBox x:Name="txtSecond" Height="30" Width="200" Text="Second" Canvas.Left="566.4" Canvas.Top="0"/>
<TextBox x:Name="txtThird" Height="30" Width="200" Text="Third" Canvas.Left="1439.2" Canvas.Top="0"/>
<TextBox x:Name="txtForth" Height="30" Width="200" Text="Forth" Canvas.Left="1985.6" Canvas.Top="518"/>
</Canvas>
</ScrollViewer>
</Viewbox>
</Grid>
C#
//This is page's SizeChanged event
bool IsFirst = true;
private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{
int PageNumber;
if (ApplicationView.Value == ApplicationViewState.FullScreenLandscape)
{
sv.Height = Window.Current.Bounds.Height - 220;
sv.Width = vBox.Width = Window.Current.Bounds.Width * 0.8;
//Canvas contains red seperator (width = 20) which shows two page in current window bound.
//canvas width is of Window.Current.Bounds.Width * 0.8, so page size is Window.Current.Bounds.Width * 0.4
//txtFirst is in first page & txtSecond is in second page.
var PageWidth = Window.Current.Bounds.Width * 0.4; //1366 * 0.4
var PageHeight = Window.Current.Bounds.Height - 220; //768 - 220
vBox.Stretch = Stretch.Fill;
MyCanvas.Width = PageWidth * 4;
MyCanvas.Height = PageHeight;
if (!IsFirst)
{
IsFirst = false;
foreach (FrameworkElement control in MyCanvas.Children.Where(x => x.GetType() != typeof(Rectangle)).ToList())
{
var CurrentHeight = control.Height;
var CurrentLeft = Canvas.GetLeft(control);
var CurrentTop = Canvas.GetTop(control);
var RelativeX = CurrentLeft % PageWidth;
PageNumber = (int)Math.Ceiling(CurrentLeft / PageWidth);
if (PageNumber > 1)
{
if (PageNumber % 2 == 0) //even 2, 4, 6, 8
{
control.SetValue(Canvas.LeftProperty, CurrentLeft + (PageNumber / 2) * PageWidth);
control.SetValue(Canvas.TopProperty, CurrentTop - PageHeight + CurrentHeight);
}
else //odd 1, 3, 7, 5
{
//control.SetValue(Canvas.LeftProperty, (CurrentLeft - PageWidth) * 2);
control.SetValue(Canvas.LeftProperty, ((CurrentLeft - RelativeX) * 2) + RelativeX);
}
}
}
}
}
else if (ApplicationView.Value == ApplicationViewState.FullScreenPortrait)
{
IsFirst = false;
sv.Height = Window.Current.Bounds.Height - 220;
sv.Width = vBox.Width = Window.Current.Bounds.Width * 0.8;
vBox.Stretch = Stretch.None;
var PageWidth = Window.Current.Bounds.Height * 0.4; //1366 * 0.4
var PageHeight = Window.Current.Bounds.Width - 220; //768 - 220
MyCanvas.Width = PageWidth * 2;
MyCanvas.Height = PageHeight * 2;
foreach (FrameworkElement control in MyCanvas.Children.Where(x => x.GetType() != typeof(Rectangle)).ToList())
{
var CurrentHeight = control.Height;
var CurrentLeft = Canvas.GetLeft(control);
var CurrentTop = Canvas.GetTop(control);
var RelativeX = CurrentLeft % PageWidth;
PageNumber = (int)Math.Ceiling(CurrentLeft / PageWidth);
if (PageNumber > 1)
{
if (PageNumber % 2 == 0) //even 2, 4, 6, 8, 10
{
//control.SetValue(Canvas.LeftProperty, CurrentLeft - (PageNumber / 2) * PageWidth); this is also working
control.SetValue(Canvas.LeftProperty, ((CurrentLeft - RelativeX) / 2));
control.SetValue(Canvas.TopProperty, CurrentTop + PageHeight - CurrentHeight);
}
else //odd 1, 3, 5, 7, 9
{
//control.SetValue(Canvas.LeftProperty, (CurrentLeft + PageWidth) / 2);
control.SetValue(Canvas.LeftProperty, ((CurrentLeft - RelativeX) / 2) + RelativeX);
}
}
}
}
}