Define image for button inside ListView Xamarin Forms

Question

Define image for button inside ListView Xamarin Forms

Navigation

#1 by (1 votes)

0

How to set another image to a Button that is within ListView by .cs or ViewModel ? I can not access this Button in .cs because it is within ListView .

In my xaml, the button already has an image, however in a certain part of the code it needs to assign another image.

XAML

<Button x:Name="btnEditar" BackgroundColor="Transparent" 
        Image="editar.png" HeightRequest="25" WidthRequest="25" 
        Command="{Binding Path=BindingContext.EditarCommand, 
    Source={x:Reference MeusEnderecosView}}" CommandParameter="{Binding .}" />

I've tried it that way in .cs:

var btnEditar = this.FindByName<Button>("btnEditar");
btnEditar.Image = "editar2.png";

But the non-existent object error.

How can I resolve this?

c# listview xamarin button xamarin-forms

asked by anonymous 06.01.2017 / 12:21

1 answer

Driver code runs but nothing happens Page attribute, template, in a wordpress "project"

score 1 · Accepted Answer

To solve this scenario, you can implement an IValueConverter, which will be responsible for validating and displaying your image according to the desired rule, and displaying the images according to the devices.

In this example I created a simple project, where the rule is based on the name that comes from Binding, you are free to implement the rule as you wish.

Follow the code:

ConvertValue File

using System;
using System.Globalization;
using Xamarin.Forms;

namespace XFlImageButtonListView.Converter
{
    /// <summary>
    /// Método responsável em Exibir icone no botão, através de uma regra de negócio
    /// </summary>
    public class ImageViewConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //Valida regra de negócio para exibir imagem no botão
            if(value.ToString().Equals("Nome1"))
                //Exibe imagem para cada platforma.
                return Device.OnPlatform<String>("callanswerIOS.png", "callanswer.png", "img/callanswerUWP.png");
            else
                //Exibe imagem para cada platforma.
                return Device.OnPlatform<String>("pointingdownIOS.png", "pointingdown.png", "img/pointingdownUWP.png");

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //Volta a imagem padrão para cada platforma.
            return Device.OnPlatform<String>("pointingdownIOS.png", "pointingdown.png", "img/pointingdownUWP.png");
        }
    }
}

XAML file

<?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:local="clr-namespace:XFlImageButtonListView"
             xmlns:converter="clr-namespace:XFlImageButtonListView.Converter"
             x:Class="XFlImageButtonListView.MainPage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <converter:ImageViewConverter x:Key="imgConvert"></converter:ImageViewConverter>
    </ResourceDictionary>
  </ContentPage.Resources>
  <ContentPage.Content>
    <StackLayout VerticalOptions="Center" Spacing="50">

      <ListView x:Name="lstPalestrantes"
          ItemsSource="{Binding Palestrantes}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.View>
                <Button Text="{Binding Nome}" Image="{Binding Nome, Converter={StaticResource imgConvert}}" BackgroundColor="Transparent" />
              </ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>


    </StackLayout>
  </ContentPage.Content>

</ContentPage>

I've created a solution in github for this, if you want to know more details: link

I hope I have helped.

Doubts, I am at your disposal.