How to Customise the Alert OK / Cancel buttons using this aritchie/userdialogs in Xamarin Forms - xaml

Question

Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.

Answer 1

I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);

Answer 2

With Rg.Plugins.Popup Nuget you can customize the popup.

Answer 3

Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you