Xamarin.Forms Customize Padding for a Specific View - xamarin.forms

So I'm new to developing in Xamarin.Forms and I was working on a project where I had multiple views in a StackLayout on one page. I was wondering if there was a way that you could specify padding differently for each different view.
For example, there is an Image that I want to fill the entire width of the screen, but there is an Entry underneath it that I do not want to fill the entire screen. However, if I use the StackLayout.Padding attribute it sets the same padding to all views.
Is there any solution to this?
EDIT:
I forgot to mention earlier that I have already tried using the margin property but keep getting the error 'Entry' does not contain a definition for 'margin'
Here is my code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HuntFishNY
{
class LandingPage : ContentPage
{
Image logo, silhouettes;
Entry username, password;
Button signIn, register;
Label title, trouble;
StackLayout heading, inputSection, footer;
public LandingPage()
{
this.BackgroundColor = Color.FromHex("#2B5237");
logo = new Image();
logo.Source = "dec_logo.png";
silhouettes = new Image();
silhouettes.Source = "sportinglicense_background.jpg";
username = new Entry();
username.HorizontalTextAlignment = TextAlignment.Start;
username.BackgroundColor = Color.White;
username.Placeholder = "Username";
username.PlaceholderColor = Color.Gray;
username.TextColor = Color.Black;
username.VerticalOptions = LayoutOptions.FillAndExpand;
password = new Entry();
password.HorizontalTextAlignment = TextAlignment.Start;
password.IsPassword = true;
password.BackgroundColor = Color.White;
password.Placeholder = "Password";
password.PlaceholderColor = Color.Gray;
password.TextColor = Color.Black;
password.VerticalOptions = LayoutOptions.FillAndExpand;
signIn = new Button();
signIn.Text = "Sign In";
signIn.BackgroundColor = Color.FromHex("#2b5237");
register = new Button();
register.Text = "Register New Account";
title = new Label();
title.TextColor = Color.FromHex("#E2AF28");
title.HorizontalTextAlignment = TextAlignment.Center;
trouble = new Label();
trouble.Text = "Having trouble signing in?";
heading = new StackLayout();
heading.VerticalOptions = LayoutOptions.Start;
heading.Children.Add(logo);
heading.Children.Add(title);
heading.Children.Add(silhouettes);
heading.Children.Add(username);
heading.Children.Add(password);
heading.Padding = new Thickness(10, 10, 20, 20);
this.Content = heading;
}
}
}

It seems you should be using a Grid(https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/) instead of a StackLayout.
You can achieve different row height using RowDefinitions within a Grid.
You can also add a StackLayout inside another StackLayout.
That said, if your Entry do not have a Margin it´s probably because you're using an outdated version of Xamarin.Forms (Margin was introduced in 2.1 or 2.2. Current is 2.3)

Related

IOS toolbar Icons color is changing when Gradient toolbar applied

I'm developing an IOS Application using Xamarin.Forms and in that I've customized the toolbar color to Gradient color using custom renderers.But,After this the Icons
color is changed as per the toolbar color and how to set the title text to white colour.Here is the renderer I'm using for toolbar customization
public class NavigationPageGradientHeaderRenderer:NavigationRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var control = (NavigationPageGradientHeader)this.Element;
var gradientLayer = new CAGradientLayer();
gradientLayer.Bounds = NavigationBar.Bounds;
gradientLayer.Colors = new CGColor[] { control.RightColor.ToCGColor(), control.LeftColor.ToCGColor() };
gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
gradientLayer.EndPoint = new CGPoint(1.0, 0.5);
UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
}
}
After applying this the Icons look like this:
enter image description here
But I want the images background to be transparent like this:
enter image description here
and the title textcolor should be white.
How can I achieve this.Can anyone please help me with this.
Thank you
You can set the property in CustomRenderer
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var control = (MyNativePage)Element;
var gradientLayer = new CAGradientLayer();
gradientLayer.Bounds = NavigationBar.Bounds;
gradientLayer.Colors = new CGColor[] { UIColor.Red.CGColor,UIColor.White.CGColor };
gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
gradientLayer.EndPoint = new CGPoint(1.0, 0.5);
UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
NavigationBar.TintColor = UIColor.White;
NavigationBar.TitleTextAttributes = new UIStringAttributes() { ForegroundColor =UIColor.White};
}
If you create an NavigationPage, then you can use like this
var myHomePage = new NavigationPage(dashboardPage){
Tint = Color.Red // put your color here };
You can set common color from App.xaml.cs;
public App()
{
InitializeComponent();
// MainPage = new MainPage();
MainPage = new RESTAPICallApp.Controllers.HomePage();
NavigationPage navigationRootPage = new NavigationPage(new RESTAPICallApp.Controllers.HomePage());
navigationRootPage.BarBackgroundColor = Color.LightSeaGreen;
navigationRootPage.BarTextColor = Color.Wheat;
MainPage = navigationRootPage;
}
For native Xamarin.iOS add this code in 'didFinishLaunchingWithOptions' method on AppDelegate.cs;
UINavigationBar.Appearance.Translucent = false;
UINavigationBar.appearance().barTintColor = UIColor.White
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() {
TextColor = UIColor.White,
TextShadowColor = UIColor.Clear
});

How can I add a button inside var content page code-behind using Xamarin.Forms?

How can I add a button inside var content page in code-behind? I'm trying to make a list view of content pages each with its own button.
var content = new ContentPage
{
Title = EntryTitulo.Text,
Content = new Label
{
Text = EntryText.Text,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
//I want to add a button here....
};
A ContentPage can only have a single child. If you want to add multiple children, they need to be contained in a Layout container, like a StackLayout or a Grid
var label = new Label { ... };
var button = new Button { ... };
var layout = new StackLayout();
layout.Children.Add(label);
layout.Children.Add(button);
Content = layout;

xamarin binding a button in code to viewModel (without xaml)

I'm using the mvvm approach to develop a barcode scanning app with xamarin. The main hurdle was that the 3rd party scanner object does not work in xaml. I used a ContentPage to create a simple logic-less c# code view which allows me to have a footer with buttons and a logo overlayed at the bottom of the scanner. My problem is that could not find any great best practices for binding items from your code view to your viewModel, as opposed binding a xaml view to a viewModel. Here is some of my view below.
public class BarcodeScannerPage : ContentPage
{
ZXingScannerView zxing;
BarcodeViewModel viewModel;
public BarcodeScannerPage() : base()
{
try
{
viewModel = new BarcodeViewModel();
BindingContext = viewModel;
zxing = new ZXingScannerView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Options = new MobileBarcodeScanningOptions
{
TryHarder = true,
DelayBetweenContinuousScans = 3000
},
ScanResultCommand = viewModel.GetResult
};
var cancelButton = new Button
{
BackgroundColor = Color.Gray,
Text = "Cancel",
TextColor = Color.Blue,
FontSize = 15,
Command = viewModel.CancelButton
};
Binding cancelBinding = new Binding
{
Source = viewModel.CancelIsAvailable,
//Path = "ShowCancel",
Mode = BindingMode.OneWay,
};
cancelButton.SetBinding(IsVisibleProperty, cancelBinding);
var doneButton = new Button
{
BackgroundColor = Color.Gray,
Text = "Done",
TextColor = Color.Blue,
FontSize = 15,
Command = viewModel.DoneButton
};
Binding doneBinding = new Binding
{
Source = viewModel.DoneIsAvailable,
//Path = "ShowDone",
Mode = BindingMode.OneWay,
};
doneButton.SetBinding(Button.IsVisibleProperty, doneBinding);
When a barcode is scanned my command, GetResultCommand, sends the result to my BarcodeView model. I have created two Bools in my BarcodeView model named isDoneAvailable and isCancelAvailable. I want to bind these values to the Visibility property of the doneButton and cancelButton in my view. Right now the buttons are bound to whatever the bool values are at the creation of BarcodeViewModel, but they DO NOT update. I need to be able to control visibility from the GetResultCommand method of my BarcodeViewModel. Specifically, when a certain number of barcodes are scanned, I want to make the buttons appear and disappear. I have a feeling they don't update because the path is not set, but when I uncomment the path, the binding doesn't work at all. Any ideas what I've done wrong with the bindings of the buttons, or the correct way to set the Path to my bools in the viewModel? Here is some of my BarcodeViewModel code below.
public class BarcodeViewModel : INotifyPropertyChanged
{
public bool CancelIsAvailable { get { return _cancelIsAvailable; } set { _cancelIsAvailable = value; OnPropertyChanged("ShowCancel"); } }
public bool DoneIsAvailable { get { return _doneIsAvailable; } set { _doneIsAvailable = value; OnPropertyChanged("ShowDone"); } }
public void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
}
I still would like to know the correct way to get this binding to update but, I was able to work-around this issue by creating a button in my viewModel and referencing it in my view. Then when I dynamically updated the button in my viewModel, it also updated in my view.

Xamarin Forms Teechart - Draw Image

Is there a working example for drawing an image inside a steema teechart in xamarin forms? I am really struggling with this.
It doesn't work either assigning an image to the back wall or panel:
var backImage = new Image();
backImage.Source = ImageSource.FromUri(new Uri("http://www.steema.com/uploads/news/xamarinforms_280x210.png"));
tChart1.Walls.Back.Gradient.Visible = false;
tChart1.Walls.Back.Image = backImage;
tChart1.Panel.Gradient.Visible = false;
tChart1.Panel.Image = backImage;
nor drawing it directly on the canvas:
void tChart1_BeforeDrawSeries(object sender, Graphics3D g)
{
Rectangle chartRect = tChart1.Chart.ChartRect;
var backImage = new Image();
backImage.Source = ImageSource.FromUri(new Uri("http://www.steema.com/uploads/news/xamarinforms_280x210.png"));
g.Draw(chartRect, chartRect, backImage, false);
}
So I have added this to the bug list (bug 1299). Happens both in iOS and Android.

How do you make a ContentPage fullscreen?

In Xamarin.Forms 1.3+, how do you make a ContentPage fullscreen?
The most basic exemple of a ContentPage is the one provided upon creating a Xamarin.Forms Portable project.
public App (){
// The root page of your application
MainPage = new ContentPage {
Content = new StackLayout {
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
XAlign = TextAlignment.Center,
Text = "Welcome to Xamarin Forms!"
}
}
}
};
}
More info (Android): https://developer.android.com/training/system-ui/immersive.html
Your ContentPage is fullscreen. Only the content in your ContentPage does not fill your entire screen.
You can try something like this:
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
your content page is fullscreen . You can check by changing the background color of your content page. Try this following code
BackgroundColor = Color.White
Step 1 in making a full screen is by hiding the Navigation Bar. This can be controlled while Navigating to the View.
FullScreenVideoPlayerPage fullScreenVideoPage = new FullScreenVideoPlayerPage();
NavigationPage.SetHasNavigationBar(fullScreenVideoPage, false);
await Navigation.PushAsync(fullScreenVideoPage);
Remember to use async keyword in Method Signature when using await.
private async void FullScreenVideoPlayerPage_Clicked(object sender, EventArgs e)
Step 2 is to hide the Android Status Bar. But seems this is not standard with Android. I was not fully successful in completely hiding this bar. But I could hide the status icons by:
using Android.App;
using Android.Views;
//......
// Call this method from the constructor after InitializeComponent ();
public void HideStatusBar()
{
var activity = (Activity)Forms.Context;
var window = activity.Window;
var attrs = window.Attributes;
attrs.Flags |= Android.Views.WindowManagerFlags.Fullscreen;
window.Attributes = attrs;
window.ClearFlags(WindowManagerFlags.ForceNotFullscreen);
window.AddFlags(WindowManagerFlags.Fullscreen);
var decorView = window.DecorView;
var uiOptions =
(int)Android.Views.SystemUiFlags.LayoutStable |
(int)Android.Views.SystemUiFlags.LayoutHideNavigation |
(int)Android.Views.SystemUiFlags.LayoutFullscreen |
(int)Android.Views.SystemUiFlags.HideNavigation |
(int)Android.Views.SystemUiFlags.Fullscreen |
(int)Android.Views.SystemUiFlags.Immersive;
decorView.SystemUiVisibility = (Android.Views.StatusBarVisibility)uiOptions;
window.DecorView.SystemUiVisibility = StatusBarVisibility.Hidden;
}

Resources