Question

我想在我的应用中为用户显示个人资料图片。如果数据源中没有可用的图像，我想生成Microsoft使用的那些动态图像（包含人名的首字母）。

UWP有可能吗？我发现样本导致Windows.Graphics.Imaging命名空间中的类型，但它们正在操纵现有图像而不是创建新图像。

Answer 1

RenderTargetBitmap可以选择将您的UI元素呈现给图像，这些图像几乎可以与您正在寻找的图像格式相匹配。下面是从网格渲染图像的方法。

public static async Task<IRandomAccessStream> RenderToRandomAccessStream(this UIElement element)
{
    RenderTargetBitmap rtb = new RenderTargetBitmap();
    await rtb.RenderAsync(element);

    var pixelBuffer = await rtb.GetPixelsAsync();
    var pixels = pixelBuffer.ToArray();

    // Useful for rendering in the correct DPI
    var displayInformation = DisplayInformation.GetForCurrentView();

    var stream = new InMemoryRandomAccessStream();
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
    encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                         BitmapAlphaMode.Premultiplied,
                         (uint)rtb.PixelWidth,
                         (uint)rtb.PixelHeight,
                         displayInformation.RawDpiX,
                         displayInformation.RawDpiY,
                         pixels);

    await encoder.FlushAsync();
    stream.Seek(0);

    return stream;
}

取自Render XAML to image, Blur app UI, or how to enable awesome user experiences in your UWP app

但这里有一个问题。 RenderTargetBitmap.RenderAsync(UIElement Reference)只会呈现附加到VisualTree的元素。即，如果视图中存在UIElement，它只能转换为网格。（相信我，将可见性设置为折叠将不起作用）。

所以我最终做的是将网格宽度/高度设置为50但图像宽度/高度设置为60.

查看我的XAML

<Grid x:Name="LayoutRoot" VerticalAlignment="Center">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid Width="50" Height="50" Visibility="Visible" Name="GRDData" Background="LightBlue">
        <TextBlock Name="tbModded" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
    <Image Width="60" Height="60" x:Name="bgImage" Margin="10,0"/>
    <TextBlock Grid.Column="1" Margin="10,0">
        <Run x:Name="FN" />
        <Run x:Name="LN" />
    </TextBlock>
</Grid>

现在这是我背后的代码。只是为了显示Element在后端，我将网格背景设置为红色而不是蓝色，就像它在xaml中一样。

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    string FirstName = "Test data";
    FN.Text = FirstName;
    string LastName = "Data Item";
    LN.Text = LastName;
    string ModdedString = FirstName.Substring(0, 1) + LastName.Substring(0, 1);
    tbModded.Text = ModdedString;
    GRDData.Background = new SolidColorBrush(Colors.Red);
    IRandomAccessStream stream = await RenderToRandomAccessStream(GRDData);
    BitmapImage image = new BitmapImage();
    image.SetSource(stream);
    bgImage.Source = image;
}

结束输出将

在UWP应用程序中创建动态配置文件图像

1 个答案: