1
votes

Basculer le comportement -ON -OFF à l'aide d'une image ou d'une étiquette -Liaison d'une image dans une vue de liste dans les formulaires xamarin

Je voudrais changer la source de l'image de white.png en blue.png quand elle est tapée, je dois accéder à chaque comannd quand l'image change en white.png et quand elle est blue.png, aussi .it sera être utile de le définir sur vrai ou faux, selon le résultat de l'image.

tout cela viendra dans une liste. et j'ai besoin d'accéder à chaque personne touchée.

J'ai essayé:

IValueConveter

<Image
    Source="{Binding ColorImage}">  
    <Image.GestureRecognizers>
    <TapGestureRecognizer
    Command="{Binding Source={x:Reference listView}, Path=BindingContext.SwitchIMGCommand}" CommandParameter="{Binding .} "
     NumberOfTapsRequired="1" />
     </Image.GestureRecognizers>
  </Image>

Xaml

SwitchIMGCommand = new Command(AddImg);

Cela ne me montre que l'autre, ne va jamais à vrai. Idéalement, je voudrais accéder à chacun d'eux et y ajouter de la logique et évidemment changer l'image sur chacun d'eux.

La deuxième approche - le problème ici est - n'est tapée qu'une seule fois et je ne peux pas revenir à l'image précédente avec la deuxième tapée, et aussi, je ne sais pas comment accéder à chaque commande. (Je veux imiter un interrupteur marche / arrêt et chacun d'eux fait quelque chose)

public ICommand SwitchIMGCommand
            {
                get;
                set;
            }



private void AddImg(object obj)
  {
     var selection = obj as ExistingModel;
     selection.ColorImage = "FilledIcon.png";**
     ColorImage= "FilledIcon.png";**I tried this and it doesnt change 
     to this img
  }



private ImageSource imagePath = "white.png";
        public ImageSource ColorImage
        {
            get { return imagePath; }
            set
            {
                imagePath = value;
                PropertyChanged(this, new PropertyChangedEventArgs("ColorImage"));
            }
        }

Afficher le modèle

public ImageSource ColorImage { get; set; }

Constructeur

<Image Source="{Binding IsAddedToCart, Converter={StaticResource AddRemoveImage}}"/>

XAML

public class ConverterAddRemoveImage : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool isAddedToCart = (bool)value;
            if (isAddedToCart)
            {
                return "FilledIcon"; //This will be a string
            }
            else
            {
                return "EmptyIcon";  //This will be a string
            }
        }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

image xamarin.forms xaml data-binding inotifypropertychanged

1 commentaires

J'ai ajouté la fonctionnalité de bascule à la réponse de Lucas

4 Réponses :

-1
votes

Vous utilisez le mauvais type pour votre paramètre "ColorImage". La source d'une image est de type ImageSource.

En supposant que vous définissiez correctement vos images sur votre projet, le code suivant devrait résoudre votre problème

private void AddImg(object obj)
{
    ColorImage = ImageSource.FromFile("imgcolorblue.png");
}

Modifiez également le type de " ColorImage "par ImageSource.

0 commentaires

2
votes

Il semble que l'image soit dans la ViewCell d'une liste.

Vous devez définir la ColorImage dans votre modèle.

private void AddImg(object obj)
{
   var model = obj as MyModel;

   model.ColorImage = "imgcolorblue.png";

}

dans votre modèle de vue

public class MyModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;


    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string imagePath;
    public string ColorImage
    {
        get { return imagePath; }
        set
        {
            imagePath = value;
            NotifyPropertyChanged("ColorImage");
        }
    }


    //...other properties     

    public MyModel()
    {
       ColorImage = "white.png";
    }
}

5 commentaires

merci pour la réponse, je ne peux toujours pas voir l'image de l'espace réservé chaîne privée imagePath = "xxx.png";

Vérifiez ma réponse de mise à jour. Cela fonctionne bien dans mon projet. Donc, si cela ne fonctionne toujours pas de votre côté. Vous feriez mieux de partager votre échantillon pour que je puisse le tester.

Je peux voir la première image mais pas la seconde sur l'élément tapé. J'ai mis à jour le code.

Partagez votre échantillon et je le vérifierai de mon côté

continuons cette discussion dans le chat .

0
votes

Ceci est un complément à Lucas Zhang Anwser , qui est la bonne façon de le faire mais il manque la bascule Funtionality pour reconvertir à la forme d'origine.

Voici ce qui manque:

1Âº - Ajouter une propriété booléenne au modèle

private void AddImg(object obj)
{
    var model = obj as MyModel;

    if(model.IsCheckedState)
        model.ColorImage = "white.png";
    else
        model.ColorImage = "imgcolorblue.png";

    model.IsCheckedState = !model.IsCheckedState;
}

2Âº - Ajouter un vérification avant de définir ColorImage

private bool _isCheckedState;
public bool IsCheckedState
{
    get { return _isCheckedState; }
    set
    {
        _isCheckedState= value;
        NotifyPropertyChanged("IsCheckedState");
    }
}

0 commentaires

1
votes

XAML utilisant DataTrigger - ChangeIsCheckedCommand modifie la propriété IsChecked :

<OnPlatform x:Key="OnImage" x:TypeArguments="FileImageSource">
  <On Platform="Android">on.png</On>
  <On Platform="iOS">on.png</On>
  <On Platform="UWP">Assets/on.png</On>
</OnPlatform>

<OnPlatform x:Key="OffImage" x:TypeArguments="FileImageSource">
  <On Platform="Android">off.png</On>
  <On Platform="iOS">off.png</On>
  <On Platform="UWP">Assets/off.png</On>
</OnPlatform>

Resources pour OnImage et OffImage:

<Image>
  <Image.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ChangeIsCheckedCommand}" NumberOfTapsRequired="1" />
  </Image.GestureRecognizers>
  <Image.Triggers>
    <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="True">
      <Setter Property="Source" Value="{StaticResource OnImage}" />
    </DataTrigger>
    <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="False">
      <Setter Property="Source" Value="{StaticResource OffImage}" />
    </DataTrigger>
  </Image.Triggers>
</Image>

0 commentaires