Create dynamic profile image in UWP app - drawing

Question

I want to display profile images for users in my app. If no image is available from data source I want to generate those dynamic images Microsoft uses (containing the initials of a persons name).
Is this possible in UWP? I have found samples resulting in types from Windows.Graphics.Imaging namespace but they are manipulating existing images and not creating new ones.

Answer 1

RenderTargetBitmap has option to render your UI Elements to Images which can almost match the Image Format that you are looking for with little fiddling. Below is the method that will render the Image from a Grid.
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;
}
Taken from Render XAML to image, Blur app UI, or how to enable awesome user experiences in your UWP app
But there is a catch here. RenderTargetBitmap.RenderAsync(UIElement Reference) will only render an element that is attached to VisualTree. i.e, it can only convert a UIElement to Grid if it is present on the View. (Trust Me, Setting Visibility to Collapsed will not work).
So what I ended up doing is setting the Grid Width/Height to 50 But Image Width/Height to 60.
See My 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>
Now this is my code behind. Just for the sake of showing that Element is in the backend, I am setting the Grid Background to Red rather than Blue like the way it is in 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;
}
End Output Will be