Having issues displaying images Xamarin Forms using only C# - c#

I ask this question with reference to this website https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/#Local_Images
I tried the xaml code on the website and it works, however after I created a new xamarin PCL project and tested the c# code. It failed to display images.
What I did:
Removed everything from the AboutPage.xaml till it looks 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"
x:Class="EmbbedImages.Views.AboutPage"
xmlns:vm="clr-namespace:EmbbedImages.ViewModels;"
Title="{Binding Title}">
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
</ContentPage>
And then for the AboutPage.xaml.cs, I modified it such that it looks like the following:
using Xamarin.Forms;
namespace EmbbedImages.Views
{
public partial class AboutPage : ContentPage
{
public AboutPage()
{
InitializeComponent();
var beachImage = new Image { Aspect = Aspect.AspectFit };
beachImage.Source = ImageSource.FromFile("butterfly.jfif");
}
}
}
I have ensured that the butterfly.jfif image is added into my android drawable folder, however no images are being displayed. As I am new to xamarin and Android and c# any help would be greatly appreciated.

The image probably won't display, because it's not part of the Page.
If you've added it to the Page and it still won't show it would have to be a problem in loading / opening the file / decoding it.
Either you add it in XAML or edit your code to the following:
using Xamarin.Forms;
namespace EmbbedImages.Views
{
public partial class AboutPage : ContentPage
{
public AboutPage()
{
InitializeComponent();
var beachImage = new Image { Aspect = Aspect.AspectFit };
beachImage.Source = ImageSource.FromFile("butterfly.jfif");
this.Content = beachImage;
}
}
}
Adding it in XAML would look like that:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EmbbedImages.Views.AboutPage"
xmlns:vm="clr-namespace:EmbbedImages.ViewModels;"
Title="{Binding Title}">
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<Image x:Name="beachImage" Aspect="AspectFit">
</ContentPage.Content>
</ContentPage>
And the code behind:
using Xamarin.Forms;
namespace EmbbedImages.Views
{
public partial class AboutPage : ContentPage
{
public AboutPage()
{
InitializeComponent();
beachImage.Source = ImageSource.FromFile("butterfly.jfif");
}
}
}

Related

Putting Title into Navigation Back bar in Xamrin forms

Hi I seem to be having issues getting my title to appear in the back bar part of the navigation area.
This is my code in my xaml:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Project.Settings">
<NavigationPage.TitleView>
<Label Text="Settings" HorizontalTextAlignment="Center"/>
</NavigationPage.TitleView>
<ContentPage.Content>
</ContentPage.Content>
This is my code in my xaml.cs:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Project
{
public partial class Settings : ContentPage
{
public Settings()
{
InitializeComponent();
NavigationPage.SetHasBackButton(this, true);
NavigationPage.SetHasNavigationBar(this, true);
NavigationPage.GetTitleView(this);
}
}
}
This is what my code is doing:
I want to do this:

CarouselView.Content is empty

I try study is new componet CarouselView and с# in total.
But I have problem.
This code display is empty content in CarouselView. Why?
I send is fill code my colutions.
<?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:carousel="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
xmlns:local="clr-namespace:App6"
x:Class="App6.MainPage">
<StackLayout>
<Image Source="home.png"/>
<carousel:CarouselViewControl x:Name="MyCV" BackgroundColor="Black">
<carousel:CarouselViewControl.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding TestLine}"></Label>
</StackLayout>
</DataTemplate>
</carousel:CarouselViewControl.ItemTemplate>
</carousel:CarouselViewControl>
</StackLayout>
</ContentPage>
namespace App6
{
public partial class MainPage : ContentPage
{
class CustomCell
{
public string TestLine { get; set; }
}
public MainPage()
{
InitializeComponent();
List<CustomCell> myCarousel = new List<CustomCell>();
myCarousel.Add(new CustomCell { TestLine = "Line 1" });
myCarousel.Add(new CustomCell { TestLine = "Line 2" });
MyCV.ItemsSource = myCarousel;
}
}
}
Your code is correct, so your problem is in the visual layer. Try to define the height and width wherever possible and it should resolve the problem. CarouselView isn't the official control and isn't up to standards of Xamarin's built-in controls so it has some somewhat unexpected behaviors like this.

Xamarin ToolbarItem Icon not showing in Android

I have a problem when trying to load the Icon of a ToolbarItem in Xamarin: It doesn't show up. The toolbar certainly exists. I have handled the Click method and it works, but the Icon is not visible. the ".ico" file exists in all the "drawable" folders in the Android project. It's the same .ico file I use in another solution and there it works just fine as the icon of a ToolbarItem, but here it doesn't work. I have tried to load an embedded image, but it doesn't work either. If I set its Text property, it is shown properly. I have a HomePage which is a MasterDetailPage, and the detail of this page is RootPage. On RootPage I have the ToolbarItem. Here are my xaml codes and the code behind:
HomePage:
<?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:views="clr-namespace:ITEC.Views;assembly=ITEC"
x:Class="ITEC.Views.HomePage"
IsPresented="True">
<MasterDetailPage.Master>
<ContentPage Title="Home" Padding="0,20,0,0">
<StackLayout>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<views:RootPage/>
</MasterDetailPage.Detail>
</MasterDetailPage>
Code behind:
using ITEC.Services;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace ITEC.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : MasterDetailPage
{
private OptionService _optionService;
public HomePage()
{
InitializeComponent();
Detail=new NavigationPage(new RootPage());
_optionService = new OptionService();
listView.ItemsSource = _optionService.GetOptions();
}
}
}
RootPage:
<?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:embedded="clr-namespace:ITEC.MarkupExtensions"
x:Class="ITEC.Views.RootPage">
<ContentPage.ToolbarItems>
<ToolbarItem Icon="settings.ico" Clicked="MenuItem_OnClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
<StackLayout>
<Label>Hello world</Label>
</StackLayout>
</ContentPage>
Code behind:
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace ITEC.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RootPage : ContentPage
{
public RootPage()
{
InitializeComponent();
}
private void MenuItem_OnClicked(object sender, EventArgs e)
{
DisplayAlert("Hello", "OK", "No");
}
}
}
Try png file for your icon. i think it might be work.

Why are UI components always private in Xamarin.Forms?

I'm building Xamarin.Forms application.
My View:
<?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="TestApp.Mobile.Views.MainView">
<Grid>
<Frame x:Name="TheFrame" />
</Grid>
</ContentPage>
Then In App.cs I want to access TheFrame. Like this:
MainView mainWindow = new MainView ();
someFunction(mainWindow.TheFrame);
But! This is how auto-generated MainView.cs looks like:
public partial class MainView : ContentPage {
private Frame MainFrame;
private void InitializeComponent() {
this.LoadFromXaml(typeof(MainView));
MainFrame = this.FindByName<Frame>("MainFrame");
}
}
WHY?! How can I access TheFrame in App.cs?
You would only be able to access the Frame from the code-behind using the x:Name property. Why do you need to access it from App.cs?
You could declare the Frame in App.cs and then add it to your page, which would allow it to be accessed from anywhere.

Xamarin.Forms accessing controls written in markup from Code

Im trying to add some items to a Listview which i added using Xamarin.Forms markup in an xaml file.
The button can be accessed by hooking with the click event.But since the listview is empty i need the event like ondraw like in winforms, so that i can hook to it when it is drawn.
In the XAML file I have :
<?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="ButtonXaml.ButtonXamlPage">
<StackLayout>
<Button Text="Tap for click count!"
BorderWidth="10"
TextColor="Red"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
<ListView
HorizontalOptions="Center"
/>
</StackLayout>
</ContentPage>
In the .cs file i have
using System;
using Xamarin.Forms;
namespace ButtonXaml
{
public partial class ButtonXamlPage
{
int count = 0;
public ButtonXamlPage()
{
InitializeComponent();
}
public void OnButtonClicked(object sender, EventArgs args)
{
((Button)sender).Text = "You clicked me";
}
}
}
So should i hook to events in Listview or can i do something like Resource.getElementbyID like we do in android
To access a Forms control in the code-behind, you need to assign it a name, using the x:Name attribute
in XAML:
<ListView HorizontalOptions="Center" x:Name="MyList" />
in code:
MyList.ItemsSource = myData;
There is a bug in Xamarin where VS doesn't see the defined x:Name
http://forums.xamarin.com/discussion/25409/problem-with-xaml-x-name-and-access-from-code-behind
Say you've defined an image in XAML:
<Image x:Name="myImageXName" />
Then this should work in code behind:
this.FindByName<Image>("myImageXName");
In my case the problem was lack of line XamlCompilation(XamlCompilationOptions.Compile)] in .xaml.cs file.
Example:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainPageViewModel();
}
...
}

Categories