WinRT/Windows Phone 8.1 应用中基于文本的头像
Text based avatar in WinRT/Windows Phone 8.1 app
我正在研究 Windows Phone 8.1 和 WinRT、UWP。现在我想创建一个成员列表。对于列表视图中的每个项目，包含成员的姓名和圈子头像。默认头像是圆形图像，颜色随机，文字基于他们的名字，或者他们可以上传自己的照片。我不知道如何生成这个。我可以在 Windows 表单上执行此操作，并且我是 Windows Phone/WinRT/UWP 的初学者。如何创建这样的头像？
所以我以前没有做过这样的事情，但我试了一下，这是我想出的：
XAML 是一个神奇的东西，我喜欢的功能之一是 "ValueConverters"。这些 类 实现了 "IValueConverter" 接口并允许 XAML 将值转换为不同的外观。
在此示例中，我使用 ValueConverters 生成随机数并获取每个名称的第一个字母。
步骤如下：
创建 NameToInitialConverter：此转换器接受一个字符串，returns 仅获取其中的第一个字符：
创建 RandomColorGeneratorConverter：这个转换器是假的，但用于生成随机颜色：
现在在您的 XAML 页面中，添加您刚刚构建的转换器作为页面资源：
<Page.Resources>
<local:NameToInitialConverter x:Name="NameToInitialConverter" />
<local:NameToColorConverter x:Name="NameToColorConverter" />
</Page.Resources>
- 然后使用 DataTemplate 创建自定义列表视图项：
</p>
<pre><code> <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>
希望这可以帮助您构建您想要的 UI。
我正在研究 Windows Phone 8.1 和 WinRT、UWP。现在我想创建一个成员列表。对于列表视图中的每个项目，包含成员的姓名和圈子头像。默认头像是圆形图像，颜色随机，文字基于他们的名字，或者他们可以上传自己的照片。我不知道如何生成这个。我可以在 Windows 表单上执行此操作，并且我是 Windows Phone/WinRT/UWP 的初学者。如何创建这样的头像？
所以我以前没有做过这样的事情，但我试了一下，这是我想出的：
XAML 是一个神奇的东西，我喜欢的功能之一是 "ValueConverters"。这些 类 实现了 "IValueConverter" 接口并允许 XAML 将值转换为不同的外观。
在此示例中，我使用 ValueConverters 生成随机数并获取每个名称的第一个字母。
步骤如下：
创建 NameToInitialConverter：此转换器接受一个字符串，returns 仅获取其中的第一个字符：
创建 RandomColorGeneratorConverter：这个转换器是假的，但用于生成随机颜色：
现在在您的 XAML 页面中，添加您刚刚构建的转换器作为页面资源：
<Page.Resources> <local:NameToInitialConverter x:Name="NameToInitialConverter" /> <local:NameToColorConverter x:Name="NameToColorConverter" /> </Page.Resources>- 然后使用 DataTemplate 创建自定义列表视图项：
</p>
<pre><code> <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>
希望这可以帮助您构建您想要的 UI。