I am using MicroCharts-Barchart to implement charts in Xamarin forms application. I want to set width of the bar and also spacing between bars, but I could not find any property to set this
Below is the code snippet I am using
Xaml
<forms:ChartView x:Name="Chart4"
HeightRequest="400"
/>
.cs file code
public partial class ChartsPage : ContentPage
{
List<Entry> entries = new List<Entry>
{
new Microcharts.Entry(200)
{
Color=SKColor.Parse("#FF1943"),
Label ="January",
ValueLabel = "200",
},
new Entry(400)
{
Color = SKColor.Parse("00BFFF"),
Label = "March",
ValueLabel = "400"
},
new Entry(-100)
{
Color = SKColor.Parse("#00CED1"),
Label = "Octobar",
ValueLabel = "-100"
},
};
public ChartsPage()
{
InitializeComponent();
Chart4.Chart = new BarChart() { Entries = entries };
}
}
And it shows like below
If MicroCharts does not have this feature, please suggest if there is any other library which has this feature.
XAML:
You need to set the HorizontalOptions as StartAndExpand as follows:
<forms:ChartView x:Name="Chart4" HeightRequest="400" HorizontalOptions="StartAndExpand"/>
.cs File Code:
You need to set the Width of the Chart = NumberOfBars X BarWidth as follows:
public ChartsPage()
{
InitializeComponent();
Chart4.Chart = new BarChart() { Entries = entries };
//Set the WidthRequest of your Chart based on the following calculation.
//Here, barWidth will be the width of the Bar in your Chart
int barWidth = 50;
Chart4.WidthRequest = entries.Count * barWidth;
}
To set the spacing between bars, use Margin as follows:
Chart4.Chart = new BarChart() { Entries = entries, Margin = 20 };
Hope this will help you.
Related
assume we have the following text :
Contact us on 015546889 or email#hotmail.com
How I can display the above text in same label in xamarin.forms and handle click on email by send email and handle phone call by click on the number.
I can use the the following code to make clickable label
Label label = new Label;
label.GestureRecognizers.Add(new TapGestureRecognizer()
{
Command = new Command(() => {
//do some function here
})
});
How to hyperlink same as messaging app or Whatsapp application
After a lot of search i found the perfect solution Here :
https://theconfuzedsourcecode.wordpress.com/tag/xamarin-hyperlink-label/
Hope this will help others :)
Check out the Label element in Forms9Patch. It has a HtmlText property that allows simple markup.
using System;
using Xamarin.Forms;
namespace Forms9PatchDemo
{
public class LabelLink : ContentPage
{
public LabelLink()
{
var label = new Forms9Patch.Label
{
HtmlText = "Contact us on <a id=\"phone\" href=\"tel:+353015546889\">015546889</a> or <a id=\"email\" href=\"mailto:email#hotmail.com\">email#hotmail.com</a>"
};
label.ActionTagTapped += (object sender, Forms9Patch.ActionTagEventArgs e) =>
{
var id = e.Id;
var href = e.Href;
var uri = new Uri(e.Href);
Device.OpenUri(uri);
};
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label { Text = "Forms9Patch.Label.HtmlText <a> example" },
new BoxView { BackgroundColor = Color.Black, HeightRequest = 1 },
label
}
};
}
}
}
Note that the above example won't work on iOS emulators because the tel: and mailto: schemes are not supported. It does work on actual iOS devices.
I've created a custom component which extends ContentView and renderer which renders to a CardView on Android.
The problem I am facing is that the Forms content is rendered below the CardView. On KitKat this does not occur, but I think the CardView implementation is not the same as on Lollipop or newer.
Setting the background color of the CardView to transparent (0x00000000) reveals the content below the CardView.
The forms component:
using Xamarin.Forms;
namespace CodeFest
{
public class NativeClientProfile : ContentView
{
public NativeClientProfile()
{
var grid = new Grid
{
RowDefinitions = new RowDefinitionCollection {new RowDefinition()},
ColumnDefinitions = new ColumnDefinitionCollection {new ColumnDefinition(), new ColumnDefinition()}
};
grid.Children.Add(new Label {Text = "FSP No"}, 0, 0);
grid.Children.Add(new Label {Text = "12345", HorizontalTextAlignment = TextAlignment.Center}, 1, 0);
grid.Children.Add(new Label {Text = "Risk"}, 0, 1);
grid.Children.Add(
new Label {Text = "Low", TextColor = Color.Green, HorizontalTextAlignment = TextAlignment.Center}, 1, 1);
var item = new Label
{
Text = "Foo bar",
HorizontalTextAlignment = TextAlignment.Center,
FontSize = 30,
FontAttributes = FontAttributes.Bold
};
Content = new StackLayout
{
Children =
{
item,
new Label
{
Text = "Financial Services Provider",
HorizontalTextAlignment = TextAlignment.Center
},
grid
}
};
}
}
}
The custom renderer:
using Android.Support.V7.Widget;
using Android.Text;
using Android.Views;
using CodeFest;
using CodeFest.Droid.ComponentRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(NativeClientProfile), typeof(NativeClientProfileRenderer))]
namespace CodeFest.Droid.ComponentRenderers
{
class NativeClientProfileRenderer : ViewRenderer<NativeClientProfile, CardView>
{
protected override void OnElementChanged(ElementChangedEventArgs<NativeClientProfile> elementChangedEventArgs)
{
var view = new CardView(Context);
//view.SetCardBackgroundColor(0x00000000);
SetNativeControl(view);
}
}
}
I am looking for an example of how to correctly render forms components within a CardView custom renderer.
You can use a Frame as base class instead of ContentView. This has the advantage, that you can use the existing FrameRenderer of Xamarin.Forms.Platform.Android.AppCompat which is already using a CardView. (see: FrameRenderer.cs).
FrameRenderer declaration
public class FrameRenderer : CardView, IVisualElementRenderer, AView.IOnClickListener, AView.IOnTouchListener
Renderer
class NativeClientProfileRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
}
}
NativeClientProfile
public class NativeClientProfile : Frame
{
public NativeClientProfile()
{
// your stuff...
Content = new StackLayout
{
Children =
{
item,
new Label
{
Text = "Financial Services Provider",
HorizontalTextAlignment = TextAlignment.Center
},
grid
}
};
}
}
Discussion
The renderer shows you what it needs if you really want to do it manually. Using the FrameRenderer makes your code dependent on the implementation of Xamarin. If they ever change the type of view that is rendered for a Frame it will break your App. But if you have a look at the implementation of the FrameRenderer, I'd try to avoid creating it completely from scratch (simple risk vs. effort evaluation).
Say I want to add a number prefix based on a country, for a phone entry? Like the one on the image:
How can I achieve that?
I would do something like this
<StackLayout Orientation="Horizontal" BackgroundColor="Gray">
<Label Text="+995 |" BackgroundColor="Transparent" />
<Editor Text="699999999" BackgroundColor="Transparent"></Editor>
</StackLayout>
A Horizontal stacklayout with a label for the prefix and an editor for the entry.
As you can see yourself i am using the same approach for my app in order to display the arrow down icon next to the picker.
var datectrl = new NoBorderPicker()
{
VerticalOptions = LayoutOptions.Center,
FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label)) * FontSizes.EditFormControlFactor,
HeightRequest = 40,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
var icon = new IconView()
{
Source = "ic_keyboard_arrow_right_black_24dp",
Foreground = Palette._019,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.End,
Margin = new Thickness(0, 0, 5, 0)
};
var stack = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
Children =
{
datectrl,
icon
}
};
The NoBorderPicker is a custom renderer in order to remove the border for the picker control
[assembly: ExportRenderer(typeof(NoBorderPicker), typeof(CustomPicker))]
namespace ThesisSFA.Droid.Renderers
{
public class CustomPicker : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var customBG = new GradientDrawable();
customBG.SetColor(Android.Graphics.Color.Transparent);
customBG.SetCornerRadius(3);
Control.SetBackground(customBG);
var custdatepicker = (NoBorderPicker) this.Element;
this.Control.TextSize = (float)custdatepicker.FontSize;
}
}
}
}
You can just use masking behavior.
<Entry.Behaviors>
<behavior:MaskedBehavior Mask="(995) XX-XXX-XXXX" />
</Entry.Behaviors>
enter code here
and to add behavior just use the following link.
https://xamarinhelp.com/masked-entry-in-xamarin-forms/
How do I create an a slider menu using Xamarin.Forms? Is it baked in or something custom?
You create a new class which contains all the definitions for both the Master - i.e. the menu - and the Detail - i.e. the main page. I know, it sounds back-to-front, but for example..
using System;
using Xamarin.Forms;
namespace testXamForms
{
public class HomePage : MasterDetailPage
{
public HomePage()
{
// Set up the Master, i.e. the Menu
Label header = new Label
{
Text = "MENU",
Font = Font.BoldSystemFontOfSize(20),
HorizontalOptions = LayoutOptions.Center
};
// create an array of the Page names
string[] myPageNames = {
“Main”,
“Page 2”,
“Page 3”,
};
// Create ListView for the Master page.
ListView listView = new ListView
{
ItemsSource = myPageNames,
};
// The Master page is actually the Menu page for us
this.Master = new ContentPage
{
Title = "The Title is required.",
Content = new StackLayout
{
Children =
{
header,
listView
},
}
};
// Define a selected handler for the ListView contained in the Master (ie Menu) Page.
listView.ItemSelected += (sender, args) =>
{
// Set the BindingContext of the detail page.
this.Detail.BindingContext = args.SelectedItem;
Console.WriteLine("The args.SelectedItem is
{0}",args.SelectedItem);
// This is where you would put your “go to one of the selected pages”
// Show the detail page.
this.IsPresented = false;
};
// Set up the Detail, i.e the Home or Main page.
Label myHomeHeader = new Label
{
Text = "Home Page",
HorizontalOptions = LayoutOptions.Center
};
string[] homePageItems = { “Alpha”, “Beta”, “Gamma” };
ListView myHomeView = new ListView {
ItemsSource = homePageItems,
};
var myHomePage = new ContentPage();
myHomePage.Content = new StackLayout
{
Children =
{
myHomeHeader,
myHomeView
} ,
};
this.Detail = myHomePage;
}
}
}
It is built in: MasterDetailPage. You'd set the Detail and Master properties of it to whatever kinds of Pages you'd like. I found Hansleman.Forms to be quite enlightening.
My minimum example (as posted here) is as follows:
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;
}
}
An example solution is hosted on GitHub.
On iOS the result looks like this (left: menu open, right: after clicking on "B"):
Note that you need to add the menu icon as a resource in your iOS project.
If you are looking for simple example of MasterDetailPage please have a look at my sample repo at GitHub. Very nice example is also presented here
Slideoverkit is a great plugin available for Xamarin Forms. There is a github to see free samples and you could find documentation about it here.
I've been doing a essay about map on windows phone. I added pushpins default into map and its content is a image. I want to show information when I tap or click on pushpin, but I don't know what to do. I've just thought about use tooltip to show info, but I can't do it.
here is my createpushpin function.
can you help me? thank you for all kind of you!
private void CreateNewPushpin(object selectedItem)
{
var pushpinPrototype = selectedItem as Pushpinsmodel;
var pushpinicon = pushpinPrototype.Icon;
Pushpin pushpins = new Pushpin() { Tag = adress.Name };
pushpins.Background = new SolidColorBrush(Colors.Green);
pushpins.Location = new GeoCoordinate(lad, long);
ImageBrush image = new ImageBrush() {
ImageSource = new System.Windows.Media.Imaging.BitmapImage
(pushpinicon)};
Ellipse elip = new Ellipse()
{
Fill = image,
Name = adress.Name,
StrokeThickness = 10,
Height = 30,
Width = 30
};
pushpins.Content = elip;
var tooltipText = new ToolTip { Content = adress.Name};
ToolTipService.SetToolTip(pushpins, tooltipText);
map1.Children.Add(pushpins);
listpushpin.Add(pushpins);
this.map1.SetView(pushpins.Location, 18.0);
}