Skip to content

CustomDialog

Jump to bottom
Tim Heuer edited this page Jan 24, 2014 · 4 revisions

CustomDialog

What it is

CustomDialog is a control intended to be used full-screen and to mimic the MessageDialog behavior. Currently in WinRT, the MessageDialog is limited to text/button content only. If that is your scenario, you should absolutely use that API. CustomDialog exists to serve the more advanced scenario of needing richer content in your UI modal dialog.

This is a "UI modal" dialog meaning that it is intended to block UI interaction until the dialog is dismissed. It does not create true modal behavior, so actions in the background could still be executing.

API

CustomDialog is a ContentControl. The properties on the control itself that you want to be aware of are Title (required), Background, and BackButtonVisibility to set to your desired behavior.

Example Usage

Declarative:

<callisto:CustomDialog x:FieldModifier="public" x:Name="LoginDialog" 
                       Title="Bacon Terms and Conditions" 
                       Background="Teal" BackButtonVisibility="Visible">
    <StackPanel>
        <TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" TextWrapping="Wrap">
            Bacon ipsum dolor sit amet bacon ham drumstick strip steak, sausage frankfurter tenderloin turkey salami andouille bresaola. Venison salami prosciutto, pork belly turducken tri-tip spare ribs chicken strip steak fatback shankle tongue boudin andouille. Meatloaf salami pork ground round turkey jerky meatball ball tip, filet mignon fatback flank prosciutto shank. Turkey boudin ham hock, filet mignon tri-tip bresaola tongue venison spare ribs meatloaf flank beef pancetta. Leberkas turducken flank ground round biltong chuck bacon kielbasa. Beef pastrami meatball, short loin venison swine pork loin shank meatloaf spare ribs.
        </TextBlock>
        <CheckBox Margin="0,0,0,8" Foreground="White" Content="I agree to the Terms and Conditions of Bacon" />
        <TextBlock Margin="0,0,0,8" FontSize="14.6667" FontWeight="SemiLight" Text="Enter your name for acceptance" />
        <callisto:WatermarkTextBox HorizontalAlignment="Left" Watermark="Type your name" Width="400" Height="35" />
        <StackPanel Margin="0,20,0,0" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Content="OK" Width="90" Margin="0,0,20,0" />
            <Button Content="CANCEL" Width="90" Click="DialogCancelClicked" />
        </StackPanel>
    </StackPanel>
</callisto:CustomDialog>

Example UI

CustomDialog from Callisto

Known Issues

  • This no longer is a problem in Windows 8.1 CustomDialog suffers from the same light/dark theme mixing nuances that SettingsFlyout does for Windows 8 only. This means depending on the theme of your app, the content within the CustomDialog may need more specific styles. This is a platform limitation of WinRT in Windows 8 and not of Callisto.
Clone this wiki locally