I've created an activity indicator and added it to StackLayout and when I make it running, in the emulator it shows in the top right corner Android 4.4 and in iOS no show and in Android 6 phone, it don't show.
var indicator = new ActivityIndicator()
{
Color = Color.Blue,
};
indicator.SetBinding(ActivityIndicator.IsVisibleProperty, "IsBusy", BindingMode.OneWay);
indicator.SetBinding(ActivityIndicator.IsRunningProperty, "IsBusy", BindingMode.OneWay);
AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
mainLayout.Children.Add(indicator);
I want to show the activity indicator to the center of the screen because the operation takes time to complete.
The indicator that you are seeing in the status bar is the default behavior of the IsBusy property of the base page class. The reason your code isn't working is because you are attempting to bind visibility of your ActivityIndicator to that property - but you aren't specifying a binding source. If you look in your debugger's application output log then you will probably see messages along the lines of "Property 'IsBusy' not found on type 'Object'".
To fix it, you simply need to point the Binding Context of each binding to the form. Give this a try:
public partial class App : Application
{
public App ()
{
var mainLayout = new AbsoluteLayout ();
MainPage = new ContentPage {
Content = mainLayout
};
var containerPage = Application.Current.MainPage;
var indicator = new ActivityIndicator() {
Color = Color.Blue,
};
indicator.SetBinding(VisualElement.IsVisibleProperty, new Binding("IsBusy", BindingMode.OneWay, source: containerPage));
indicator.SetBinding(ActivityIndicator.IsRunningProperty, new Binding("IsBusy", BindingMode.OneWay, source: containerPage));
AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
mainLayout.Children.Add(indicator);
containerPage.IsBusy = true;
}
}
You add your activity indicator to stack layout, but you are setting Absolute layout LayoutFlags, they won't work.
to be able to achieve what you want, you need suck structure
AbsoluteLayout
StackLayout
ActivityIndicator
mainLayout should be AbsoluteLayout, all content should be contained in nested StackLayout.
Related
I am picking a photo from photo library and i get the following
AlbumPath:
assets-library://asset/asset.JPG?id=106E99A1-4F6A-45A2-B320-B0AD4A8E8473&ext=JPG
Path:
/Users/myname/Library/Developer/CoreSimulator/Devices/21CB035B-A738-4F74-B121-2DB2A6B5372A/data/Containers/Data/Application/3081A323-98AF-4EF6-95B9-29D4C2CD8425/Documents/temp/IMG_20170408_111143.jpg
How do i assign this image to a button ? I tried the following.
var file = await CrossMedia.Current.PickPhotoAsync(
new Plugin.Media.Abstractions.PickMediaOptions
{
});
Button btn = new Button();
btn.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile(file.Path);
No image is displayed on the button. Any help help is appreciated.
Thank you.
Once you deploy the application the app will not have access to your mac. For the application to use the picture it will need to be a bundled resource within the iOS application. Below is a simple example of using images within an iOS app. You'll definitely want to consider just adding a gesture listener to your image instead of making it a button though. If you try to just use the image on a button you'll have to do some styling adjustments to get it to look clean.
Image Setup
Put image in iOS Resource folder
Make sure bundledresource is selected from image properties.
Image Button
public class ImageButton : ContentPage
{
private Button _imageBtn = new Button { Image = "icon.png", Text = "Sample button" };
public ImageButton()
{
Content = new StackLayout
{
Children =
{
_imageBtn
}
};
}
}
Image with TapGesture
public class ImageButton : ContentPage
{
private Image _imageBtn = new Image { Source = "icon.png" };
private TapGestureRecognizer _imageTap = new TapGestureRecognizer();
public ImageButton()
{
_imageBtn.GestureRecognizers.Add(_imageTap);
Content = new StackLayout
{
Children =
{
_imageBtn
}
};
_imageTap.Tapped += (s, e) =>
{
// handle the tap
};
}
}
First thing, I have an Editor.I can Identify if the user entered any text in that Edior.But i need to return something when the user tapped on the Editor. How to achieve this?
var msgEditor = new Editor
{
Margin = new Thickness(10, 0, 10, 0),
HeightRequest = App.ScreenHeight,
};
Secong thing, Editor is inside the scrollview.When i tapped on the Editor scrollview scrolls down.I need to manually pull down to see the cursor.How to set content offset when i tapped on Editor?
ScrollView scroll = new ScrollView
{
Content = msgEditor,
};
Content = scroll;
On the editor, you have the focus event that notifies you that the user tapped the editor. You can do as follow :
{
var editor = new Editor();
editor.Focused += EditorOnFocused;
}
private void EditorOnFocused(object sender, FocusEventArgs focusEventArgs)
{
//do your stuff
}
I am working on Xamarin form in which header title will have weather temperature and weather icon on its right side.
For example
New York 60' F SunnyIcon
I am using openweather api to fetch the data.
Problem is, I am not able to create a dynamic image holder on the Xamarin Form Header.
How to have a dynamic image on the Xamarin Form Header?
Attached is a sample app which i am working on based on source code which i downloaded from github ...
I'm not sure what you mean by "Header," but if you're trying to add an icon to the Navigation Bar, you can do that by calling ToolbarItems.add() in the constructor of your page like this:
public myPage()
{
InitializeComponent();
ToolbarItems.Add(new ToolbarItem("Weather", "WeatherIcon.png", async () =>
{
//Code to Execute when Icon is tapped
}));
}
When adding the ToolbarItem, the first parameter is the name of the item, the second is the name of the image that will be displayed at the end of the Navigation bar, and the last one is optional which creates a method that is executed when the icon is tapped.
If you need the icon to be different depending on the current weather, you can do that like this:
public myPage()
{
InitializeComponent();
string weatherIconString = "";
if(weather.isSunny) // Edit contition however you need
weatherIconString = "SunnyIcon.png";
else
weatherIconString = "CloudyIcon.png";
ToolbarItems.Add(new ToolbarItem("Weather", weatherIconString));
}
You have to write a custom renderer like this: and the result:
public class CustomNavigationPageRenderer : NavigationRenderer
{
public override void ViewDidLoad()
{
//I'm getting width and height so i can rescale the image
nfloat navigationBarWidth = NavigationBar.Frame.Width;
nfloat navigationBarHeight = NavigationBar.Frame.Height;
//you can load image from your bundle,so you can add your weather icons on bundle -> under Resources folder
var img = UIImage.FromBundle("navigationbarbackground.jpg");
//create image context to draw image
UIGraphics.BeginImageContextWithOptions(new CGSize(navigationBarWidth, navigationBarHeight), true, 0);
//I'm filling the background with a color so it is the same as with my background image color
UIColor.FromRGB(54, 60, 65).SetFill();
UIGraphics.RectFill(new CGRect(0, 0, navigationBarWidth, navigationBarHeight));
//draw your image according to the coordinates of the navigation bar, i put it to the right top with a small right padding,
//you have to play with coordinates according to your needs
img.Draw(new CGRect(navigationBarWidth - navigationBarHeight - 30,//move 30px to the left (do not paste to right border :))
0, navigationBarHeight, navigationBarHeight));
UIImage backgroundImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
NavigationBar.SetBackgroundImage(backgroundImage, UIBarMetrics.Default);
//bonus :) change your title color
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
{
TextColor = UIColor.White,
});
base.ViewDidLoad();
}
}
I've created some pages
this.content1 = new DetailPage("ContentPage1");
this.content2 = new DetailPage("ContentPage2");
and I have defined a field
private View detailView;
with the following layout
Content = new StackLayout
{
Padding = new Thickness(0, Device.OnPlatform<int>(20, 0, 0), 0, 0),
Orientation = StackOrientation.Horizontal,
Children = {
buttonContainer,
this.detailView,
},
};
On a button click the detailView should be exchanged
private void Button1_Clicked(object sender, EventArgs e)
{
this.detailView = this.content1.Content;
}
The click event is called, but the view isn't updated. Is this the wrong way to exchange a "subview" in a container? How is this done?
You need to remove the current detailView from the Children collection and then add your new view afterward. Simply swapping the value of detailView will not affect the visual UI.
If I am understanding the context of your code snippets correctly, then this should resolve the problem in your Button1_Clicked handler:
((StackLayout) Content).Children.Remove(this.detailView);
this.detailView = this.content1.Content;
((StackLayout) Content).Children.Add(this.detailView);
I've created a master detail page on the left side using Xamarin.Forms, how about creating the same for the right side?
Below is my sample code for the left slider menu;
public class App
{
static MasterDetailPage MDPage;
public static Page GetMainPage()
{
return MDPage = new MasterDetailPage {
Master = new ContentPage {
Title = "Master",
BackgroundColor = Color.Silver,
Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null,
Content = new StackLayout {
Padding = new Thickness(5, 50),
Children = { Link("A"), Link("B"), Link("C") }
},
},
Detail = new NavigationPage(new ContentPage {
Title = "A",
Content = new Label { Text = "A" }
}),
};
}
static Button Link(string name)
{
var button = new Button {
Text = name,
BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
};
button.Clicked += delegate {
MDPage.Detail = new NavigationPage(new ContentPage {
Title = name,
Content = new Label { Text = name }
});
MDPage.IsPresented = false;
};
return button;
}
}
This does not exists in the Xamarin.Forms controls set, but you can create your own, with renderers for each platform.
You'll find the required information on http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/
Solution here
this is now supported in xamarin forms 3.0 and up, NO custom renderers
needed !! or third party libraries.
the trick is to force the layout to RTL,
while flow direction works, its hard to make the top nav bar to follow,
below is the solution for that problem, it works... let me know if you face any issues on older ios versions IOS8 and less.
xamarin forms RTL master details page with icon RTL/LTR hamburger
You can make it by ToolbarItems in Xamarin Forms
ToolbarItems will appear in right side.
You can find more info from the following links :
http://codeworks.it/blog/?p=232