DisplayAlert and DisplayActionSheet styling

WesselOosthuizenWesselOosthuizen ✭✭USMember ✭✭

How can I change the styling of these dialogs on the native platforms? For example, for Android I'm using a modified holo light theme, so these dialogs pops up with white background and blue everything else. My app color scheme is not blue so it looks out of place. So which elements in my theme and styling do I need to change for this?

Thanks

Posts

  • JohnHardmanJohnHardman mod GBUniversity mod

    @WesselOosthuizen - Did you ever find an answer to this? I am particularly keen to change the colors on UWP.

  • NMackayNMackay mod GBInsider, University mod

    @JohnHardman

    I'm playing about with overriding the base theme in UWP which seems to be the best way to go and experimenting with a native UWP dialog service, not quite there but can style some elements.

  • JohnHardmanJohnHardman mod GBUniversity mod

    @NMackay - I started looking into this a while back, but got diverted onto other things. These are the "notes" that I have in my UWP code to remind me of what I found and what I was still looking into. Copied here in case it's of any help:

                // This seems to be used as the background color on action sheets and dropdown menus.
                // This will also be used as the background color of the navigation bar if
                // navigationPage.BarBackgroundColor is set to Color.Default
                Windows.UI.Xaml.Application.Current.Resources["SystemControlBackgroundChromeMediumLowBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
    
                // This seems to be used as the text color for text and images on the navigation bar
                Windows.UI.Xaml.Application.Current.Resources["ApplicationForegroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
    
                //// TODO - investigate what these impact (setting them all to Lime will help remind me)
                Windows.UI.Xaml.Application.Current.Resources["FormsCancelForegroundBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
                Windows.UI.Xaml.Application.Current.Resources["TextBoxButtonBackgroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
                Windows.UI.Xaml.Application.Current.Resources["SystemControlBackgroundChromeBlackMediumBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
    
                Windows.UI.Xaml.Application.Current.Resources["ButtonBackgroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
    
                // On UWP, this one seems to be used to paint the color of button borders when they lose focus
                Windows.UI.Xaml.Application.Current.Resources["ButtonBorderThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
    
                // This seems to be used as the text color for text in ListViews
                Windows.UI.Xaml.Application.Current.Resources["DefaultTextForegroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0)); // 127, 127, 127));
    
                Windows.UI.Xaml.Application.Current.Resources["ApplicationPageBackgroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
                Windows.UI.Xaml.Application.Current.Resources["AppBarBackgroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
                Windows.UI.Xaml.Application.Current.Resources["SystemColorControlAccentBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
                Windows.UI.Xaml.Application.Current.Resources["AppBarItemForegroundThemeBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
    
                // "ActionSheetList"
                // "ActionSheetStyle"
                // "BaseTextBlockStyle"
                // "BodyTextBlockStyle"
                // "CaptionTextBlockStyle"
                // "CellTemplate"
                // "ContainedPageTemplate"
                // "FormsListViewItem"
                // "FormsTextBoxStyle"
                // "HeaderTextBlockStyle"
                // "ListViewGroup"
                // "ListViewItemContentTextBlockStyle"
                // "ListViewItemTextBlockStyle"
                // "MasterDetailPopup"
                // "MasterDetailSplit"
                // "MyContentDialogControlTemplate"
                // "PushPinTemplate"
                // "RootContainerStyle"
                // "SubheaderTextBlockStyle"
                // "TabbedPage"
                // "TabbedPageHeader"
                // "TabbedPageStyle"
                // "TableRoot"
                // "TableSection"
                // "TitleTextBlockStyle"
                // "TitleToolbar"
    
  • NMackayNMackay mod GBInsider, University mod

    @JohnHardman

    My dialog service works like this in UWP:

    using System;
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Controls;
    using UWPComponentTest.Helpers;
    using UWPComponentTest.UWP.Helpers;
    using Xamarin.Forms;
    using Application = Windows.UI.Xaml.Application;
    using Style = Windows.UI.Xaml.Style;
    
    [assembly: Dependency(typeof(DisplayAlertService))]
    
    namespace UWPComponentTest.UWP.Helpers
    {
        public class DisplayAlertService : IHandsetDialogService
        {
            public async Task<bool> ShowAlert(string title, string content, string okButton, Action callback)
            {
                var stack = new StackPanel
                {
                    Children =
                    {
                        new TextBlock { Text = content }
                    }
                };
    
                var dialog = new ContentDialog
                {
                    Title = title,
                    Content = stack,
                    PrimaryButtonText = okButton,
                };
    
                dialog.PrimaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    if (!Equals(callback, null)) callback();
                };
    
                dialog.Style = (Style)Application.Current.Resources["AlertStyle"];
                await dialog.ShowAsync();
                return true;
            }
    
            public async Task<bool> ShowAlertConfirm(string title, string content, string confirmButton, string cancelButton,
                Action<bool> callback)
            {
    
                var stack = new StackPanel
                {
                    Children =
                    {
                        new TextBlock { Text = content }
                    }
                };
    
                var dialog = new ContentDialog
                {
                    Title = title,
                    Content = stack,
                    PrimaryButtonText = confirmButton,
                    SecondaryButtonText = cancelButton,
                };
    
                dialog.PrimaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    callback(true);
                };
                dialog.SecondaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    callback(false);
                };
    
                dialog.Style = (Style)Application.Current.Resources["DecisionStyle"];
                await dialog.ShowAsync();
                return true;
            }
        }
    }
    

    The style is attached.I'm using callbacks as the native Android AlertDialog isn't awaitable so this means my PCL interface works on all three platforms.

    This is something I'll be working on over the next few weeks to improve the styling aspect but should give some clues on where to start with styling the alert dialog in UWP.

  • JohnHardmanJohnHardman mod GBUniversity mod

    Thanks @NMackay - that's really useful. I'm in the midst of a major re-factoring right now (adding split screen use for desktops and tablets), but will sort out the action sheet styling after that :-)

  • JohnHardmanJohnHardman mod GBUniversity mod

    Just a quick update, as I've been tweaking all sorts of colors on UWP today...

                // This is used for the title text in DisplayActionSheet
                Windows.UI.Xaml.Application.Current.Resources["SystemControlPageTextBaseHighBrush"] =
                    new SolidColorBrush(Colors.Pink);
    
                // This is used for the items in DisplayActionSheet, and for the tooltip on the ellipsis on the toolbar
                Windows.UI.Xaml.Application.Current.Resources["SystemControlForegroundBaseHighBrush"] =
                    new SolidColorBrush(Colors.Gold);
    
                // This is used to highlight items on DisplayActionSheet and on the toolbar, when hovering over them
                Windows.UI.Xaml.Application.Current.Resources["SystemControlHighlightListLowBrush"] =
                    new SolidColorBrush(Colors.Green);
    
  • huangjinshehuangjinshe ✭✭✭ USMember ✭✭✭

    @NMackay said:
    @JohnHardman

    My dialog service works like this in UWP:

    using System;
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Controls;
    using UWPComponentTest.Helpers;
    using UWPComponentTest.UWP.Helpers;
    using Xamarin.Forms;
    using Application = Windows.UI.Xaml.Application;
    using Style = Windows.UI.Xaml.Style;
    
    [assembly: Dependency(typeof(DisplayAlertService))]
    
    namespace UWPComponentTest.UWP.Helpers
    {
        public class DisplayAlertService : IHandsetDialogService
        {
            public async Task<bool> ShowAlert(string title, string content, string okButton, Action callback)
            {
                var stack = new StackPanel
                {
                    Children =
                    {
                        new TextBlock { Text = content }
                    }
                };
    
                var dialog = new ContentDialog
                {
                    Title = title,
                    Content = stack,
                    PrimaryButtonText = okButton,
                };
    
                dialog.PrimaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    if (!Equals(callback, null)) callback();
                };
    
                dialog.Style = (Style)Application.Current.Resources["AlertStyle"];
                await dialog.ShowAsync();
                return true;
            }
    
            public async Task<bool> ShowAlertConfirm(string title, string content, string confirmButton, string cancelButton,
                Action<bool> callback)
            {
    
                var stack = new StackPanel
                {
                    Children =
                    {
                        new TextBlock { Text = content }
                    }
                };
    
                var dialog = new ContentDialog
                {
                    Title = title,
                    Content = stack,
                    PrimaryButtonText = confirmButton,
                    SecondaryButtonText = cancelButton,
                };
    
                dialog.PrimaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    callback(true);
                };
                dialog.SecondaryButtonClick += (sender, buttonArgs) =>
                {
                    dialog.Hide();
                    callback(false);
                };
    
                dialog.Style = (Style)Application.Current.Resources["DecisionStyle"];
                await dialog.ShowAsync();
                return true;
            }
        }
    }
    

    The style is attached.I'm using callbacks as the native Android AlertDialog isn't awaitable so this means my PCL interface works on all three platforms.

    This is something I'll be working on over the next few weeks to improve the styling aspect but should give some clues on where to start with styling the alert dialog in UWP.

    I think you should better put it to Github and add Android or IOS code, maybe we could use it when we want to override the default popup message style, like change font or font size something. It should be a good component.

Sign In or Register to comment.