0

我正在创建一个同时使用方向纵向和横向的应用程序。该应用程序包含 root 作为 viewbox，它的子项是 scrollviewer。Scrollviewer 包含画布。

现在画布的当前可见（绑定）部分称为两页（水平连续）。用户可以在其上放置其他 UI 元素并创建表单。现在，当方向更改为纵向时，绑定将有两个垂直连续的页面。除此之外，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);
                }
            }
        }
    }
}
4

0 回答 0