I want to do something like this example, but i can't.
I try a lot of plugins and I cant find the way to implement.
Someone know or can tell me how can I do?
I want to show a display popup menu when click in one ToolbarItem on a MasterDetailPage.
My actual app:
What i want:
I think you can take a look to SlideOverKit
public SlideDownMenuView ()
{
InitializeComponent ();
// You must set HeightRequest in this case
this.HeightRequest = 600;
// You must set IsFullScreen in this case,
// otherwise you need to set WidthRequest,
// just like the QuickInnerMenu sample
this.IsFullScreen = true;
this.MenuOrientations = MenuOrientation.TopToBottom;
// You must set BackgroundColor,
// and you cannot put another layout with background color cover the whole View
// otherwise, it cannot be dragged on Android
this.BackgroundColor = Color.FromHex ("#D8DDE7");
}
Otherwise with enter link description here
you can try with this code...
public partial class App : Application
{
public App()
{
InitializeComponent();
MasterDetailPage mdpage = new MasterDetailPage();
mdpage.Master = new ContentPage() { Title = "Master", BackgroundColor = Color.Red };
ToolbarItem tbi = new ToolbarItem() { Text = "POPUP" };
tbi.Clicked += async (object sender, System.EventArgs e) => {
StackLayout sl = new StackLayout() { HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.Start, BackgroundColor = Color.Pink, WidthRequest = 100, HeightRequest = 200 };
Rg.Plugins.Popup.Pages.PopupPage mypopup = new Rg.Plugins.Popup.Pages.PopupPage() {BackgroundColor = Color.Transparent };
mypopup.Content = sl;
await MainPage.Navigation.PushPopupAsync(mypopup);
};
ContentPage detail = new ContentPage() { Title = "Detail", BackgroundColor = Color.Green, };
detail.ToolbarItems.Add(tbi);
mdpage.Detail = new NavigationPage(detail);
MainPage = mdpage;
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
Related
Is it possible to disable text suggestions for a Xamarin.Forms entry? I expected that this is done by IsTextPredictionEnabled = false, but this value seems to have no affect on the Entry, at least as of Xamarin Forms 5.0.0.2291.
I have created a test screen with the following code:
var entry1 = new Entry();
entry1.Text = "Default";
entry1.WidthRequest = 300;
entry1.IsSpellCheckEnabled = true;
entry1.IsTextPredictionEnabled = true;
absoluteLayout.Children.Add(entry1);
var entry2 = new Entry();
entry2.IsSpellCheckEnabled = false;
entry2.IsTextPredictionEnabled = false;
entry2.Text = "No SpellCheck/Prediction";
entry2.WidthRequest = 300;
entry2.Margin = new Thickness (0, 60, 0, 0);
absoluteLayout.Children.Add(entry2);
This produces the following behavior. Notice that both entries behave the same regardless of the IsSpellCheckEnabled or IsTextPredictionEnabled values.
According to the documentation here, this should work: https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.entry.istextpredictionenabled?view=xamarin-forms
Also here:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/entry
Nothing came up in my searches to indicate that this is broken, so maybe I'm doing something wrong?
Use custom renderer and try to set InputTypes as TextVariationVisiblePassword,this works well on my side.Below is the code snippets for your reference.
Content = new StackLayout
{
Children = {
new MyEntry {
Text = "No SpellCheck/Prediction",
IsSpellCheckEnabled= false,
IsTextPredictionEnabled = false,
WidthRequest=300
}
},
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
MyRenderer class:
[assembly: ExportRenderer(typeof(Entry), typeof(MyRenderer))]
namespace AppTestEntry.Droid
{
class MyRenderer : EntryRenderer
{
public MyRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.InputType = Android.Text.InputTypes.TextVariationVisiblePassword;
}
}
}
}
Document for custom renderer for your reference:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/entry
Hi guys I have a listview that I have made in Xamarin but not using Xamarin Forms. when I tap on a selected item it turns orange by default but I want to show a DisplayAlert when I tap on it. does anybody know how to solve this? below is my list view in C#
public string PhoneNumber;
StackLayout stackLayout = new StackLayout();
_listView = new ListView
{
ItemTemplate = new DataTemplate(() =>
{
Label nameLabel = new Label();
nameLabel.SetBinding(Label.TextProperty, "Name");
nameLabel.FontSize = 20;
Label addressLabel = new Label();
addressLabel.SetBinding(Label.TextProperty, "Address");
Label phoneLabel = new Label();
phoneLabel.SetBinding(Label.TextProperty, "Phone");
PhoneNumber = phoneLabel.Text;
return new ViewCell
{
View = new StackLayout
{
Padding = new Thickness(20, 5),
Orientation = StackOrientation.Horizontal,
Children =
{
new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Spacing = 0,
Children =
{
nameLabel,
addressLabel,
phoneLabel,
}
}
}
}
};
})
};
_listView.HasUnevenRows = true;
_listView.ItemsSource = db.Table<Company>().OrderBy(x => x.Name).ToList();
stackLayout.Children.Add(_listView);
_listView.ItemTapped += _listView_ItemTapped;
Content = stackLayout;
}
private void _listView_ItemTapped(object sender, ItemTappedEventArgs e)
{
var phoneDialer = CrossMessaging.Current.PhoneDialer;
if (phoneDialer.CanMakePhoneCall)
phoneDialer.MakePhoneCall("11112222");
DisplayAlert("Phone Dial","Dialing" + e.Item.PhoneNumber, "Ok");
}
Just create ItemTapped method
_listView.ItemTapped += _listView_ItemTapped;
And implement it
private void _listView_ItemTapped(object sender, ItemTappedEventArgs e)
{
var item = e.Item as Company; //Company is your model class
DisplayAlert("Alert", item.Name, "Cancel");
}
Output screen
How can I add Swipe to delete in my note list app.I am using xamarin forms. I have searched in xamarin forms samples but could not find it. I also tried the list view performance options with menuItem etc but I dont know how to adjust that in my code. Can anyone help me with this please?
My code is as follows:
public partial class MyPage
{
List<Note> notes;
string NotesFile {
get {
var documents = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
return System.IO.Path.Combine (documents, "notes.json");
}
}
public MyPage()
{
BuildContent();
LoadNotes ();
ReloadListContents ();
AddNoteButton.Clicked += (sender, args) => {
var note = new Note("typ...");
notes.Add(note);
EditNote(note);
};
NoteListView.ItemTapped += (sender, row) =>
{
NoteListView.SelectedItem = null;
Note note = (Note)row.Item;
EditNote(note);
};
buttonDelete.Clicked += (sender, args) =>{
notes.RemoveAt(0);
DisplayAlert("Delete", "Row deleted", "OK");
};
}
}
MyPage.cs
{
public ListView NoteListView = new ListView ();
public Button AddNoteButton;
public Button buttonDelete;
private void BuildContent()
{
AddNoteButton = new Button
{
Text = "Add New Note",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
buttonDelete = new Button
{
Text = "Delete Note ",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Content = new StackLayout
{
BackgroundColor = Color.Black,
Children = {
new Label {
Text = "Note Taker",
TextColor = Color.White
},
NoteListView,
AddNoteButton,
buttonDelete
}
};
}
Im responding to this question in CS code rather than XAML (My Preferred) if anyone would like the Xaml response please drop a comment below and I'll write the XAML alongside the CS.
So to complete what you have asked in Xamarin.Forms on ListView elements you must first create the ViewCell that you would like to display the data in each cell in the ListView and give it context actions. Here is an example:
public class CustomViewCell : ViewCell
{
public CustomViewCell()
{
//instantiate each element we want to use.
var image = new CircleCachedImage
{
Margin = new Thickness(20, 10, 0, 10),
WidthRequest = App.ScreenWidth * 0.15,
HeightRequest = App.ScreenWidth * 0.15,
Aspect = Aspect.AspectFill,
BorderColor = Color.FromHex(App.PrimaryColor),
BorderThickness = 2,
HorizontalOptions = LayoutOptions.Center
};
var nameLabel = new Label
{
Margin = new Thickness(20, 15, 0, 0),
FontFamily = "Lato",
FontAttributes = FontAttributes.Bold,
FontSize = 17
};
var locationLabel = new Label
{
Margin = new Thickness(20, 0, 0, 5),
FontFamily = "Lato",
FontSize = 13
};
//Create layout
var verticaLayout = new StackLayout();
var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };
//set bindings
nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
locationLabel.SetBinding(Label.TextProperty, new Binding("Location"));
image.SetBinding(CircleCachedImage.SourceProperty, new Binding("Image"));
//Set properties for desired design
horizontalLayout.Orientation = StackOrientation.Horizontal;
horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
image.HorizontalOptions = LayoutOptions.End;
//add views to the view hierarchy
horizontalLayout.Children.Add(image);
verticaLayout.Children.Add(nameLabel);
verticaLayout.Children.Add(locationLabel);
horizontalLayout.Children.Add(verticaLayout);
//HERE IS THE MOST IMPORTANT PART
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background
deleteAction.Clicked += async (sender, e) => {
//Here do your deleting / calling to WebAPIs
//Now remove the item from the list. You can do this by sending an event using messaging center looks like:
//MessagingCenter.Send<TSender,string>(TSender sender, string message, string indexOfItemInListview)
};
// add to the ViewCell's ContextActions property
ContextActions.Add(deleteAction);
// add to parent view
View = horizontalLayout;
}
}
Now you must do the following to your ListView:
listView = new ListView();
lstView.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
In the same Content Page that you have the ListView you must also subscirbe to the MessagingCenter listening to the same parameters as set in the custom view cell as above. Please read the link provided if you have not used the MessagingCenter before. Inside of this method you must then remove the item from the listview with the index sent to this method.
If anyone needs any further explanations drop a comment below and Ill edit this post.
While learning how to use Xamarin Forms and StackLayouts I'm having trouble rendering the items.
I'm trying to bind a collection of somethings to a StackLayout. The binding (more or less) works. The visual render is wrong.
For this question, I've picked some random thing (in this case, credit cards) to highlight my experimenting.
This is what I'm rending:
Notice how each custom row looks to be fixed height's or something?
Show me the code! Ok, so this is what I've done:
First, the page:
public class MyPage : ContentPage
{
protected override void OnAppearing()
{
var creditCards = new SomeFakeListOfCreditCards();
var stackLayout = new CreditCardStackLayout(creditCards);
Contet = stackLayout;
}
}
Now for the custom control...
public class CreditCardStackLayout : StackLayout
{
public CreditCardStackLayout(IEnumerable<CreditCard> creditCards)
{
// Note: credit cards can be null (because we don't have any).
CreateContent(creditCards);
}
private void CreateContent(IEnumerable<CreditCard> creditCards)
{
VerticalOptions = LayoutOptions.Center;
Children.Add(TitleLabel);
if (creditCards == null)
{
Children.Add(NoCreditCardLabel);
}
else
{
Children.Add(CreateCreateCardList(creditCards));
}
}
private static ListView CreateCreateCardList(IEnumerable<CreditCard> creditCards)
{
if (creditCards == null)
{
throw new ArgumentNullException("creditCards");
}
// Project the credit cards into a list view model.
var viewModel = creditCards.Select(x => new CreditCardViewModel(x));
return new ListView
{
ItemsSource = viewModel,
ItemTemplate = new DataTemplate(typeof(CreditCardViewCell))
};
}
private Label TitleLabel
{
get
{
return new Label
{
HorizontalOptions = LayoutOptions.Center,
Text = "A list of credit cards"
};
}
}
private Label NoCreditCardLabel
{
get
{
return new Label
{
Text = "You have no real credit cards on file."
};
}
}
}
So far so good.. Now for the binding..
public class CreditCardViewCell : ViewCell
{
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
var stackLayout = new StackLayout
{
BackgroundColor = new Color(46, 81, 163),
VerticalOptions = LayoutOptions.Center,
Children =
{
NameLabel,
TypeImage,
NumberLabel,
ExpiresOnLabel,
RemoveButton
}
};
View = stackLayout;
}
private Label NameLabel
{
get
{
var label = new Label
{
FontSize = 14
};
label.SetBinding(Label.TextProperty, "Name");
return label;
}
}
private Label NumberLabel
{
get
{
var label = new Label
{
FontSize = 14
};
label.SetBinding(Label.TextProperty, "Number");
return label;
}
}
private Label ExpiresOnLabel
{
get
{
var label = new Label
{
FontSize = 14
};
label.SetBinding(Label.TextProperty, "ExpiresOn");
return label;
}
}
private Image TypeImage
{
get
{
var creditCardModel = (CreditCardViewModel)BindingContext;
string fileName = null;
switch (creditCardModel.Type)
{
case "Visa":
fileName = "visa.png";
break;
default:
fileName = "mastercard.png";
break;
}
var image = new Image
{
Source = ImageSource.FromFile("Icons/" + fileName)
};
return image;
}
}
private Button RemoveButton
{
get
{
var button = new Button
{
//Image = "Icons/remove.png"
Text = "Remove"
};
button.Clicked += async (object sender, EventArgs e) =>
{
// TODO when I figure out how to do this stuff.
int i = 0;
i++;
};
return button;
}
}
}
}
Also, please do not suggest going to a XAML file, I'm trying to learn this stuff programmatically.
Side thought: I wish I could turn on borders so I can see how things are laid out.
Use ListView's HasUnevenRows property. Change this:
return new ListView
{
ItemsSource = viewModel,
ItemTemplate = new DataTemplate(typeof(CreditCardViewCell))
};
to:
return new ListView
{
HasUnevenRows = true,
ItemsSource = viewModel,
ItemTemplate = new DataTemplate(typeof(CreditCardViewCell))
};
By default Xamarin.Forms ListView row size is fixed and set to the same value for every row (RowHeight property). With this configuration row auto-sizing won't work, but it also gives best ListView performance.
You can auto-size rows by setting ListView's HasUnevenRows property to true. It allows modifying ViewCell size by setting ViewCell's RowHeight property (eg. in OnBindingContextChanged override). In newer Xamarin.Forms versions it also sizes ViewCells automatically (on older it worked only on Android).
I added a UITabBarController to a view via the AddChildViewController method. I then navigate onto the next view and my tab bar appears, hey presto. As I'm in a new view now though, how can I remove the UITabBarController for the child view, as when I use the RemoveFromSuperview function it only removes the parent view and the bar still appears if I push another view.
View where child view is added:
tabController = new UITabBarController ();
tabController.ViewControllers = new UIViewController[] {
vc1,
vc2,
vc3
};
tabController.ViewControllers [0].TabBarItem.Title = "vc1";
tabController.ViewControllers [1].TabBarItem.Title = "vc2";
tabController.ViewControllers [2].TabBarItem.Title = "vc3";
this.NavigationController.AddChildViewController(tabController);
this.NavigationController.Add(tabController.View);
Much Appreciated!
EDIT - A bit more detail on my problem here: http://forums.xamarin.com/discussion/6473/hide-tabbarcontroller-when-added-as-a-child-view#latest
If I understand correctly, you want your initial ViewController to be a TabViewController and when a user selects something in one of the ViewControllers it transitions to a ViewController without the TabView buttons at the bottom.
If so, here's what you need to do.
In AppDelegate.cs you need to setup the window/view controllers like so:
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
window = new UIWindow (UIScreen.MainScreen.Bounds);
rootController = new UINavigationController ();
window.RootViewController = rootController;
var tabController = new UITabBarController ();
var vc1 = new TestController1();
var vc2 = new TestController2();
var vc3 = new TestController3();
tabController.ViewControllers = new UIViewController[] {
vc1,
vc2,
vc3
};
tabController.ViewControllers [0].TabBarItem.Title = "vc1";
tabController.ViewControllers [1].TabBarItem.Title = "vc2";
tabController.ViewControllers [2].TabBarItem.Title = "vc3";
this.rootController.PushViewController(tabController, false);
window.MakeKeyAndVisible ();
return true;
}
Once you have this setup, you can transition to a new view like so from within the class for TestController1:
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
var button = UIButton.FromType(UIButtonType.RoundedRect);
button.Frame = new RectangleF (10, 10, 200, 30);
button.SetTitle ("Go Child Controller", UIControlState.Normal);
button.TouchUpInside += (object sender, EventArgs e) => {
NavigationController.PushViewController(new TestController4(), true);
};
View.AddSubview (button);
}
Also, you can simplify setting the tab button titles.
Instead of doing this:
tabController.ViewControllers [0].TabBarItem.Title = "vc1";
You can just set the title from within your child UIViewController:
public class TestController1:UIViewController
{
public TestController1 ()
{
this.Title = "vc1";
}
...