CODEWITHSUNDEEP
xamlxamarinxamarin.formsxamarin.iosxamarin.android
Srikanth venigalla
Srikanth venigalla

Reputation: 59

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

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.

Upvotes: 1

Views: 4200

Answers (3)

Miguel Angel Muñoz
Miguel Angel Muñoz

Reputation: 381

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

Upvotes: 1

Srikanth venigalla
Srikanth venigalla

Reputation: 59

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

Upvotes: 0

Billy Liu
Billy Liu

Reputation: 2168

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);

Upvotes: 4

Related Questions