PopUp Dialog Behaviour

Based on the StaffLynx application’s modal control-based popups and inspired by this post by Brad, I set about creating a PopUp Dialog Blend Behaviour and sample which I have put into the Expression Gallery.

Sample

The behaviour allows for Dialogs to be easily added to a WPF application. If the dialog is Modal, it is modal to any part of the window (not just the whole window) i.e. a Tab. This allows for non-linear application navigation as the entire window is not locked down.

The behaviour is applied to any grid (other panels aren’t supported at the moment), if it is modal this will be the area that is disabled when the dialog appears. The showing and hiding of the dialog is controlled by the Visible dependency property on the behaviour, and the modal drum skins color and opacity can be set. There is currently no support for animation, but could easily be added (please send in the changes if you do 🙂 )

The dialog is any UiElement as in this sample is a usercontrol (line 5).

Behavior XAML from the Sample

<Grid Grid.Row="1">
      <e:Interaction.Behaviors>
        <ch:PopUpBehaviour x:Name="SampleDialog" Modal="true" Visible="{Binding ElementName=Go, Path=IsChecked, Mode=TwoWay}">
          <ch:PopUpBehaviour.PopUp>
            <Sample:Dialog />
          </ch:PopUpBehaviour.PopUp>
          <ch:PopUpBehaviour.ModalBehaviour>
            <ch:DisableBackGroundBehaviour Background="Pink" />
          </ch:PopUpBehaviour.ModalBehaviour>
        </ch:PopUpBehaviour>
      </e:Interaction.Behaviors>

The main reason I started looking into alternatives to Brad’s solution was a better separation of visuals and behaviour, primarily ease of styling of the actual dialog.  It also puts any behaviour requirements in the hands of the dialog designer. If you want dragability or resiziability you have to implement it, thankfully it’s as easy as adding other blend behaviours. The below code snippet is the contents of a sample dialog, it can be any UiElement .

Dialog XAML from the Sample

 <Border BorderThickness="1" Background="BlanchedAlmond"  Width="150" Height="150">
    <e:Interaction.Behaviors>
      <il:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    </e:Interaction.Behaviors>
    <dropShadow:SystemDropShadowChrome>
      <DockPanel Background="White" Opacity="1" Margin="1">
        <UniformGrid DockPanel.Dock="Bottom">
          <Button Command="ApplicationCommands.Close" Width="50">Close</Button>
        </UniformGrid>
        <TextBlock DockPanel.Dock="Top" Text="Dialog" />
      </DockPanel>
    </dropShadow:SystemDropShadowChrome>
  </Border>

To Close the dialog you can either set the behaviour Visible property to false or execute the ApplicationCommands.Close command as per the sample. (Line 8 in the dialog)

A more MVVM oriented Dialog Service based on this behaviour will soon be released in Present.

Advertisements
Tagged , , ,

5 thoughts on “PopUp Dialog Behaviour

  1. Brad says:

    That’s a very useful enhancement, Adam. Nice work!

  2. […] a “View” can also be any control inside an actual view, this can be useful with things like the PopUp Dialog where you want the dialog to control a portion of a […]

  3. […] dialogs use ApplicationCommands.Close  CommandBinding to close the Window or PopUp such as the PopUpBehaviour does, binding a Close Button to ApplicationCommands.Close is an easy way to close the […]

  4. Anonymous says:

    Hello,

    in your article you mention that you will work on making this more MVVM friendly. Have you had a chance to get that done, if yes, do you mind sharing please.

  5. adammills says:

    Hi,

    No, I ended up moving over to Caliburn.Micro framework (http://caliburnmicro.codeplex.com) and haven’t really on worked on it any further. Caliburn.Micro does support popups and could be modified to support this style of popup.

    For the basic MVVM scenario, you can just bind the visibility of the popup to the ViewModel and the contents to a property (which would be a ViewModel rendered using DataTemplates at whatever scope makes sense i.e. UserControl, Window, App

    Adam

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: