I need to bind the image to the <Image> control in Xamarin.
I use followed the code found here and I could do this by hard coding the image name in the XAML tag.
But how can I do this in code behind as the image name is from SQLite database and the images are in Images.MyPages folder.
XAML 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="SApp.Views.SPages"
xmlns:local="clr-namespace:SApp.MarkupExtensions">
<ContentPage.Content>
<StackLayout>
<Image Source="{local:QEmbeddedImage ResourceId=SApp.Images.SPages.page0.jpg}" x:Name="pageImage" Aspect="AspectFill"></Image>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using SApp.MarkupExtensions;
namespace SApp.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SPages : ContentPage
{
public SPages()
{
InitializeComponent();
}
}
}
EmbeddedImage implementation:
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace SApp.MarkupExtensions
{
[ContentProperty("ResourceId")]
public class QEmbeddedImage : IMarkupExtension
{
public string ResourceId { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (string.IsNullOrWhiteSpace(ResourceId))
return null;
return ImageSource.FromResource(ResourceId);
}
}
}
But how can I do this in code behind as the image name is from SQLite database and the images are in Images.MyPages folder.
From your description, you want to display image by code behind, the image is stored in folder, build action as Embedded resource, am I right?
If yes, you can take a look the following code:
<Image
x:Name="image1"
HeightRequest="200"
WidthRequest="200" />
Display image by code behind:
public Page1()
{
InitializeComponent();
image1.Source = ImageSource.FromResource("FormsSample.images.image2.png", typeof(Page1).GetTypeInfo().Assembly);
}
This is my project screenshot:
Related
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:
i'm new in developing app with xamarin. I'm developing my first crossplatform app using xamarin forms. If you can give me the simpliest solution for my problem with examples.
i have a MainPage.xaml with some stacklayout. in one of this stacklayout i want to display a local page.html using a Webview (i think).
thanks you
my page xaml is this
<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="App1.info"
Title="WebView">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<WebView x:Name="webview" Source="{Binding mySource}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
my page.xaml.cs is this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App1
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class info : ContentPage
{
public HtmlWebViewSource mySource { get; set; }
public info()
{
InitializeComponent();
BindingContext = this;
mySource = new HtmlWebViewSource
{
Html = #"<html><body>
<h1>Xamarin.Forms</h1>
<p>Welcome to WebView.</p>
</body></html>"
};
}
}
}
in xaml
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<WebView x:Name="webview" Source="{Binding mySource}" />
</StackLayout>
in code behind or ViewModel
public HtmlWebViewSource mySource { get; set; }
public MainPage()
{
InitializeComponent();
webview.Source = "#"<html><body>
<h1>Xamarin.Forms</h1>
<p>Welcome to WebView.</p>
</body></html>";";
}
Or you can use data binding(MVVM) .
developers!
I just started to learn Xamarin and I created a few pages. Its so simply. Just first page and a button to get the second page.
But when I clicked on the button I got unexpected blue line under my status bar. How can I fix it?
Thank you in advance!
This is my MainPage:
<?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="HelloApp.MainPage">
<StackLayout>
<!-- Place new controls here -->
<Label Text="MainPage.xaml"/>
<!-- Place new controls here -->
<Button x:Name="button1" Text="Go to Page 3" Clicked="Button_Click" />
<!-- Place new controls here -->
</StackLayout>
</ContentPage>
This is my second Page:
<?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="HelloApp.Page3">
<ContentPage.Content>
<StackLayout>
<Label Text="Page3.xaml"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
This is my code for the class linked to first xaml:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HelloApp
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, EventArgs e)
{
Application.Current.MainPage = new NavigationPage(new Page3());
}
}
}
This is my code for the class linked to second xaml:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace HelloApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page3 : ContentPage
{
public Page3 ()
{
InitializeComponent ();
}
}
}
Application.Current.MainPage = new Page3();
SoLved!
I try to use a databinding in a Xamarin Application List.
I am following : https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/data-and-databinding/.
Visual Studio give me this error : CS0103 C# The name "ELementView" does not exist in the current context.
I think it is a problem about the xmlns:local in xaml fil but I don't know.
Xaml 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:local="clr-namespace:App4;assembly=listeElements"
x:Class="App4.Page1"
Title="ListView Demo Page">
<ListView x:Name="ELementView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
listeElements code :
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App4
{
public class Element
{
private string element;
public string Name
{
get { return element; }
set { element = value; }
}
ObservableCollection<Element> Elements = new ObservableCollection<Element>();
public void ElementListPage()
{
ELementView.ItemsSource = Elements;
Elements.Add(new Element { Name = "oooo" });
}
}
};
Thanks for your help
You could also use this:
public Page1()
{
InitializeComponent();
Elemenet e = new Element();
e.ElementListPage();
this.BindingContext = e;
}
but make sure your ObservableCollection<Element> has {get; set;};
Then you can add an ItemsSource-Binding to your ListView like this:
<ListView ItemsSource="{Binding Elements}">
as you definded the DataContext for Page1 it will look for a Property called Elements in your DataContext (which is the class Element) - there it gets the ElementsCollection and adds the Name to your CellTemplate
Just by giving the ListView a name doesn't mean you can reference it from anywhere. You can now reference ELementView from the code-behind of your Page1 XAML page.
To get there, open your Solution window, go to Page1.xaml click the arrow to the left of it and double-click Page1.xaml.cs.
In this page you could do something like this:
using System.Collections.ObjectModel;
using Xamarin.Forms;
public Page1()
{
InitializeComponent();
ObservableCollection<Element> Elements = new ObservableCollection<Element>();
ELementView.ItemsSource = Elements;
Elements.Add(new Element { Name = "oooo" });
}
Although this would work, it probably isn't the best approach. You are trying to use MVVM which is good! But you can take it a step further.
Maybe try using a MVVM framework like MvvmCross or FreshMvvm. I have done a blogpost on the later. You can find it here. Although new versions have come out, this should get you started with the basics.
I'm trying to achieve the most basic form of data binding in Xamarin forms though the text that I set in my code are not shown on the labels at all. Any pointers would be great.
CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace XamarinOuderportaal
{
public partial class LoginPage : ContentPage
{
public string UsernamePlaceHolder { get; set; }
public string PasswordPlaceHolder { get; set; }
public LoginPage()
{
this.UsernamePlaceHolder = "gebruikersnaam";
this.PasswordPlaceHolder = "wachtwoord";
InitializeComponent();
}
}
}
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:XamarinOuderportaal"
x:Class="XamarinOuderportaal.LoginPage">
<StackLayout VerticalOptions="Center" HorizontalOptions="Fill" Spacing="20" Padding="20">
<Entry Placeholder="This is the placeholder" HorizontalOptions="Fill" IsVisible="{Binding ShouldDisplayUrl}"/>
<Entry Placeholder="{Binding UsernamePlaceHolder}" HorizontalOptions="Fill"/>
<Entry Placeholder="{Binding PasswordPlaceHolder}" HorizontalOptions="Fill" IsPassword="true"/>
<Button Text="test 2" HorizontalOptions="Fill"/>
</StackLayout>
</ContentPage>
Assign the bindingcontext and onpropertychange event for member variable in the viewmodel file
Check it basic of Xamarin binding
http://www.c-sharpcorner.com/article/quick-start-tutorial-creating-universal-apps-via-xamarin-binding-in-xaml-par/
Binding seeks on the instance of the source object, so the properties must not be static.
If you want to use static binding then you must use the Static extension:
<Entry Placeholder="{x:Static local:LoginPage.UsernamePlaceHolder}" HorizontalOptions="Fill"/>
EDIT: You have edited the question and removed the "static" definition, so the code must work now.