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?
Related
I have a Xamarin.Forms (v5.0.0.2515) project.
I have encountered this strange behavior using this scenario:
I have a view with 5 rectangles. RadiusX/RadiusY for each rectangle is 20.
I assign this view to a ContentView and everything looks normal (Fig. 1)
I assign another view to the ContentView
I assign back the view to the ContentView and rounded borders are gone (Fig. 2)
What can cause this issue?
This is a sample code to reproduce the issue.
using Xamarin.Forms;
namespace App
{
public class SamplePage : ContentPage
{
public SamplePage()
{
var grid = new Grid
{
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = GridLength.Star }
}
};
var btn = new Button { Text = "Replace the view!" };
Grid.SetRow(btn, 0);
grid.Children.Add(btn);
var rect = new Xamarin.Forms.Shapes.Rectangle
{
RadiusX = 20,
RadiusY = 20,
Fill = Brush.Azure,
StrokeThickness = 3,
Stroke = Brush.Black
};
var cv = new ContentView { Content = rect };
Grid.SetRow(cv, 1);
grid.Children.Add(cv);
btn.Clicked += (_, __) =>
{
cv.Content = new Label();
cv.Content = rect;
};
Content = grid;
}
}
}
Thanks.
Fig. 1
Fig. 2
According to your demo you provided, I found that the code cv.Content = new Label(); caused the problem. I changed the demo and you can check.
public partial class MainPage : ContentPage
{
public MainPage()
{
var grid = new Grid
{
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = GridLength.Star }
}
};
var btn = new Button { Text = "Replace the view!" };
Grid.SetRow(btn, 0);
grid.Children.Add(btn);
var rect = new Xamarin.Forms.Shapes.Rectangle
{
RadiusX = 50,
RadiusY = 10,
Fill = Brush.Azure,
StrokeThickness = 10,
Stroke = Brush.Black
};
var rect2 = new Xamarin.Forms.Shapes.Rectangle
{
RadiusX = 20,
RadiusY = 20,
Fill = Brush.Azure,
StrokeThickness = 3,
Stroke = Brush.Black
};
var cv = new ContentView {Content = rect2};
Grid.SetRow(cv, 1);
grid.Children.Add(cv);
btn.Clicked += (_,__) =>
{
cv.Content = rect;
};
Content = grid;
}
}
}
I new a grid object without any settings in the xaml file.
After importing the data through 'Build_Grid()' in the 'OnAppearing()', I want to assign the 'gridview' to 'Grid_Info' to display on the screen, the code 'Grid_Info = gridview' does not work.
I am wondering how to achieve my needs?
<ContentPage.Content>
<StackLayout>
<Label Text="AAA" />
<Grid x:Name="Grid_Info">
</Grid>
</StackLayout>
</ContentPage.Content>
void Build_Grid(Data data)
{
Grid gridview = new Grid();
gridview.RowDefinitions.Add(new RowDefinition() { Height = 40 });
gridview.Children.Add(data[0],0,0);
...
Grid_Info = gridview; //it does not work...
}
protected override void OnAppearing()
{
Data data = new Data();
...
Build_Grid(data);
}
if you've already defined the Grid in XAML there is no need to do this
Grid gridview = new Grid();
instead just reference Grid_Info directly
Grid_Info.RowDefinitions.Add(new RowDefinition() { Height = 40 });
Grid_Info.Children.Add(data[0],0,0);
You could try the code below. I make a Data class with view to test. It work for me.
public partial class Page3 : ContentPage
{
Data[] data;
public Page3()
{
InitializeComponent();
data = new Data[2];
data[0] = new Data { view = new Button() { BackgroundColor = Color.Red } }; //data[0]
data[1] = new Data { view = new Label() { BackgroundColor = Color.Green, Text = "Label" } };//data[1]
}
void Build_Grid(Data[] data)
{
Grid gridview = new Grid();
Grid_Info.RowDefinitions.Add(new RowDefinition() { Height = 40 });
Grid_Info.Children.Add(data[0].view, 0, 0);//show the red button
Grid_Info = gridview; //it does not work...
}
protected override void OnAppearing()
{
base.OnAppearing();
Build_Grid(data);
}
}
public class Data
{
public View view { get; set; }
}
I'm not able to link the xamarin forms custom control in the content page.
Have created the following xamarin custom control "AlertMessage",
public class AlertMessage:ContentView
{
private Frame _frame;
private Grid _alertGrid;
private StackLayout _alertLayout, _alertLayoutContent;
private BoxView _alertBoxView;
private Label _alertMessage;
public static readonly BindableProperty TitleProperty = BindableProperty.Create("Title", typeof(string), typeof(AlertMessage), default(string));
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(AlertMessage), default(string));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public AlertMessage()
{
InitLayout();
}
public void InitLayout()
{
_alertGrid = new Grid { Padding = 0 };
_alertGrid.RowDefinitions.Add(new RowDefinition
{
Height = GridLength.Star
});
_alertGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = 8 });
_alertGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
_alertLayout = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Constants.MMSGAlertBackgroundColor,
Padding = 0
};
_alertBoxView = new BoxView
{
Color = Constants.MMSGAlertTextColor,
VerticalOptions = LayoutOptions.FillAndExpand
};
_alertLayout.Children.Add(_alertBoxView);
_alertLayoutContent = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Padding = 16
};
_alertMessage = new Label
{
Text = Text,
TextColor = Constants.MMSGAlertTextColor
};
_alertLayoutContent.Children.Add(_alertMessage);
_alertGrid.Children.Add(_alertLayout, 0, 0);
_alertGrid.Children.Add(_alertLayoutContent, 1, 0);
_frame = new Frame
{
OutlineColor = Constants.MMSGAlertBorderColor,
BackgroundColor = Constants.MMSGAlertBackgroundColor,
Padding = new Thickness(2, 2, 0, 2),
HasShadow = false,
Content = _alertGrid,
VerticalOptions = LayoutOptions.FillAndExpand
};
this.Content = _frame;
}
}
I'm trying to render this custom control in the content page using the c# code,
var alertMessage = new AlertMessage
{
Text = ViewModel.AlertReviewMessage,
Title = "Please review"
};
I'm getting the following build error, on rendering this custom control in the content page.
Severity Code Description Project File Line Suppression State
Error Can't resolve the reference 'APP.Mobile.CustomControls.AlertText', referenced from the method 'System.Object APP.Mobile.StatusSummaryContentPage::<GetDataTemplate>b__7_0()' in 'MMSG.Mobile, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'. RemServ.Mobile.iOS
Please let me know what link am i missing here to add a custom control to a content page
Your content view is missing InitializeComponent(); in the constructor.It should be like below
public AlertView()
{
InitializeComponent();
Content.BindingContext = this;
}
I hope you have added reference to the shared project from custom controls project. using APP.Mobile.CustomControls;
Also you should add [XamlCompilation(XamlCompilationOptions.Compile)] on top of the class declaration.
theres is a way to set a multi-line text to a Xamarin.Forms Button??
I've tried Button.Text = "something \n xxjjjxx" But don't work.
A simple solution will use:
There is an excellent example on how to achieve this on Github. It is quite simple really. Just create your own control that inherits from ContentView and contains a grid.
[ContentProperty("Content")]
public class MultiLineButton : ContentView
{
public event EventHandler Clicked;
protected Grid ContentGrid;
protected ContentView ContentContainer;
protected Label TextContainer;
public String Text
{
get
{
return (String)GetValue(TextProperty);
}
set
{
SetValue(TextProperty, value);
OnPropertyChanged();
RaiseTextChanged();
}
}
public new View Content
{
get { return ContentContainer.Content; }
set
{
if (ContentGrid.Children.Contains(value))
return;
ContentContainer.Content = value;
}
}
public static BindableProperty TextProperty = BindableProperty.Create(
propertyName: "Text",
returnType: typeof(String),
declaringType: typeof(MultiLineButton),
defaultValue: null,
defaultBindingMode: BindingMode.TwoWay,
propertyChanged: TextValueChanged);
private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
{
((MultiLineButton)bindable).TextContainer.Text = (String)newValue;
}
public event EventHandler TextChanged;
private void RaiseTextChanged()
{
if (TextChanged != null)
TextChanged(this, EventArgs.Empty);
}
public MultiLineButton()
{
ContentGrid = new Grid
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
ContentContainer = new ContentView
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
TextContainer = new Label
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
ContentContainer.Content = TextContainer;
ContentGrid.Children.Add(ContentContainer);
var button = new Button
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.FromHex("#01000000")
};
button.Clicked += (sender, e) => OnClicked();
ContentGrid.Children.Add(button);
base.Content = ContentGrid;
}
public void OnClicked()
{
if (Clicked != null)
Clicked(this, new EventArgs());
}
}
Then it can be used like this:
<local:MultiLineButton x:Name="AssessmentToolDetailButton"
WidthRequest="100" HeightRequest="60" BackgroundColor="Blue">
<StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<Label Text="Hello" TextColor="White" Font="16"/>
<Label Text="World" TextColor="White" Font="16"/>
</StackLayout>
</local:MultiLineButton>
You can also place an image in the button by setting its content.
In my example I modified Dans original code in order to make the text bindable. Just set the Text value instead of the Content like this:
<local:MultiLineButton Text="{Binding Description}" />
All credit goes to Danvanderboom for his example:
ConentButton by Danvanderboom
This is mainly a problem with iOS because Android will wrap the text
by default. I tried the solution provided by Kasper and it worked
however the buttons do not have rounded corners and the appearance is
not consistent with other buttons in my app.
A simple solution is to use a custom renderer (ButtonRenderer) to set the LineBreakMode to WordWrap. If you then set the width of the button in the Xaml you get words to appear on different lines.
iOS
public class WrappedButtonRenderer: ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
Control.TitleEdgeInsets = new UIEdgeInsets(4, 4, 4, 4);
Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
Control.TitleLabel.TextAlignment = UITextAlignment.Center;
}
}
Android does not require a custom renderer because it wraps by default.
This is a known issue with Xamarin Forms.
I don't think I've seen two lined buttons often. You have two options that I think might work:
Create a Custom Renderer and Extend the respective Button Class to do more on each native platform. Might be a harder
Create a Xamarin.Forms Class that extends a View that can contains a StackLayout and smaller elements such as multi-line labels, then you can use a TapGestureRecognizer to use with your view and treat it like a button.
Expanding on fireydude's answer, I created a MultilineButton control and renderer for iOS so I could add text alignment. This uses the Xamarin.Forms.TextAlignment enum.
MultilineButton.cs
using Xamarin.Forms;
namespace APP_NAMESPACE.Controls
{
public class MultilineButton : Button
{
public static readonly BindableProperty HorizontalTextAlignmentProperty = BindableProperty.Create(
propertyName: "HorizontalTextAlignment",
returnType: typeof(TextAlignment),
declaringType: typeof(MultilineButton),
defaultValue: TextAlignment.Start
);
public TextAlignment HorizontalTextAlignment
{
get { return (TextAlignment)GetValue(HorizontalTextAlignmentProperty); }
set { SetValue(HorizontalTextAlignmentProperty, value); }
}
}
}
MultilineButtonRenderer.cs
using APP_NAMESPACE.Controls;
using APP_NAMESPACE.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(MultilineButton), typeof(MultilineButtonRenderer))]
namespace APP_NAMESPACE.iOS.Renderers
{
public class MultilineButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control == null) { return; }
UIControlContentHorizontalAlignment horizontalAlignment;
UITextAlignment textAlignment;
// We have to use ButtonRenderer, so cast the Element to MultilineButton to get the HorizontalTextAlignment property
var button = (MultilineButton)Element;
if (button == null) { return; }
switch(button.HorizontalTextAlignment)
{
case TextAlignment.Center:
horizontalAlignment = UIControlContentHorizontalAlignment.Center;
textAlignment = UITextAlignment.Center;
break;
case TextAlignment.End:
horizontalAlignment = UIControlContentHorizontalAlignment.Right;
textAlignment = UITextAlignment.Right;
break;
default:
horizontalAlignment = UIControlContentHorizontalAlignment.Left;
textAlignment = UITextAlignment.Left;
break;
}
Control.HorizontalAlignment = horizontalAlignment;
Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
Control.TitleLabel.TextAlignment = textAlignment;
}
}
}
Then use it within XAML:
<controls:MultilineButton Text="This Button is Centered!" HorizontalTextAlignment="Center" />
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;
}