windows-8 - ビューボックスとキャンバスの使用中に UI 要素が正しくレンダリングされない

Question

縦向きと横向きの両方を使用するアプリを作成しています。アプリにはビューボックスとしてルートが含まれており、その子はスクロールビューアーです。Scrollviewer にはキャンバスが含まれています。

これで、キャンバスの現在表示されている (バインドされた) 部分は、2 ページ (水平方向に連続) と呼ばれます。ユーザーは、他の UI 要素を配置してフォームを作成できます。向きが縦向きに変更されると、製本は縦方向に連続する 2 ページになります。それとは別に、UI 要素も移動する必要があります。私が達成したいことを示す以下のスクリーンショットを参照してください。

最初にページ番号（現在のXとページサイズから）と相対XY位置（単一ページの端からの相対）を決定することでこれを達成しようとしました。数学的に正しい値を取得していますが、レンダリングが間違っています。なぜこれが起こっているのか誰にも教えてもらえますか？

---

更新 1

これが私のコードです。

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);
                }
            }
        }
    }
}