【问题标题】:How to Show ProgressBar over VideoBrush如何在 VideoBrush 上显示 ProgressBar
【发布时间】:2014-01-24 09:03:21
【问题描述】:

我有一项功能允许用户在设备上的前置摄像头和主摄像头之间切换。在切换过程中,我想向用户显示一个 ProgressBar 和 TextBlock。由于某种原因,我无法让这些显示在视图中,并且在切换过程中唯一显示的是未旋转 VideoBrush 的冻结图像

MainPage.xaml

<Grid.RowDefinitions>
            <RowDefinition Height="72"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="68"/>
            <RowDefinition Height="72"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="72"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width="72"/>
        </Grid.ColumnDefinitions>

        <!-- Center this on the screen --> 
        <Canvas x:Name="VideoCanvas" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="5" 
                VerticalAlignment="Center" HorizontalAlignment="Center">
            <Canvas.Background>
                <VideoBrush x:Name="videoBrush">
                    <VideoBrush.RelativeTransform>
                        <CompositeTransform x:Name="videoBrushTransform" 
                                        CenterX="0.5" CenterY="0.5"/>
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Canvas.Background>
        </Canvas>

        ...

        <StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
            <ProgressBar x:Name="progressIndicator" IsIndeterminate="False" Background="Transparent"/>
            <TextBlock x:Name="modeChangeTextBlock" Margin="12"
                   VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28" 
                   Foreground="{StaticResource PhoneSubtleBrush}"/>
        </StackPanel>

MainPage.xaml.cs

void sensor_Click(object sender, EventArgs e)
    {
        CameraType type = camera.CameraType;

        //Switch to other camera, if available
        if(type == CameraType.Primary)
        {
            if(PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing) == true)
            {
                ShowProgress("Switching cameras");
                UninitializeCamera();
                InitializeCamera(CameraType.FrontFacing);
                HideProgress();
            }
        }
        else
        {
            if(PhotoCamera.IsCameraTypeSupported(CameraType.Primary) == true)
            {
                ShowProgress("Switching cameras");
                UninitializeCamera();
                InitializeCamera(CameraType.Primary);
                HideProgress();
            }
        }
    }

    ...

    private void ShowProgress(String msg)
    {            
        progressIndicator.IsIndeterminate = true;
        modeChangeTextBlock.Text = msg;
        //progressIndicator.Visibility = Visibility.Visible;
    }

    private void HideProgress()
    {
        progressIndicator.IsIndeterminate = false;
        modeChangeTextBlock.Text = "";
        //progressIndicator.Visibility = Visibility.Collapsed;
    }

EDIT * 添加在现有 xaml 代码下方用于测试

<Rectangle x:Name="cameraSwitchingFill" Visibility="Visible"
                   Fill="{StaticResource SelfiePageBackgroundColorBrush}" 
                   Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Grid.ColumnSpan="5"/>

        <StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
            <ProgressBar x:Name="progressIndicator" IsIndeterminate="True" Background="Transparent"/>
            <TextBlock x:Name="modeChangeTextBlock" Margin="12"
                   VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28" 
                   Foreground="{StaticResource PhoneSubtleBrush}" Text="test"/>
        </StackPanel>

添加的编辑是尝试查看为什么在相机切换期间进度条不显示。设置要在屏幕上看到的所有内容,当第一次导航到此页面时,我看到的只是cameraSwitchingFill 矩形,上面没有 ProgressBar 或 TextBlock(尽管在设计器中我可以看到这些很好)。切换相机后,(如预期的那样)我看到了矩形,但没有看到 ProgressBar 或 TextBlock。

然后我回去不显示编辑和修改

void sensor_Click(object sender, EventArgs e) { //切换到其他相机,如果可用 CameraType type = camera.CameraType;

        if(type == CameraType.Primary)
        {
            if(PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing) == true)
            {
                ShowProgress(AppResources.CapturePage_SwitchingCameras);
                cameraSwitchingFill.Visibility = Visibility.Visible;
                UninitializeCamera();
                InitializeCamera(CameraType.FrontFacing);
                cameraSwitchingFill.Visibility = Visibility.Collapsed;
                HideProgress();
            }
        }
        else
        {
            if(PhotoCamera.IsCameraTypeSupported(CameraType.Primary) == true)
            {
                ShowProgress(AppResources.CapturePage_SwitchingCameras);
                cameraSwitchingFill.Visibility = Visibility.Visible;
                UninitializeCamera();
                InitializeCamera(CameraType.Primary);
                cameraSwitchingFill.Visibility = Visibility.Collapsed;
                HideProgress();
            }
        }
    }

所以结果是当我永久使矩形和进度条显示在屏幕上时,只有矩形显示,直到第一个相机切换点击事件发生,此后矩形或进度条都不会显示。此外,即使在 xaml 中的 videobrush 实现下方声明的矩形和进度条在此期间设置为可见,在切换期间冻结的图像仍保留在屏幕上。

【问题讨论】:

  • 这只是一个想法 - 您可以使用叠加层

标签: c# xaml windows-phone-7 windows-phone-8 camera


【解决方案1】:

希望这会对您有所帮助。试试这个

 <Grid>
        <Grid.RowDefinitions>
         <RowDefinition Height="*"/>                    
         </Grid.RowDefinitions>

         <!-- Center this on the screen -->
                    <Canvas x:Name="VideoCanvas" Grid.Row="0" >
                        <Canvas.Background>
                            <VideoBrush x:Name="videoBrush" >
                                <VideoBrush.RelativeTransform>
                                    <CompositeTransform x:Name="videoBrushTransform" 
                                                    CenterX="0.5" CenterY="0.5"/>
                                </VideoBrush.RelativeTransform>
                            </VideoBrush>
                        </Canvas.Background>
                    </Canvas>
              <StackPanel Grid.Row="0"  VerticalAlignment="Center">
         <TextBlock x:Name="modeChangeTextBlock" Margin="12" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28" Foreground="{StaticResource PhoneSubtleBrush}"/>
         <ProgressBar x:Name="progressIndicator" IsIndeterminate="False" Grid.RowSpan="4" />
           </StackPanel>
    </Grid>

【讨论】:

  • 不幸的是,这不起作用。也许您可以根据我的编辑提供一些建议?
【解决方案2】:

声明没有错。只是你声明的顺序不正确。

网格中的重叠由您编写 xaml 的顺序完成

在 xaml 中,包含文本块和进度条的面板被放置在第一个位置,然后包含 Videobrush 的面板与第一个面板重叠(隐形背后的主要原因)。因此,如果您希望面板可见,只需在包含视频画笔的面板下方声明它。这将有助于具有进度条的面板与包含视频画笔的面板重叠。

因此更新后的声明现在变为

  <Grid.RowDefinitions>
            <RowDefinition Height="72"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="68"/>
            <RowDefinition Height="72"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="72"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width=".33*"/>
            <ColumnDefinition Width="72"/>
        </Grid.ColumnDefinitions>

        <!-- Center this on the screen -->


            <Canvas x:Name="VideoCanvas" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="5">
            <Canvas.Background>
                <VideoBrush x:Name="videoBrush" >
                    <VideoBrush.RelativeTransform>
                        <CompositeTransform x:Name="videoBrushTransform" 
                                        CenterX="0.5" CenterY="0.5"/>
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Canvas.Background>
        </Canvas>

        <StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
            <ProgressBar x:Name="progressIndicator" IsIndeterminate="True" Background="Transparent"/>
            <TextBlock x:Name="modeChangeTextBlock" Margin="12" Text="loading"
                   VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28" 
                   Foreground="White"/>
        </StackPanel>

希望这会有所帮助。

【讨论】:

  • 谢谢。这实际上就是我最初的声明方式,但没有任何效果。我把它改回你所说的方式。我注意到在摄像机之间切换时,一旦按下按钮,并且在一台摄像机未初始化而另一台摄像机初始化期间,屏幕上会显示未旋转的 VideoBrush 的冻结图像。我认为这不会将 StackPanel 与 ProgressBar 和 TextBlock 与您的实现重叠,但我在屏幕上看不到任何内容。
  • 好吧奇怪了,然后尝试在photocamera对象的初始化事件上调用HideProgress()。(假设UninitializeCamera()中没有xaml重新定位,InitializeCamera())
  • 不幸的是,这也不起作用。我在 xaml 中将 VideoCanvas 居中,因为在旋转视频画笔时它不会居中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多