How to show custom dialog from Callisto WinRT toolkit?

Question

My question is just like that. How should I show the CustomDialog control from Callisto toolkit? I have the following xaml:

<controls:LayoutAwarePage
x:Name="pageRoot"
x:Class="HeronClientWindowsStore.Views.SuggestEventDialogPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HeronClientWindowsStore.Views"
xmlns:controls="using:HeronClientWindowsStore.Controls"
xmlns:callisto="using:Callisto.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
</Page.Resources>

<callisto:CustomDialog 
                     x:FieldModifier="public" 
                     x:Name="suggestEventDialog" 
                     Width="300" Height="500"
                     Title="Suggest an Event" 
                     Background="Teal" 
                     BackButtonVisibility="Visible">
    <StackPanel>
        <TextBlock 
                  Margin="0,0,0,8" 
                  Text="Suggest an event that should be added to Heron."
                  FontSize="14.6667" 
                  FontWeight="SemiLight" 
                  TextWrapping="Wrap" />
        <TextBlock
                  Margin="0,0,0,8"
                  FontSize="14.6667" 
                  FontWeight="SemiLight" 
                  Text="Event URL" />
        <callisto:WatermarkTextBox 
                  HorizontalAlignment="Left" 
                  Watermark="http://www.example.com" 
                  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" />
        </StackPanel>
    </StackPanel>
</callisto:CustomDialog>

It doesn't show and I can't see any Method for triggering it.

Answer 1

You have to use IsOpen property to open the dialog.

I am pasting here the working code for me.

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Show Dialog" Click="btnShowDialog_Click" />
    <callisto:CustomDialog 
                 x:FieldModifier="public" 
                 x:Name="suggestEventDialog" 
                 Title="Suggest an Event" 
                 Background="Teal" 
                 BackButtonVisibility="Visible"
                 BackButtonClicked="suggestEventDialog_BackButtonClicked_1">
        <StackPanel>
            <TextBlock 
              Margin="0,0,0,8" 
              Text="Suggest an event that should be added to Heron."
              FontSize="14.6667" 
              FontWeight="SemiLight" 
              TextWrapping="Wrap" />
            <TextBlock
              Margin="0,0,0,8"
              FontSize="14.6667" 
              FontWeight="SemiLight" 
              Text="Event URL" />
            <callisto:WatermarkTextBox 
              HorizontalAlignment="Left" 
              Watermark="http://www.example.com" 
              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" />
            </StackPanel>
        </StackPanel>
    </callisto:CustomDialog>
</Grid>

C#

private void btnShowDialog_Click(object sender, RoutedEventArgs e)
{
    suggestEventDialog.IsOpen = true;
}

private void suggestEventDialog_BackButtonClicked_1(object sender, RoutedEventArgs e)
{
    suggestEventDialog.IsOpen = false;
}