方向更改期间的Windows手机列和网格

Question

嘿，我的人在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>

即使这个红色面板只在第一列，当我运行应用程序时，它会以某种方式扩展（你可以看到附加的图像，相机视图上有红色边框）。我究竟做错了什么？

新问题！

当我改变页面旋转时，我会在纵向视图中看到它。页面的xaml是相同的。我在OnOrientationChanged事件处理程序中执行此操作。

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;

以下是纵向模式下的页面外观。

Answer 1

奇怪，我已经在我的HTC 8X上测试了你的代码，它运行得很好。也许红色已经是您设备上PhotoCamera流的一部分了？ 作为一种解决方法，我建议在CameraRectangle元素中添加几个负边距像素，这样可以隐藏红色边框。