Text based avatar in WinRT/Windows Phone 8.1 app

Question

I working on Windows Phone 8.1 and WinRT, UWP. Now I want to create a list of members. For each item in listview, contains member's name and circle avatar. Default avatar is circle image with random color and text base on their name or they can upload their owned photo. I don't know how to generate this. I can do this on Windows Form and I am starter in Windows Phone/WinRT/UWP. How to create avatar like this?

Answer 1

So I haven't done something like this before but I gave it a try and here is what I came up with:

XAML is a magical thing and one of the features I like is something called "ValueConverters". These are classes that implement the "IValueConverter" interface and allows XAML to convert a value to look differently.

In this example, I am using ValueConverters to generate the random numbers and also get the first letter of each name.

Here are the steps:

• Create the NameToInitialConverter: this converter takes a string and returns only the first character from it:

  • Create the RandomColorGeneratorConverter: this converter is a fake one, but used to generate random colors:

  • Now in your XAML Page, add the converters you just built as page resources:

  <Page.Resources> <local:NameToInitialConverter x:Name="NameToInitialConverter" /> <local:NameToColorConverter x:Name="NameToColorConverter" /> </Page.Resources>

  • And then make a custom list view item by using DataTemplate:

    <ListView ItemsSource="{x:Bind Path=Names}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="x:String">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Ellipse
                        Width="96"
                        Height="96"
                        Fill="{x:Bind Converter={StaticResource NameToColorConverter}}" />

                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="45"
                        Foreground="White"
                        Text="{x:Bind Converter={StaticResource NameToInitialConverter}}" />

                    <TextBlock
                        Grid.Column="1"
                        Margin="8"
                        VerticalAlignment="Center"
                        FontSize="32"
                        Text="{x:Bind}" />

                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Hopefully, this helps you in building the UI you want.