I'm new in xaml, and I have an issue. I'm trying to create a button with an icon next to my text in xamarin.forms. But when I'm trying to display it, I have nothing on my app. To add the png icon. The image is located in the Ressources->drawable folder. Here's the xaml code.
<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="epicture.MainPage">
<StackLayout>
<Button Text="Log in" ImageSource="login.png" Clicked="Button_Clicked" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" BackgroundColor="#00c851" TextColor="White"></Button>
<WebView Navigating="WebView_Navigating"></WebView>
</StackLayout>
</ContentPage>
I also face same issue ImageButton not have text property.
Because of that I created Custom ImageButton Control With Text Property you can refer this might be it will help you.
https://xamarincodingtutorial.blogspot.com/2019/05/step-to-create-imagebutton-with-text.html
Related
I created a sftabView, every SfTabItem have a ContentView so I created an other View to display it in this ContentView. so the question is how to make this happened?
This is the ContentView which I wanted to display in the ContentPage
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="App5.Views.Self_Trainig"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False">
<ContentView.Resources>
<ResourceDictionary>
............
</ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
<AbsoluteLayout>
...............
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
and this is my ContentPage:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
x:Class="App5.Views.Accueil">
<ContentPage.Content>
<tabView:SfTabView OverflowMode="DropDown" VisibleHeaderCount="3" BackgroundColor="White">
<tabView:SfTabItem Title="Self Training">
<tabView:SfTabItem.Content>
""the code to display it here""
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Contacts">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="White" x:Name="ContactsGrid" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
</ContentPage.Content>
</ContentPage>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:mynamespace=clr-namespace:App5.Views"
...>
...
<tabView:SfTabItem.Content>
<mynamespace:Self_Trainig ... />
</tabView:SfTabItem.Content>
Explanation:
Add an xmlns:... definition for the namespace your ContentView is in.
Add an element with that namespace and the class name of your ContentView. <mynamespace:Self_Trainig ... />
...: After the class name, you can add any needed attributes. Just like any other ContentView.
If you want your view to have "custom" attributes (as opposed to the standard attributes of ContentView such as BackgroundColor), that can be set in each page's XAML, then in your ContentView's code behind, you'll add BindablePropertys. Doing that correctly is beyond the scope of this answer; there are other Q&As on that topic.
is it possible to display the view form the C# code ?
i mean doing
ContentView x:Name="TheView"
and on the C# code doing something like
TheView = Self_Trainig;
i know that code doesn't work but i'm searching that kind of solution
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView. I want 3 main tabs in the bottom and for each page 1-2 subtabs. On each subtab I will need to have a ScrollView(I think thats the right element to use) with list items, which makes it even more complex. Like this picture:
Any idea or guidance of how to achieve this?
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView.
If you want to do that, you could nest a TabView in Tabbed page.
TabView:https://github.com/chaosifier/TabView
Create three tab pages in views folder.
Tabbed Page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">
<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />
</TabbedPage>
And then use TabView in you tab1 page.
Tab1_Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
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:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
<local:TabViewControl>
<local:TabViewControl.ItemSource>
<local:TabItem HeaderText="SUBTAB1">
<StackLayout VerticalOptions="Start" Padding="10">
<Button
BackgroundColor="White"
Text="List Item"
TextColor="Black"/>
</StackLayout>
</local:TabItem>
<local:TabItem HeaderText="SUBTAB2">
<Image Source="pink.jpg" />
</local:TabItem>
</local:TabViewControl.ItemSource>
</local:TabViewControl>
</ContentPage.Content>
</ContentPage>
Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo
https://github.com/WendyZang/Test.git
I am trying xamarin forms for the first time so that I can build my app fro android and Iphone
I need to add an image to my layout MainPage.xaml and have this layout.
<?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:ReassuredMobileApp"
x:Class="ReassuredMobileApp.MainPage">
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
AutomationId="TitleBar">
<Label
Text="Hello, world!"></Label>
<Image
WidthRequest="200"
HeightRequest="50"
VerticalOptions="Start"
HorizontalOptions="Start"
Source="reassured_text.png" />
</StackLayout>
</StackLayout>
But the image "reassured_text.png" is not being displayed when I run the app in the emulator. I can see the Hello, World! text just fine (still cant see the image when I remove this)
My image is under my project as "reassured_text.png"
I've tried to follow tutorials online, but don't understand what is being said, and the ones I could understand didn't work. I've also tried to format the tag like
<Image
####Stuff here>
</Image>
but that didn't have an effect.
Directory tree:
Solution 'MyApp'
c# - MyApp
Dependencies
App.xaml
App.xaml.cs
MainPage.xaml
MainPage.xaml.cs
reassured_text.png
MyApp.Android
drawable
reassured_text.png
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
layout
values
MyApp.Ios
//I haven't touched anything here
1.Put the image reassured_text.png in Android project i.e in Resource/Drawable folder.
or
2.Put the image reassured_text.png in portable project & set build action to "Embedded Resource" & in .cs file do like this:
imagecontrol.FromResource="reassured_text.png";
I'm used to Android development, and am having some difficulty accomplishing what I would think is a simple task.
I have a MasterDetailPage (called ContainerView.xaml).
The Master is my navigation bar (called NavbarView.xaml).
The Details is supposed to be a page with a fixed title bar, and a "view" I can can swap per user choices.
The Details page is called MainView.xaml.
The Title I'd like to display at the top and is called TitleBarView.xaml.
Then I have a number of content pages such as Page1View.xaml.
in my ContainerView.xaml:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.ContainerView"
IsGestureEnabled="True"
MasterBehavior="Popover"
Title="MasterDetail Page">
<MasterDetailPage.Master>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
</MasterDetailPage.Detail>
</MasterDetailPage>
in my NavbarView.xaml - this is the Master
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.NavBarView"
Title="Nav Bar">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Item1}"/>
<Button Text="Options" Command="{Binding Option1Command}"/>
</StackLayout >
</ContentPage.Content>
</ContentPage>
in my MainView.xaml - this is the details
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainView"
Title="Main View">
<ContentPage.Content>
// what to put here to show the TitleBarView.xaml?
// what to put here to show my content xaml pages?
</ContentPage.Content>
</ContentPage>
in my TitleBarView.xaml
<?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="MyApp.TitleBarView">
<ContentView.Content>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Item1}"/>
<Button Text="Options" Command="{Binding OptionsCommand}"/>
</StackLayout>
</ContentView.Content>
</ContentView>
and a generic content view, of course there will be many others I want to switch between
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Page1View">
<ContentView.Content>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Info}"/>
<Button Text="Log In" Command="{Binding GoToPage2Command}"/>
</StackLayout >
</ContentView.Content>
</ContentView>
I am using the MVVM model and have this code, but can't seem to get just the basics working.
The Master page displays fine.
If the Details page is just a simple page, it works, but I can't figure out how to insert the TitleBar and swap out the "Content".
ContainerView containerPage = new ContainerView();
ContainerViewModel containerVM = new ContainerViewModel();
containerPage.BindingContext = containerVM;
NavBarView navigationBar = new NavBarView();
navigationBar.Title = "Navigation Bar"; // required, otherwise I get an exception.
NavBarViewModel navigationBarVM = new NavBarViewModel();
navigationBar.BindingContext = navigationBarVM;
MainView mainView = new MainView();
mainView.Title = "MainView";
MainViewModel mainViewVM = new MainViewModel();
mainView.BindingContext = mainViewVM;
TitleBarView titleBar = new TitleBarView();
TitleBarViewModel titleBarVM = new TitleBarViewModel();
titleBar.BindingContext = titleBarVM;
Page1View page1 = new Page1View();
Page1ViewModel page1VM = new Page1ViewModel();
page1.BindingContext = page1VM;
mainView.Content = new StackLayout()
{
Orientation = StackOrientation.Vertical,
Children =
{
new Label { Text = "I'm Content!" },
new Label { Text = "I'm Content!" },
//titleBar.Content,
//loginView.Content
}
};
containerPage.MasterBehavior = MasterBehavior.Popover;
containerPage.Master = navigationBar;
containerPage.Detail = new NavigationPage(mainView);
I'm sure I'm missing a fundamental concept. Any help would be appreciated
Xaml can instantiate any control, defined in code or in Xaml, so in case of TitleBarView, you can instantiate it in any Xaml by
<xmlnsprefix:TitleBarView />
The problem is to set the right xmlnsprefix. Every xaml file define a few xmlns and you can add your own, like this:
xmlns:local="clr-namespace:MyApp"
and it'll mean that the Xml namespace 'local' will reference the clr namespace 'MyApp' in the current assembly.
So you MainView becomes:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainView"
Title="Main View">
<ContentPage.Content>
<local:TitleBarView />
</ContentPage.Content>
</ContentPage>
I have a test page in Xamarin.Forms and it gets me this error, how can I fix this ?
Property Content is null or is not IEnumerable
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" x:Class="Project1.Page1">
<ContentPage.Content>
<Label Text="Page"></Label>
<Editor Text="I am an Editor" />
</ContentPage.Content>
</ContentPage>
The Content property is of type View. You cannot have two views into it. Replace it with
<StackLayout >
<Label Text="Page"></Label>
<Editor Text="I am an Editor" />
<StackLayout>
If anyone else lands here from google and the above wasn't the fix. For me it was because I had a view with a Grid.Row="0" property set even though I accidentally placed it outside the bounds of the actual grid.