I am trying to generate and display barcode in Xamarin forms using following code.
barcode = new ZXingBarcodeImageView
{
HeightRequest = 400,
WidthRequest = 400
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 400;
barcode.BarcodeOptions.Height = 400;
barcode.BarcodeOptions.Margin = 10;
barcode.BarcodeValue = "ZXing.Net.Mobile";
Content = barcode;
The QR code is rendered fine in Android virtual device. On the other hand, in iOS device, a distorted QR code is rendered. The aspect ration of QR code rendered on iOS virtual device is not square as it supposed to be.
The QR code rendered on Android virtual device is verified using a mobile phone.
Edit:
Tried the following code as suggested by #wilson
try
{
barcode = new ZXingBarcodeImageView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 500;
barcode.BarcodeOptions.Height = 500;
barcode.BarcodeOptions.Margin = 10;
barcode.BarcodeValue = "ZXing.Net.Mobile";
Content = barcode;
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex.ToString());
}
Still, I see the same problem. When I tried the example code of #wilson and it works fine on iPhone simulator. Probably I should use content view as suggested.
Edit 2
I tried the stack layout as shown below.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AZCommute"
x:Class="AZCommute.MainPage">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label Text="QR Code Generator" HorizontalOptions="Center"/>
<local:QRResult x:Name="qrResult"/>
</StackLayout>
</ContentPage>
But, it was of no help. Nothing rendered on iOS. I tried by adding WidthRequest and HeightRequest while initializing the ZXingBarcodeImageView as shown below.
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
WidthRequest = 410,
HeightRequest = 410,
Now, ZXingBarcodeImageView renders in iPhone simulator. But, the aspect ratio is lost (height > width ).
Note: I am using the ContentView with StackLayout
Try assigning the HorizontalOptions property like this:
barcode = new ZXingBarcodeImageView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 500;
barcode.BarcodeOptions.Height = 500;
barcode.BarcodeValue = contentEntry.Text.Trim();
Content = barcode;
Or try creating a ContentView to show QRCode.
For more information see my example.
Try to put inside a StackLayout :)
barcode = new ZXingBarcodeImageView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 500;
barcode.BarcodeOptions.Height = 500;
barcode.BarcodeOptions.Margin = 10;
barcode.BarcodeValue = "ZXing.Net.Mobile";
Content = new StackLayout{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {
barcode
}
};
Related
I want to create a grid with circular frames according to the number of students in a class. i want to display them i a way that the number of frames in each column fit the screen and i'll have rows added accordingly, so i tried to do something like this as a trial:
xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="stdprofiles.MainPage">
<StackLayout Orientation="Horizontal" >
<Grid x:Name="thislayout" HorizontalOptions="Center" Margin="20,20" >
</Grid>
</StackLayout>
</ContentPage>
xaml.cs:
public MainPage()
{
InitializeComponent();
var width = DeviceDisplay.MainDisplayInfo.Width;
var height = DeviceDisplay.MainDisplayInfo.Height;
double nbofcolumns = width / 150;
double nbofrows = 10 / nbofcolumns;
double ans = nbofcolumns * nbofrows;
for (int i = 0; i < nbofcolumns-1; i++)
{
thislayout.ColumnDefinitions.Add(new ColumnDefinition { Width = 100 });
}
for (int j=0;j< nbofrows+1; j++)
{
thislayout.RowDefinitions.Add(new RowDefinition { Height = 100 });
}
for(int i=0;i<10;i++)
{
SwipeItem delete = new SwipeItem
{
IconImageSource="deleteic.png",
BackgroundColor = Color.Transparent
};
List<SwipeItem> swipeItems = new List<SwipeItem>() { delete };
Frame circleImageFrame = new Frame
{
ClassId=i.ToString(),
Margin = 10,
BorderColor = Color.Black,
CornerRadius = 50,
HeightRequest = 100,
WidthRequest = 100,
IsClippedToBounds = true,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Content = new Image
{
Source = ImageSource.FromFile("user_profile.png"),
Aspect = Aspect.AspectFill,
Margin = -20,
HeightRequest = 100,
WidthRequest = 100
}
};
SwipeView swipe = new SwipeView
{
TopItems = new SwipeItems(swipeItems),
Content=circleImageFrame
};
thislayout.Children.Add(swipe, i%(int)nbofcolumns, i/(int)nbofcolumns);
delete.Invoked += delegate
{
thislayout.Children.Remove(swipe);
};
}
}
the point is that i got the width of my phone screen then divided it by 150 because i specified that i want my column's width to be 100. the thing is that it's not working, the number of columns obtained do not fit the screen like i got 7 columns and only 4 columns fit the rest do not appear and so i didn't get correct number of rows. another thing surprised me is that when i tried displaying the width obtained I got 1080 (for my phone) but when I used a tablet I got 800 though my tablet I bigger than my phone. how come? something seems odd and I don't know what it is. any suggestions?
I am working in xamarin forms. I have slider whose maximum value is more than 200. I want to move the slider thumb at particular point on slider for example at 120, but it becomes very tough to put the thumb at particular point. This happens with large maximum values. If values are less then its working fine.
So is there any solution so that we can move the slider's thumb easily at any point if slider's maximum value is very large?
You can set the increase value like this GIF.
Here is code.I set the StepValue to 20
public partial class MainPage : ContentPage
{
private double StepValue;
private Slider SliderMain;
public MainPage()
{
InitializeComponent();
StepValue = 20.0;
BindingContext = new HslColorViewModel();
SliderMain = new Slider
{
Minimum = 0.0f,
Maximum = 200.0f,
Value = 0.0f,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
};
SliderMain.BackgroundColor = Color.Black;
SliderMain.ValueChanged += OnSliderValueChanged;
Content = new StackLayout
{
Children = { SliderMain },
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
var newStep = Math.Round(e.NewValue / StepValue);
SliderMain.Value = newStep * StepValue;
}
}
I am using XamForms.Controls.Calendar for showing calendar in my application, I have added this package in all platforms.
Added following codes in xaml:
<StackLayout>
<controls:Calendar
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
x:Name="calendar"
DateClicked="CurrentDate"/>
</StackLayout>
In c#:
XamForms.Controls.Calendar calendar = new XamForms.Controls.Calendar()
{
WidthRequest = 300,
HeightRequest = 300
};
}
public async void CurrentDate(Object sender, EventArgs args)
{
var dateSelect = calendar.SelectedDate;
}
I need to add events for dates in the calendar like school day, school mass or exam(Please see the screenshot added below). Is this possible in XamForms.Controls.Calendar?
This plugin can add special dates: https://github.com/rebeccaXam/XamForms.Controls.Calendar/wiki/SpecialDates
calendar.SpecialDates = new List<SpecialDate>
{
new SpecialDate(DateTime.Now.AddDays(3))
{
Selectable = true,
BackgroundPattern = new BackgroundPattern(1)
{
Pattern = new List<Pattern>
{
new Pattern { WidthPercent = 1f, HightPercent = 0.6f, Color = Color.Transparent },
new Pattern{ WidthPercent = 1f, HightPercent = 0.4f, Color = Color.Transparent, Text = "Mass", TextColor=Color.Black, TextSize=11, TextAlign=TextAlign.Middle},
}
}
}
};
Is this effect what you want?
How would I change the Button text color on a Xamarin Forms DisplayAlert dialog?
FWIW, I opted to create a new ContentPage in XAML and show it with Navigation.PushModalAsync. In my case, it was the easiest way to simulate an alert and maintain control of all the styles.
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.AlertPage"
BackgroundColor="DarkGray"
Padding="40">
<ContentPage.Content>
<StackLayout BackgroundColor="White" Padding="10">
<Label x:Name="lblTitle" FontAttributes="Bold" FontSize="Large" Text="Title" HorizontalOptions="Center"></Label>
<BoxView HeightRequest="1" BackgroundColor="DarkGray"></BoxView>
<ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand">
<Label x:Name="lblText" FontSize="Medium"></Label>
</ScrollView>
<BoxView HeightRequest="1" BackgroundColor="DarkGray"></BoxView>
<StackLayout Orientation="Horizontal">
<Button x:Name="btn1" Text="Button 1" HorizontalOptions="CenterAndExpand"></Button>
<Button x:Name="btn2" Text="Button 2" HorizontalOptions="CenterAndExpand"></Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#:
public partial class AlertPage : ContentPage
{
public Label LblTitle
{
get
{
return lblTitle;
}
}
public Label LblText
{
get
{
return lblText;
}
}
public Button Button1
{
get
{
return btn1;
}
}
public Button Button2
{
get
{
return btn2;
}
}
public AlertPage()
{
InitializeComponent();
}
}
Implementation:
var ap = new AlertPage();
ap.LblTitle.Text = "Instructions";
ap.LblText.Text = "The text to display!";
ap.Button1.Text = "Done";
ap.Button1.Clicked += async (s, a) =>
{
await Navigation.PopModalAsync();
};
ap.Button2.IsVisible = false;
await Navigation.PushModalAsync(ap);
Screenshot:
Possible to change color with the help of custom renderers for each platform.
You have access to native api inside custom renderer.
But need to be sure that is needed, because it is not recommended (for iOS sure).
The UIAlertView class is intended to be used as-is and does not support subclassing. The view hierarchy for this class is private and must not be modified.
Relative topic for iOS here.
i have created custom displayalert you can use task call back TaskCompletionSource as xamarin build DisplayAlert from it
public async Task<bool> ShowDialogAsync(string title, string message, string acceptMessage, string cancelMessage)
{
Grid ShowDialogMessage = null;
Grid CurrentPageGrid = (App.Instance.CurrentPage as ContentPage).Content as Grid;
TaskCompletionSource<bool> result = new TaskCompletionSource<bool>();
try
{
ShowDialogMessage = GenericView.CustomDisplayAlert(message, CurrentPageGrid.RowDefinitions.Count, CurrentPageGrid.ColumnDefinitions.Count, () =>
{
//here you can add your implementation
CurrentPageGrid.Children.Remove(ShowDialogMessage);
result.SetResult(true);
},
() =>
{
//here you can add your implementation
CurrentPageGrid.Children.Remove(ShowDialogMessage);
result.SetResult(false);
}, title, acceptMessage, cancelMessage);
CurrentPageGrid.Children.Add(ShowDialogMessage);
return await result.Task;
}
catch (Exception ex)
{
return await App.Current.MainPage.DisplayAlert(title, message, acceptMessage, cancelMessage);
#if DEBUG
throw ex;
#endif
}
}
in my method i added actions to implement the call back ,, method signature you can add your own design
public static Grid CustomDisplayAlert(string message, int rows, int columns, Action acceptAction, Action cancelAction, string title = "", string acceptMessage = "", string cancelMessage = "")
{
Grid overlay = new Grid
{
BackgroundColor = Color.FromRgba(0, 0, 0, 190),
RowDefinitions = new RowDefinitionCollection { new RowDefinition { Height = GridLength.Star }, new RowDefinition { Height = GridLength.Auto }, new RowDefinition { Height = GridLength.Star } }
};
Grid.SetRowSpan(overlay, rows);
Grid.SetColumnSpan(overlay, columns);
Grid bodyView = new Grid();
StackLayout stackMainView = new StackLayout
{
Margin = new Thickness(20)
};
StackLayout stackButtonsView = new StackLayout
{
Orientation=StackOrientation.Horizontal
};
RoundedBox bgOverlay = new RoundedBox
{
CornerRadius = 4,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.White
};
bodyView.Children.Add(bgOverlay);
StackLayout elementsContainer = new StackLayout { Margin = new Thickness(10) };
IconicLabel itemDescription = new IconicLabel { MoreReadable = true, Text = message, StyleId = "Myriad-Pro-L", HorizontalTextAlignment = TextAlignment.Center, HorizontalOptions = LayoutOptions.FillAndExpand, TextColor = (Color)(App.Current.Resources["OptioDark"]), FontSize = 18, Margin = new Thickness(15) };
IconicLabel titleView = new IconicLabel { FontAttributes = FontAttributes.Bold, MoreReadable = true, Text = title, StyleId = "Myriad-Pro-L", HorizontalTextAlignment = TextAlignment.Center, HorizontalOptions = LayoutOptions.FillAndExpand, TextColor = (Color)(App.Current.Resources["OptioDark"]), FontSize = 22, Margin = new Thickness(15) };
if (titleView.Text.Length != 0)
elementsContainer.Children.Add(titleView);
elementsContainer.Children.Add(itemDescription);
bodyView.Children.Add(elementsContainer);
IconicButton acceptBtn = new IconicButton
{
HeightRequest = 40,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.White,
Text = acceptMessage,
TextColor = (Color)(App.Current.Resources["OptioDark"])
};
IconicButton cancelBtn = new IconicButton
{
HeightRequest = 40,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.White,
Text = cancelMessage,
TextColor = (Color)(App.Current.Resources["OptioDark"])
};
acceptBtn.Clicked += (sender, e) =>
{
acceptAction?.Invoke();
};
cancelBtn.Clicked += (sender, e) =>
{
cancelAction?.Invoke();
};
stackButtonsView.Children.Add(acceptBtn);
stackButtonsView.Children.Add(cancelBtn);
stackMainView.Children.Add(bodyView);
stackMainView.Children.Add(stackButtonsView);
overlay.Children.Add(stackMainView, 0, 1);
return overlay;
}
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;
}