renderTargetBitmap.RenderAsync忽略UserContol上的图像

时间:2018-03-15 17:51:24

标签: uwp windows-10 windows-10-universal uwp-xaml rendertargetbitmap

我有一个像这样的UserControl:

<UserControl x:Name="taskcard"
x:Class="AYOS_IDPrinter_UWP.TaskCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AYOS_IDPrinter_UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RequestedTheme="Default" Width="486" Height="306">
<UserControl.Resources>
    <SolidColorBrush x:Key="AuSupportColor" Color="#FFE5C97C"/>
</UserControl.Resources>

<Grid x:Name="MainGrid" Background="White" Margin="0,0,0,0" RequestedTheme="Default">
    <Grid x:Name="Skeleton" Margin="10,10,10,10" BorderThickness="2,2,2,2" BorderBrush="{StaticResource AuSupportColor}">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="NeedleArea"  BorderThickness="0,0,0,2" BorderBrush="{StaticResource AuSupportColor}" Background="{StaticResource AUColor}" Margin="0,0,0,0">
            <TextBlock x:Name="Label" TextWrapping="Wrap" Text="İğne Alanı / Needle Area" Foreground="White" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Noto Sans" FontWeight="Normal" Style="{StaticResource CaptionTextBlockStyle}" Margin="0,4,0,5"/>

        </Grid>
        <Grid x:Name="Datas" HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid x:Name="Name_Task_Area" HorizontalAlignment="Stretch" Margin="0,5,0,5" VerticalAlignment="Stretch" Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock x:Name="NameText" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Foreground="Red" Text="BERK BABADOĞAN" FontWeight="Bold" FontFamily="Noto Sans" Style="{StaticResource SubtitleTextBlockStyle}"/>
                <TextBlock x:Name="TaskText" Margin="0,0,0,0" TextWrapping="Wrap" Text="Salon Başkanı" TextAlignment="Center" Foreground="Black" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" FontWeight="Bold" Grid.Row="1"/>
            </Grid>
            <Grid x:Name="InfoArea" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="SpecsH_1" Margin="0,0,5,0" TextWrapping="Wrap" Text="Sınav Yeri / Exam Area: " Foreground="#FF343434" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" TextAlignment="Left"/>
                <TextBlock x:Name="SpecsH_2" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon Adı / Hall Name:" Foreground="#FF343434" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" TextAlignment="Left" Grid.Row="1"/>
                <TextBlock x:Name="SpecsH_3" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon No / Hall Number:" Foreground="#FF343434" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" TextAlignment="Left" Grid.Row="2"/>
                <TextBlock x:Name="AreaText" Margin="5,0,0,0" TextWrapping="Wrap" Text="İstanbul" Foreground="#FF343434" FontStyle="Italic" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" Grid.Column="1"/>
                <TextBlock x:Name="HallNameText" Margin="5,0,0,0" TextWrapping="Wrap" Text="A Blok 3. Kat Derslik 316" Foreground="#FF343434" FontStyle="Italic" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" Grid.Row="1" Grid.Column="1"/>
                <TextBlock x:Name="HallNoText" Margin="5,0,0,0" TextWrapping="Wrap" Text="340111" Foreground="#FF343434" FontStyle="Italic" VerticalAlignment="Stretch" FontFamily="Noto Sans" Style="{StaticResource BodyTextBlockStyle}" Grid.Row="2" Grid.Column="1"/>
            </Grid>
            <Grid x:Name="HeaderArea" HorizontalAlignment="Stretch" Margin="0,0,0,5" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <Image HorizontalAlignment="Stretch" Height="70" Margin="0,0,0,0" Grid.RowSpan="4" VerticalAlignment="Stretch" Width="70" Source="Assets/AUSmall.png"/>
                <Image HorizontalAlignment="Stretch" Height="70" Margin="0,0,0,0" Grid.RowSpan="4" VerticalAlignment="Stretch" Width="70" Grid.Column="2" Source="Assets/AnkudemSmall.png"/>
                <TextBlock x:Name="Header_1" Margin="0,0,0,0" TextWrapping="Wrap" Text="AYÖS" TextAlignment="Center" FontWeight="Bold" Foreground="#FF284985" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Style="{StaticResource SubtitleTextBlockStyle}" FontFamily="Noto Sans" Grid.Column="1"/>
                <TextBlock x:Name="Header_2" Margin="0,0,0,0" TextWrapping="Wrap" Text="SINAV GÖREV KARTI" TextAlignment="Center" Foreground="#FF284985" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource BodyTextBlockStyle}" FontFamily="Noto Sans" Grid.Row="1" Grid.Column="1"/>
                <TextBlock x:Name="Header_3" Margin="0,0,0,0" TextWrapping="Wrap" Text="EXAMINATION TASK CARD" TextAlignment="Center" Foreground="#FF284985" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource BodyTextBlockStyle}" FontFamily="Noto Sans" Grid.Row="2" Grid.Column="1"/>
                <TextBlock x:Name="DateText" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Foreground="#FF284985" Text="28 Mayıs 2016 – May 28, 2016" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource BodyTextBlockStyle}" FontFamily="Noto Sans" RenderTransformOrigin="0.5,0.5" Grid.Row="3" Grid.Column="1">
                    <TextBlock.RenderTransform>
                        <CompositeTransform ScaleY="1"/>
                    </TextBlock.RenderTransform>
                </TextBlock>
            </Grid>
        </Grid>


    </Grid>


</Grid>

我通过这种方式初始化它:

 //Initializing task card.
                var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text, HallNumber_TextBox.Text, DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.

之后,正如您所知,我们必须在任何事物上显示UserControl以使用renderTargetBitmap。所以,我准备了一个用于显示UserControl的网格。

  <Grid x:Name="RingWaiter_Grid"  BorderBrush="{ThemeResource SystemControlBackgroundBaseHighRevealBorderBrush}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Default" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="2,2,2,2" Margin="0,0,0,0" Visibility="Visible">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid x:Name="RingWaiter_SecondRow" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="2" Visibility="Visible">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="LoadValue_Ring" Text="Lütfen bekleyin..." TextWrapping="Wrap" FontWeight="Normal" Margin="10,0,10,0" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Column="1" Style="{StaticResource SubtitleTextBlockStyle}" />
                    <ProgressRing x:Name="Waiter_Ring" HorizontalAlignment="Center" Margin="10,10,10,10" VerticalAlignment="Center" Foreground="{StaticResource AndroidGreen}" IsActive="True" Width="40" Height="40"/>
                </Grid>
                <Frame x:Name="ItemAddFrame_RingWaiter" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="486" Height="306"/>
            </Grid>



 //Converting UIelement to Rendered Bitmap

                    ItemAddFrame_RingWaiter.Content = item; // Adding card to canvas.

                    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();

                    await renderTargetBitmap.RenderAsync(ItemAddFrame_RingWaiter); // Render frame.
                    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

最后,您可以在我的usercontrol中看到两个Image元素。将它绑定到Frame后看起来很完美。但是,当我使用FileSavePicker和BitmapEncoder将其导出到图像时,我的用户控件中的那些Image元素随机出现并消失。如果我尝试导出所有 WaiterGrid ,则Image控件位于其原生位置。我弄清楚了。你可以帮帮我吗?谢谢。

网格上的用户控制:

enter image description here

导出图片

enter image description here

1 个答案:

答案 0 :(得分:0)

  

然而,当我使用FileSavePicker和BitmapEncoder将其导出到图像时,我的用户控件中的那些Image元素随机出现并消失

这是因为没有足够的时间来加载图像。只要将UserControl Boolean添加到框架,就会立即渲染框架。但是在此时渲染taskcard时,图像未加载完成,因此不会渲染图像。添加ItemAddFrame_RingWaiter等待一段时间,你会发现它运作良好。

Task.Delay

ItemAddFrame_RingWaiter.Content = item; // Adding card to canvas. await Task.Delay(1000); RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(); await renderTargetBitmap.RenderAsync(ItemAddFrame_RingWaiter); // Render frame. imgshow.Source = renderTargetBitmap; 可以帮助了解原因,但不是一个好的解决方案。在您之前的帖子中,您可以看到我在答案中通过以下代码在XAML中添加Task.Delay

UserControl

如果通过这种方式添加<local:taskcard x:Name="elementToRender" Width="300" Height="350" /> ,可能不会出现上述问题。我不确定为什么要添加控制代码,如果你想要添加控制代码,请尝试监控UserControl里面的Image_Loaded事件句柄。