Skip to content

Overlays and Dialogs

Jump to bottom
BSick7 edited this page Mar 18, 2015 · 6 revisions

Overlays and Dialogs were introduced in v0.16.20. Dialogs work slightly different in Fayde than ChildWindow in Silverlight. This difference emerged from a technical constraint, but we believe this to be a better pattern for showing overlay visuals and dialogs. This document begins with Overlay, explains DialogViewModel, and finishes with Dialog.

Overlay

namespace Fayde.Controls.Primitives {
    class Overlay extends FrameworkElement {
        static VisualProperty: DependencyProperty;
        static VisualUriProperty: DependencyProperty;
        static VisualViewModelProperty: DependencyProperty;
        static IsOpenProperty: DependencyProperty;
        static MaskBrushProperty: DependencyProperty;
        static ClosedCommandProperty: DependencyProperty;

        Visual: UIElement;
        VisualUri: Uri;
        VisualViewModel: any;
        IsOpen: boolean;
        MaskBrush: Media.Brush;
        ClosedCommand: Input.ICommand;
    
        Opened: nullstone.Event<nullstone.IEventArgs>;
        Closed: nullstone.Event<OverlayClosedEventArgs>;
    }
}

To use, place an Overlay in the XAML next to the trigger. The Visual is transposed into a new layer that is displayed when IsOpen is true. The MaskBrush describes the display of a background element on the new layer. If the MaskBrush is set to any brush other than {x:Null} (XAML) or null (code), then all mouse/touch events will be captured. If the background element is clicked, the overlay will be closed.

TestSite example

The following bindings are set by default for use with MVVM:

  • VisualViewModel --> {Binding Path=OverlayDataContext}
  • IsOpen --> {Binding IsOpen, Mode=TwoWay}
  • ClosedCommand --> {Binding ClosedCommand}

To take advantage of this automation, data-bind the DataContext of the overlay to a DialogViewModel.

TestSite example

DialogViewModel

module Fayde.MVVM {
    export class DialogViewModel<TBuilder, TAccept> extends ViewModelBase {
        IsOpen: boolean;
        OverlayDataContext: any;
        RequestOpenCommand: RelayCommand;
        ClosedCommand: RelayCommand;

        AcceptAction: (data: TAccept) => any;
        CompleteAction: (pars: IOverlayCompleteParameters) => any;
        ViewModelBuilder: (builder: TBuilder) => any;
        CanOpen: (builder: TBuilder) => boolean;
    }
}

DialogViewModel provides a clean automation for creating a view model a dialog, showing, then responding to true, false, or null dialog result. All settings are optionally, but typically, this is created in a view model as follows:

import DialogViewModel = Fayde.MVVM.DialogViewModel;
class MainViewModel extends Fayde.MVVM.ViewModelBase {
    constructor () {
        super();
        this.Launcher = new DialogViewModel({
            ViewModelBuilder: (builder) => { 
                /* 
                return view model to use in dialog
                builder is the CommandParameter from bound RequestOpenCommand 
                */
            },
            CanOpen: (builder) => { 
                /* 
                return whether dialog can be opened
                builder is the CommandParameter from bound RequestOpenCommand 
                */
            },
            AcceptAction: (data) => { /* occurs only when DialogResult === true */ },
            CompleteAction: (pars) => { 
                /*
                occurs when dialog is closed
                pars contains Result and Data (dialog view model)
                */
            }
        });
    }
}

Dialog

Dialog is a ContentControl contained within an overlay visual. The default Metro theme provides a very minimal template with a gray border, a surrounding glow effect, a white background, and centered on screen.

TestSite Example

In the testsite example, the OK and Cancel buttons have Dialog.ClickResult set. This is a way of automating the closing of dialogs with a DialogResult.

Clone this wiki locally