I'm new to Xamarin.
Could you write me the code for adding a button in Xamarin.Forms?
Maybe you should get started with this introduction. It explains how get started with Xamarin forms.
https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/
public class App : Application
{
public App ()
{
// The root page of your application
MainPage =new ContentPage{
Content= new Button{Text="Hello World",BackgroundColor=Color.Black,HorizontalOptions=LayoutOptions.Center,VerticalOptions=LayoutOptions.Center,TextColor=Color.White}
};
}
}
Above snippet will create a Page with a Button having text Hello World centered horizontally and vertically in the page and set it as the LaunchPage of the application. This is an example of how you can have button programmatically.
There is also the Xamarin forms quick start which runs through an example that adds buttons to the UI.
From example :
xaml:
<Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" />
bound command in cs:
void OnTranslate (object sender, EventArgs e)
{
translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text);
if (!string.IsNullOrWhiteSpace (translatedNumber)) {
callButton.IsEnabled = true;
callButton.Text = "Call " + translatedNumber;
} else {
callButton.IsEnabled = false;
callButton.Text = "Call";
}
}
Button is something like
Button b = new Button();
Then you should add a button to a layout
StackLayout SL = new StackLayout();
SL.Children.Add(b);
Then set your content page to stacklayout
Related
I have the following structure.
Frame frame = new Frame();
Grid grid = new Grid();
ContentView contentView = new ContentView();
contentView.GestureRecognizers.Add(CreateSwipeEffect());
grid.Children.Add(contentView, 0, 0);
frame.GestureRecognizers.Add(CreateFrameTapEffect());
frame.Content = grid;
Frame has available two effects: first we can swipe(PanGesture) and second we can tap(TapGesture). On iOS platform this solution perfectly works. However on Android platform only swipe effect is firing. How can I solve this to have both effects available for Android platform?
I use your code in iOS and Android, yes, it works fine on iOS, and have issue on Android.
But if you add tapGenture and panGesture after you add label or frame control, it can works fine. Maybe some mechanisms of Android are a little different from iOS. Please take a look the following code, I test it on Android and iOS, it all works fine.
public Page17()
{
InitializeComponent();
var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += PanGesture_PanUpdated;
var tapGenture = new TapGestureRecognizer();
tapGenture.NumberOfTapsRequired = 1;
tapGenture.Tapped += TapGenture_Tapped;
Frame frame = new Frame();
frame.BackgroundColor = Color.AliceBlue;
Grid grid = new Grid();
Label label= new Label();
label.Text = "this is test!";
label.BackgroundColor = Color.Red;
grid.Children.Add(label,0,0);
frame.Content = grid;
stacklayout1.Children.Add(frame);
frame.GestureRecognizers.Add(tapGenture);
label.GestureRecognizers.Add(panGesture);
}
private void TapGenture_Tapped(object sender, EventArgs e)
{
Console.WriteLine("the tapgesture fire!");
}
private void PanGesture_PanUpdated(object sender, PanUpdatedEventArgs e)
{
Console.WriteLine("the pangesture fire");
}
You are dispatching Tap Event to Frame(parent) and Swip Event to ContentView(childview).
According to Input events overview:
Remember that hardware key events are always delivered to the View
currently in focus. They are dispatched starting from the top of the
View hierarchy, and then down, until they reach the appropriate
destination.
So based on your codes when you are tapping on the Frame, android system thought you want to fire the tap event on ContentView(which doesn't exist) because current focus is the contentview not the frame. So if you have specific needs to do that, you need to try other ways to implement it. If not, please register the tap event on ContentView.
I am struggling how I could replicate the drop-down ToolbarItem from Xamarin.Forms when a ToolbarItem's order is set to Secondary for IOS, in order for it to look like it does for Android.
Here are some images to better explain what I am looking for:
How it works on Android:
Code:
ToolbarItem toolbarItem = new ToolbarItem()
{
Text = "ToolbarItem",
Order = ToolbarItemOrder.Secondary
};
Images on how it looks on Android:
Image showing the "More" icon
Image showing the "More" icon expanded to show more toolbar items
There is no default "More" icon on the toolbar when setting the Order to Secondary in iOS. Instead what happens, is that a bar below the navigation bar is created, which includes all of the toolbar items - something I do not wish to have for my Application.
This is an example of how it has been achieved before on IOS:
A screenshot I took from one of my Apps that implements this
effect
In native iOS, you can use UIPopoverController to achieve your effect. But please notice that this control can only be used in iPad.
Since you are using Xamarin.Forms, we can create a custom renderer in iOS platform to get this.
Firstly, create a page renderer to display the UIPopoverController. We can show it from a UIBarButtonItem or a UIView depending on your request. Here I use UIBarButtonItem like:
//I defined the navigateItem in the method ViewWillAppear
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
rightItem = new UIBarButtonItem("More", UIBarButtonItemStyle.Plain, (sender, args) =>
{
UIPopoverController popView = new UIPopoverController(new ContentViewController());
popView.PopoverContentSize = new CGSize(200, 300);
popView.PresentFromBarButtonItem(rightItem, UIPopoverArrowDirection.Any, true);
});
NavigationController.TopViewController.NavigationItem.SetRightBarButtonItem(leftItem, true);
}
Secondly, construct the content ViewController in the UIPopoverController(just like the secondary list in android):
public class ContentViewController : UIViewController
{
public override void ViewDidLoad()
{
base.ViewDidLoad();
UITableView tableView = new UITableView(new CGRect(0, 0, 200, 300));
tableView.Source = new MyTableViewSource();
View.AddSubview(tableView);
}
}
public class MyTableViewSource : UITableViewSource
{
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
UITableViewCell cell = tableView.DequeueReusableCell(new NSString("Cell"));
if (cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, new NSString("Cell"));
}
cell.TextLabel.Text = "Item" + indexPath.Row;
return cell;
}
public override nint RowsInSection(UITableView tableview, nint section)
{
return 10;
}
}
At last we can show it on the screen by calling PresentFromBarButtonItem.
I'm using a MasterDetail page and the content pages reacheable from the Master are quite long. I'm trying the app on Android devices, and if I access one of those pages creating a new NavigationPage they show up correctly, but if I push them into the navigation stack, or if I go back to them from another page into the stack, the scroll doesn't work anymore.
This is the code for the creation of NavigationPage:
void OnItemSelected(object sender, SelectedItemChangedEventArgs e) {
var item = e.SelectedItem as IMenuItem;
if (item != null && item.SubmitPageType != null) {
Detail = new NavigationPage((Page)Activator.CreateInstance(item.SubmitPageType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
and this is the code that I use to push the same page into the navigation stack
this.Navigation.PushAsync(new MyPage());
In Xaml, I've tried using ScrollView into the ContentPage.Content element, but it doesn' work and it cuts out part of my layout at the bottom of the page.
Has anyone experienced similar problems with NavigationPage and content scrolling? Can anyone help me?
Thanks
When I face simillar problem, this code in custom NavigationPageRenderer helps me
[assembly: ExportRenderer(typeof(YOUR_CUSTOM_NAV_PAGE), typeof(NoAnimationNavigationPageRenderer))]
namespace CanPay.Mobile.Droid.Renderers
{
public class NoAnimationNavigationPageRenderer : NavigationPageRenderer
{
protected override void SetupPageTransition(FragmentTransaction transaction, bool isPush)
{
transaction.SetCustomAnimations(0, 0, 0, 0);
}
}
}
I have created a new Blank App (Xamarin.Forms Portable) project in Visual Studio 2015 and modified App.cs to get "hamburger menu":
public class App : Application
{
public App()
{
var masterPage = new ContentPage()
{
Content = new Label { Text = "Hello from Master!"},
Title = "Master Page"
};
var detailPage = new ContentPage()
{
Content = new Label { Text = "Hello from Detail!" },
Title = "Detail Page"
};
var mainPage = new MasterDetailPage()
{
Master = masterPage,
Detail = detailPage,
Title = "Main Page"
};
// The root page of your application
MainPage = mainPage;
}
. . .
}
Everything works fine, but how can I customize these four things:
1) Hide / change Arrow
2) Hide / change Icon
3) Hide / change Title text
4) Hide whole toolbar
You can change arrow to hamburger icon if you use your DetailPage within NavigationPage:
Detail = new NavigationPage(detailPage);
To change icon, just change project files:
YourProject/Resources/drawable/icon.png
YourProject/Resources/drawable-hdpi/icon.png
YourProject/Resources/drawable-xhdpi/icon.png
YourProject/Resources/drawable-xxhdpi/icon.png
or on your MasterDetailPage set Icon property to another resource.
If you want to hide icon - it only applies to Android. It can be solved with custom renderer (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/):
public class CustomNavigationRenderer : NavigationRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
base.OnElementChanged (e);
var actionBar = ((Activity)Context).ActionBar;
actionBar.SetIcon (Resource.Color.transparent);
}
}
EDIT:
It can also be done in MainActivity.cs:
ActionBar.SetIcon (new ColorDrawable(Resources.GetColor (Android.Resource.Color.Transparent)));
Just use Title property on Page.
SetHasNavigationBar(page, false);
I have a problem with Xamarin.Forms (version 1.2.2) on Android (Nexus 5).
The alignment of Button.Text is often not centered after performing a click.
In a short project, I figured out, that updating the UI causes the problem.
public class App
{
public static Page GetMainPage()
{
var label = new Label {
Text = "label",
};
var buttonBad = new Button {
Text = "buttonBad",
Command = new Command(() => label.Text += "1"),
};
var buttonGood = new Button {
Text = "buttonGood",
};
return new ContentPage {
Content = new StackLayout {
Children = {
buttonBad,
buttonGood,
label,
}
}
};
}
}
A click on "buttonBad" (updating the label.Text) causes the text-alignment of this button to not be centered anymore. A click on "buttonGood" does not cause the problem.
Is there a good workaround to solve this problem?
This workaround seems to be too complicated:
http://forums.xamarin.com/discussion/20608/fix-for-button-layout-bug-on-android
edit:
A programatically edit of the UI also cases the bug. Changing the label.Text in an async method after a short waiting leads the "buttonGood" to align its text wrong after a click.
edit2:
I created an example / test project on GitHub:
https://github.com/perpetual-mobile/ButtonTextAlignmentBug.git
The alignment is correct, when the StackLayout is replaced by an AbsolutLayout, but i need the StackLayout to work well.
Ok, after hours of dealing with this silly bug, I resolved it by implementing a custom renderer and overriding ChildDrawableStateChanged:
public override void ChildDrawableStateChanged(Android.Views.View child)
{
base.ChildDrawableStateChanged(child);
Control.Text = Control.Text;
}