如何在Xamarin.Forms xaml页面中更改图标颜色? [英] How to change icon color in Xamarin.Forms xaml page?

问题描述

当前，我正在为Android和iOS开发Xamarin.Forms PCL应用程序.在我的其中一个页面中，我定义了一个ListView. ListView.ItemTemplate的模板使用<Image Source="some_Icon.png" />显示图标.该图标显示为预期的颜色(黑色)，但是我还没有找到一种设置颜色的方法.

Currently, I am developing a Xamarin.Forms PCL application for Android and iOS. In one of my pages I define a ListView. The template for the ListView.ItemTemplate displays an icon using <Image Source="some_Icon.png" />. The icon displays as expected (black) but I have not found a way to set the color.

我想根据ViewModel中的逻辑为该图标着色.

I would like to colorize this icon based on logic in my ViewModel.

我已经通过文档和StackOverlflow搜索了答案，但都无济于事.

I have searched for answers both through the Documentation and StackOverlflow to no avail.

1. 是否有更好的方法来显示Xamarin.Forms PCL项目中的图标并设置样式?

1. Is there a better way to display and style icons from a Xamarin.Forms PCL project?

Xamarin.Forms是否需要一组资源/图像文件来提供我可能使用的每种可能的颜色?

Does Xamarin.Forms require a set of resource/image files for every possible color I might use?

推荐答案

我用图标化以获取Xamarin.Forms.我根据下面的Iconize示例代码实现了解决方案.

I solved my problem with Iconize for Xamarin.Forms. I implemented my solution based off the Iconize sample code below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
         x:Class="Iconize.FormsSample.Page1"
         Title="{Binding FontFamily}">

  <ContentPage.ToolbarItems>
    <iconize:IconToolbarItem Command="{Binding ModalTestCommand}" Icon="fa-500px" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IconColor="Red" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IsVisible="{Binding VisibleTest}" />
  </ContentPage.ToolbarItems>
  <ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Characters}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="{Binding Key}" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="{Binding Key}" VerticalTextAlignment="Center" />
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

就我而言，我只需要替换原始的<Image .../>元素，然后将其替换为 <iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.

In my case, I simply had to replace my original <Image .../> element and replace it with <iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.

在ViewModel中，我添加了CircleColor属性以根据逻辑根据需要设置图标颜色.

In my ViewModel, I added the CircleColor property to set the icon color as needed based on my logic.

这篇关于如何在Xamarin.Forms xaml页面中更改图标颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！