renderTargetBitmap.RenderAsync Игнорирует изображение в UserContol

Question

У меня есть 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();

Наконец, вы можете увидеть два элемента Image в моем usercontrol. Это выглядит отлично после привязки его к раме. Однако, когда я экспортировал его в изображение с помощью FileSavePicker и BitmapEncoder, эти элементы Image в моих пользовательских элементах управления случайным образом появляются и исчезают. Если я попытаюсь экспортировать все WaiterGrid, элементы управления изображения будут стоять на своем месте. Я не мог понять. Не могли бы вы помочь мне? Спасибо.

Пользовательский контроль по сетке:

Экспортированное изображение

Answer 1

Однако, когда я экспортировал его в изображение с помощью FileSavePicker и BitmapEncoder, эти элементы Image в моих пользовательских элементах управления случайно появляются и исчезают.

Это вызвано нехваткой времени для загрузки изображений. Как только вы добавите UserControl 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;

Task.Delay может помочь узнать причину, но не является хорошим решением. В своей предыдущей теме вы могли видеть, что в моем ответе я добавляю UserControl в XAML по коду:

<local:taskcard
    x:Name="elementToRender"
    Width="300"
    Height="350" />

Если добавить UserControl таким образом, вышеупомянутая проблема может не появиться. Я не уверен, почему вы добавляете контрольный код, если вы хотите добавить контрольный код, попробуйте отслеживать Image_Loaded дескриптор события от вашего UserControl внутри.