How to bind image source to dynamic changable property? - xaml

Question

I'm trzuying to show diferent images in ListView frames, depending of ServiceName in my model.
So here is my model:
public class IrrigNetModelItem
{
public int ID { get; set; }
public string Message { get; set; }
public DateTime Date { get; set; }
public string DateText { get; set; }
public int StationId { get; set; }
public string StationName { get; set; }
public float StationLongitude { get; set; }
public float StationLatitude { get; set; }
public int ServiceId { get; set; }
public string ServiceName { get; set; }
}
And here is part of ViewModel
public ObservableCollection<IrrigNetModelItem> IrrigNetCollection { get; set; } = new ObservableCollection<IrrigNetModelItem>();
public async void GetData()
{
base.OnAppearing();
dialog.Show();
var token = LocalData.Token;
var data = await IrrigNetService.GetServices(token, "en");
var irrigNetModel = new IrrigNetModelItem();
foreach (var d in data.items)
{
IrrigNetCollection.Add(d);
if (d.ServiceName == "irrigNET")
{
IrrigCounter++;
//FrameImage = "service_irrig_img.png";
//FrameHeaderColor = Color.FromHex("#33A8F7");
}
else
{
AlertCounter++;
//FrameImage = "alert.png";
//FrameHeaderColor = Color.FromHex("#2BB24B");
}
}
dialog.Hide();
}
For now, Service name could be "irrigNET" and "alertNET" and depending of that I want to set diferent image source in my ListView in View.
Here is View:
<ListView
ItemsSource="{Binding IrrigNetCollection}"
IsVisible="{Binding IsListVisible}"
ItemSelected="FrameList_ItemSelected"
HasUnevenRows="False"
x:Name="FrameList"
Grid.Row="2"
RowHeight="190"
Margin="0,0,0,20"
SeparatorVisibility="None"
HeightRequest="0">
<ListView.ItemTemplate Padding="0">
<DataTemplate>
<ViewCell>
<Frame
HasShadow="True"
Grid.ColumnSpan="5"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#f4f4f4"
BorderColor="LightGray"
CornerRadius="10"
Margin="25,10,25,10"
Padding="0">
<Grid
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
IsEnabled="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="13"/>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<BoxView Color="{Binding Path=BindingContext.FrameHeaderColor, Source={x:Reference FrameList}}"
Grid.Row="0"
Grid.ColumnSpan="6"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"/>
<Image Source="{Binding Path=BindingContext.FrameImage, Source={x:Reference FrameList}}"
Grid.Column="1"
Grid.Row="1"
Grid.RowSpan="3"
Margin="0,20,0,0"/>
<Image Source="{Binding Path=BindingContext.FrameIcon, Source={x:Reference FrameList}}"
Grid.Column="2"
Grid.Row="1"
HorizontalOptions="Start"
VerticalOptions="Center"
HeightRequest="17"
WidthRequest="17"/>
<Label
Text="{Binding StationName}"
VerticalTextAlignment="Start"
HorizontalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="Center"
Margin="3,3,0,0"
FontSize="18"
Grid.Column="3"
Grid.Row="1"
FontFamily="{StaticResource BalooBhai}"
TextColor="#262f41"/>
<Image Source="service_arrow.png"
Grid.Column="4"
Grid.Row="2"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="18"
WidthRequest="18"/>
<Image Source="clock.png"
Grid.Column="2"
Grid.Row="3"
HorizontalOptions="Start"
VerticalOptions="Center"/>
<Label Text="{Binding DateText}"
FontSize="14"
FontFamily="{StaticResource SegoeUIB}"
Grid.Column="3"
Grid.Row="3"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
Margin="3,0,0,0"
TextColor="#262f41"/>
<Label Text="{Binding Message}"
Grid.Column="3"
Grid.Row="2"
VerticalTextAlignment="Start"
HorizontalOptions="Center"
VerticalOptions="Center"
FontFamily="{StaticResource SegoeUI}" FontSize="13"
TextColor="#262f41"
Margin="0,0,10,0"/>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="40">
<StackLayout Orientation="Horizontal"
BackgroundColor="#3498DB"
VerticalOptions="FillAndExpand">
<Label Text="TeStIrAnjE"
TextColor="White"
VerticalOptions="Center" />
<Button Text="Edit"
TextColor="White"
FontSize="20"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
You'll se what I tried in Image tags, but for now any image ar not show.
This is proporties that I try to use in my ViewModel:
//public string FrameIrrigImage { get; set; } //= "service_irrig_img.png";
//public Color FrameIrrigHeaderColor { get; set; } //= Color.FromHex("#33A8F7");
//public string FrameAlertImage { get; set; } //= "alert.png";
//public Color FrameAlertHeaderColor { get; set; } // = Color.FromHex("#2BB24B");
//public string typeNet { get; set; }
//public Color typeNETcolortext { get; set; }
//public Color allertNETcolortext { get; set; }
This is what I want to achive:
But this is what I get:
(As you can see BoxView heder is also diferent color blue/color but I will get it how to change it on Image example)
Also I tried to achive it using properties:
public string FrameImage { get; set; }
public Color FrameHeaderColor { get; set; }
Set them values in for loop and Bind them in xaml, but then it's all set (image and color) as for the last element in ListView

Answer 1

As Jason said, there are two way to do this, one is use IValueConverter by ServiceName, another is add FrameImage in model, then change FrameImage by serviceName.
I do one simple that you can take a look,if you add FrameImage in model, please implement INotifyPropertyChanged interface.
<ContentPage
x:Class="App4.Page9"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converter="clr-namespace:App4">
<ContentPage.Resources>
<converter:convert1 x:Key="converterimage" />
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<ListView ItemsSource="{Binding model2s}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding firstname}" />
<Image Source="{Binding imagepath}" />
<Image Source="{Binding Id, Converter={StaticResource converterimage}}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
public partial class Page9 : ContentPage
{
public ObservableCollection<model2> model2s { get; set; }
public Page9 ()
{
InitializeComponent ();
model2s = new ObservableCollection<model2>()
{
new model2(){Id=1,firstname="cherry"},
new model2(){Id=2,firstname="mattew"},
new model2(){Id=3,firstname="annine"},
new model2(){Id=4,firstname="barry"}
};
foreach(model2 m in model2s)
{
if(m.Id%2==0)
{
m.imagepath = "a1.jpg";
}
else
{
m.imagepath = "a2.jpg";
}
}
this.BindingContext = this;
}
}
public class model2:ViewModelBase
{
public int Id { get; set; }
public string firstname { get; set; }
private string _imagepath;
public string imagepath
{
get { return _imagepath; }
set
{
_imagepath = value;
RaisePropertyChanged("imagepath");
}
}
}
Converter:
class convert1 : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int id = (int)value;
if(id%2==0)
{
return "a1.jpg";
}
else
{
return "a2.jpg";
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}