Xamarin Forms Image doesn't get shown - xamarin

I have a problem. I want to use an IconView to change the color of an Image, so I use this project: https://github.com/andreinitescu/IconApp.
Now I added the Renderers in both IOS and Android and I added the IconView.cs class to the project. In my xaml I am trying to use the following code:
<controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />
But when I run my app, nothing shows up and I have no clue what I am doing wrong? If I create the following Image:
<Image Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" />
The image gets shown!
Here is my full XAML:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Bluepixel.Tools"
mc:Ignorable="d"
x:Class="Bluepixel.Pages.Devices">
<StackLayout Orientation="Vertical">
<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked" x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Command="{Binding Path=BindingContext.DeleteDevice, Source={x:Reference MyListView}}}"
CommandParameter="{Binding Id}"
Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
<AbsoluteLayout HeightRequest="70" Margin="20,10,20,10">
<StackLayout Opacity="0.3" BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />
</Grid>
</StackLayout>
</AbsoluteLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
What am I doing wrong?

The library is not use to change the color of an Image, if you see the source code in the renderer in the iOS project, it changes the tintColor of UIImage in iOS:
var uiImage = new UIImage(Element.Source);
uiImage = uiImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
Control.TintColor = Element.Foreground.ToUIColor();
Control.Image = uiImage;
You can see the document and this thread to know how tint color works.
After some test, I found if you use a image which background is transparent, the image will show successfully with this plugin.
I uploaded a sample project here and there are several images you can test under resource folder. I think it's the same behavior in Android.

Related

is there CarouselView has event handler about itemselected like listview

<ContentPage.ToolbarItems>
<ToolbarItem Clicked="ToolbarItem_Clicked"
Text="+ Search "
>
</ToolbarItem>
</ContentPage.ToolbarItems>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
<StackLayout Grid.Row="0" >
<CarouselView x:Name="carouselview"
PeekAreaInsets="50"
>
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20"
/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="500"
WidthRequest="500"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding NameProduct}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="xamarinremovebg.png"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</StackLayout>
This my code I want to use itemselected event in CarouselView.I mean item selected in listview.But there is none in CarouselView.All I want is when I click the item1 in CarouselView i want go to a detail page of item1 thank you so much for helping me.
There is no such a default event like in ListView . However we could add a TapGestureRecognizer on DataTemplate as a workaround .
in xaml
1.set the name of the ContentPage
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="xxx.MainPage"
x:Name="page"
>
Add TapGestureRecognizer
<DataTemplate>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ItemSelectedCommand,Source={x:Reference page}}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame>
//...
</Frame>
</StackLayout>
</DataTemplate>
in your ViewModel
public ICommand ItemSelectedCommand{ get; set; }
In the constructor:
ItemSelectedCommand= new Command((item)=>{
// item here is type of the model in the ItemSource of CarouselView
// var model = item as yourmodel
});

Xamarin Add dividing line into Grid

I have a problem. I want created this ListView using the following code:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But now I want to add a line above the first Label tag. To create the line I want I use this code:
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:
The property 'View' is set more than once.
What am I doing wrong and how can I fix this?
I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned
the other things you could try
add another row to the Grid for the BoxView
place the Grid inside of a StackLayout with the BoxView

partial declartion must not specify different base class in Xamarin

I'm building a Xamarin Crossplatform App
For drawer menu I'm following this tutorial : https://www.youtube.com/watch?v=aYjK0cPjZMQ
But the problem is when I change my MainPage from ContentPage to MasterDetailPage it shows me this error:
MainPage.XAML :
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Last_MSPL"
x:Class="Last_MSPL.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Xam Buddy" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<StackLayout Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="#e8e8e8"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="{Binding Title}"
FontSize="Small"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Help me through this so I can move forward, Thanks!
I just Clean my project, rebuild and it works
because the generated .g.cs from the xaml has not been refreshed so it was giving this error

Embed image not showing in Xamarin.Forms

I have two images in 'Images' folder. Trying to load these images in page but image not showing on page. It does not produce any error in debug. I am checking in Xamarin live player android device.
ImageResourceExtension.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Forms.Internals;
namespace Buffting
{
// You exclude the 'Extension' suffix when using in Xaml markup
[Preserve(AllMembers = true)]
[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
public string Source { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (Source == null)
return null;
// Do your translation lookup here, using whatever method you require
var imageSource = ImageSource.FromResource(Source);
return imageSource;
}
}
}
BeautySalon.xaml
<?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:Buffting;assembly=Buffting"
x:Class="Buffting.Home.BeautySalon"
Title="Beauty Salon">
<ContentPage.Content>
<ListView x:Name="SalonList" RowHeight="370">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="5,5,5,-5" OutlineColor="Blue" HasShadow="true">
<Grid>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="200" Source="{ Binding SalonImage}" VerticalOptions="Fill" Aspect="AspectFill" />
</Grid>
<Grid Grid.Row="1" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Margin="0, 40, 0, 0" Text="{ Binding SalonName }" FontSize="Large" TextColor="White" />
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
</Grid>
<Grid Grid.Row="2" Padding="0, 0, 10, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Location:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="0" Grid.Column="1" Text="{ Binding Location}" />
<Label Grid.Row="1" Grid.Column="0" Text="Full Address:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="1" Grid.Column="1" Text="{ Binding Address}" />
<Label Grid.Row="2" Grid.Column="0" Text="Phone:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="2" Grid.Column="1" Text="{ Binding Phone}" />
<Label Grid.Row="3" Grid.Column="0" Text="Opening Time:" FontAttributes="Bold" FontSize="Small" TextColor="Black" />
<Label Grid.Row="3" Grid.Column="1" Text="{ Binding OpeningTime}" />
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
I am using this code but image is not loading. I ma new in Xamarin please guide me.
It's wrong, the images are placed within each native project. For Xamarin.Forms you should place the images in the Drawables folders.
If your project is android and ios ,you finally have two images : one in iosproject/Resources and one in AndroidProject/Resources/Drawab.
see Images Doc
If you want to load your images from the shared assembly. Ensure images are set as "EmbeddedResource" (Right Click: Properties, Build Action).
You have too add each image in there native Projects. here is a sample of how it should look like:
You can use the following plugin to generate your images for iOS:
Plugin: Link
For Android:
For IOS :
You can now reference your images in your xaml :
<Image Source="star_outline.png" />
<Image Source="star_selected.png" />
UPDATE:
In your xaml change:
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="{local:ImageResource Buffting.Images.star_outline.png}" />
with :
<Image Grid.Row="1" Grid.Column="1" x:Name="Star" Source="star_outline.png" />
The image should appear , This answers your main question. I'm not sure why your using IMarkupExtension , your not even calling it in the xaml
I had this same problem and found the answer in this thread. Embedded images not showing
When using the ImageResourceExtension the Source property should be prefixed with the Assembly Na

Is it possible to create sdk/library with views for android and ios in xamarin?

Can we create sdk or library in xamarin for android and IOS which. And the library or sdk should also contain some UI (views). Is it possible that library or sdk can contain views that we can use with some other projects of xamarin?
Yes! You can custom Controls with Bindable Properties in Xamarin.Forms then package it in a nuget package.
For example: you can create a ContentView in another folder called MyCustomControl like this
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BindablePropertyDemo.Custom.MyCustomControl">
<Grid x:Name="grid"
Padding="10,40,10,10"
HeightRequest="160"
VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="image"
HeightRequest="100"
HorizontalOptions="Center"/>
<Label x:Name="title"
Text="BASKETBALL"
Grid.Row="1"
FontSize="20"
VerticalOptions="Center"
TextColor="White"
HorizontalOptions="Center"
FontAttributes="Bold"/>
</Grid>
</ContentView>
And then you can call this control from any page like this:
<?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:BindablePropertyDemo"
xmlns:custom="clr-namespace:BindablePropertyDemo.Custom"
x:Class="BindablePropertyDemo.MainPage"
BackgroundColor="#33334c">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor="#ff4284" Padding="10">
<Image Source="hamburger.png"/>
</Grid>
<Label Grid.Column="1"
Text="Home"
TextColor="#ff4284"
FontSize="20"
Margin="5,0,0,0"
HorizontalOptions="Start"
VerticalOptions="Center"/>
</Grid>
<StackLayout Spacing="0" Grid.Row="1"><
<!-- SEE HERE!! -->
<custom:MyCustomControl BackgroundColor="#76dab2"
TitleText="BASKETBALL"
Image="basketball.png"/>
<custom:MyCustomControl BackgroundColor="#7c57e4"
TitleText="FOOTBALL"
Image="football.png"/>
<custom:MyCustomControl BackgroundColor="#f1b136"
TitleText="GRIDIRON"
Image="gridiron.png"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And you will have a result like this:
I have taken this example of this tutorial, you can continue to have more information.
You can find their source code here: https://github.com/mindofai/BindablePropertyDemo

Resources