Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding DialogService #1825

Merged
merged 12 commits into from
Jun 8, 2019
Merged

adding DialogService #1825

merged 12 commits into from
Jun 8, 2019

Conversation

dansiegel
Copy link
Member

@dansiegel dansiegel commented Jun 6, 2019

Description of Change

Adds new DialogService for Prism.Forms. This follows a similar pattern to the new DialogService for WPF with a few changes for Xamarin.Forms development. Note that this works by resetting the content of the CurrentPage. It will place the current content within an AbsoluteLayout behind a mask and your Dialog. When the dialog is closed your page content will again be reset back to it's original layout.

fixes #1814

demodialog-small

API Changes

Added:

public interface IDialogService
{
    void ShowDialog(string name, IDialogParameters parameters, Action<IDialogResult> callback);
}

public interface IDialogResult 
{
    Exception Exception { get; }
    IDialogParameters Parameters { get; }
}

public interface IDialogParameters : INavigationParameters
{
}

public class DialogParameterAttribute : NavigationParameterAttribute
{
}

public interface IDialogAware
{
    bool CanCloseDialog();

    void OnDialogClosed();

    void OnDialogOpened(IDialogParameters parameters);

    event Action<IDialogParameters> RequestClose;
}

Also adds XAML extension to Show Dialogs as well as extension methods for Registering Dialogs. In addition to the very simple IDialogService.ShowDialog, we have several extensions to provide a more robust API. For instance you may not have Dialog Parameters, or a callback that you wish you pass, each of these use cases is accounted for.

Styling

The Dialog Service has several defaults including a mask layer that presents an Opaque Black background. This can be overridden globally providing a style PrismDialogMaskStyle in the ApplicationResources or on the individual Dialog by adding a style to prism:DialogLayout.MaskStyle. Either way the style must target a BoxView.

<!-- Include in the Application Resources to apply globally for all Dialogs in your app -->
<ResourceDictionary>
  <Style TargetType="BoxView" x:Key="PrismDialogMaskStyle">
    <Setter Property="Color" Value="Purple" />
    <Setter Property="Opacity" Value="0.5" />
  </Style>
</ResourceDictionary>

<!-- Specify a custom mask style for this dialog -->
<ContentView DialogLayout.MaskStyle="{StaticResoure MyMaskStyle}">

For those times where you need a completely custom mask such as you need to use a custom Gradient, this can additionally be supported by providing your own Mask:

<ContentView>
  <DialogLayout.Mask>
    <local:MyAwesomeGradientView />
  </DialogLayout.Mask>
</ContentView>

Layout Sizing

As indicated this includes a new class called DialogLayout which is available as part of the Prism XML Namespace. This additionally contains Relative Size Request properties for both Width and Height. These values should be a double less or equal to 1 and greater than 0. If provided the Dialog will get a size request equal to the factor of your request and the size of the parent Page. This will also be bound to dynamically update on Page rotation.

<ContentView DialogLayout.RelativeWidthRequest="{OnIdiom Default=0.75, Desktop=0.5}">

The DialogLayout also provides a LayoutBounds property which allows you to override the default placement of the dialog. By default we place the dialog in the center of the page with LayoutBounds "0.5 0.5, -1, -1". This will allow the view to size properly based on it's content, not counting any Relative Width/Height Requests. You by providing your own bounds such as "0.5, 0.3, -1, -1" you can move the dialog to a higher position in the parent if you prefer the dialog not be centered.

<!-- Position the Dialog 30% of the down the screen instead of centering -->
<ContentView DialogLayout.LayoutBounds="0.5, 0.3, -1, -1">

useralert-small

Using QueryString Parameters

Dialogs must generally be dismissed by providing button or other interaction in which raises the RequestClose event. For many dialogs however you may wish to allow your user to simply tap the background mask to dismiss the dialog. You can pass the DialogParameter closeOnBackgroundTapped to add a behavior to the background mask. This will bypass your RequestClose event and attempt to close the dialog with empty DialogParameters. In order to dismiss CanCloseDialog must still return true.

<Button Text="Show Dialog"
        Command="{prism:ShowDialog 'SomeDialog?title=Alert&amp;message=Hello%20From%20Prism'}" />

IAutoInitialize

This supports the new IAutoInitialize interface, however properties must use the DialogParameterAttribute instead of the NavigationParameterAttribute if you are providing a custom name or requiring a given parameter.

IActiveAware

IActiveAware is also supported. This will set IsActive to false for the CurrentPage's ViewModel while the Dialog is displayed and back to true when the dialog is closed. This could be useful if you don't care about a callback but simply want to refresh your state when the View becomes active again.

PR Checklist

  • Has tests (if omitted, state reason in description)
  • Rebased on top of master at time of PR
  • Changes adhere to coding standard

@lock
Copy link

lock bot commented Jan 28, 2020

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Jan 28, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[SPEC] New IDialogService for Prism.Forms
1 participant