Material design part 2 - build dialog

With the latest version 2.6 of MaterialDesignInXamlToolkit I decided to make a series of posts on MaterialDesignXamlToolkit. In this first post we will look at how to change the themes in our #WPF application with PowerShell. Thank to Kevin Bost @kitokeboo. In this new Part we focused on Dialog in MaterielDesignXamlToolkit.

1.Dialogs

The Material Design In XAML Toolkit’s dialogs implementation is designed to:

• Provide correct styling
• Allow any dialog to be constructed
• Compatible with code-behind
• Compatible with MVVM
• Compatible with pure XAML
• Work in applications with multiple windows

Dialogs are asynchronous so at some point you will have to deal with that in your code.

2.Ok but with which Control ?

The DialogHost control. It’s a content control, meaning the underlying content over which the popup dialog will be displayed can be targeted; to a specific area of your app, or the entire Window content.

<materialDesign:DialogHost>
    <materialDesign:DialogHost.DialogContent>
        <dialogContent />
    </materialDesign:DialogHost.DialogContent>
    <mainContent />
</materialDesign:DialogHost>

It’s also possible to use DialogHost.DialogContentTemplate in order to define Style, Font etc…

When the dialog is open, the underlying content will be disabled.

3 How to show and close Dialog

3.1 Open with XAML

There is a RoutedCommand can pe implemented in your Button via the CommandParameter with the this code :

<Button Command="{x:Static md:DialogHost.OpenDialogCommand}" />

3.2 Open with Property IsOpen

Now The Controls <materialDesign:DialogHost/> have a Property IsOpen wich accept value : True or False

My XAML Code :

<materialDesign:DialogHost Name="Dialog1">
        <materialDesign:DialogHost.DialogContent>
            <StackPanel Margin="15">
                <TextBlock Margin="10" Text="My First dialog" />
                <CheckBox Name="Check_Me" Content="Check me"/>
                <Button Margin="10" Name="Close_ME" Content="Close" />
            </StackPanel>
        </materialDesign:DialogHost.DialogContent>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Name="Show" Content="Show Dialog" Margin="0,0,0,10"/>
        </StackPanel>
    </materialDesign:DialogHost>

My PS1 Code :

$Show = $Form.findname("Show")
$Dialog = $Form.findname("Dialog1")
$Check_ME =  $Form.findname("Check_Me")
$Close = $Form.findname("Close_ME")

$Show.add_Click({

$Dialog.IsOpen = $True

})

$Close.add_Click({
    $Dialog.IsOpen = $False
})

3.1 One example with a CheckBox

In this example the first Dialog here the code :

My XAML Code :

<materialDesign:DialogHost Name="Dialog1">
        <materialDesign:DialogHost.DialogContent>
            <StackPanel Margin="15">
                <TextBlock Margin="10" Text="My First dialog" />
                <CheckBox Name="Check_Me" Content="Check me"/>
                <Button Margin="10" Name="Close_ME" Content="Close" />
            </StackPanel>
        </materialDesign:DialogHost.DialogContent>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Name="Show" Content="Show Dialog" Margin="0,0,0,10"/>
        </StackPanel>
    </materialDesign:DialogHost>

My PS1 Code :

[System.Reflection.Assembly]::LoadWithPartialName('presentationframework') |Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\System.Windows.Interactivity.dll") | Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\MaterialDesignThemes.Wpf.dll") | Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\MaterialDesignColors.dll") | Out-Null
[System.Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms") | Out-Null

function LoadXml ($global:filename)
{
    $XamlLoader=(New-Object System.Xml.XmlDocument)
    $XamlLoader.Load($filename)
    return $XamlLoader
}

$XamlMainWindow=LoadXml("MonInterface.xaml")
$Reader=(New-Object System.Xml.XmlNodeReader $XamlMainWindow)
$Form=[Windows.Markup.XamlReader]::Load($Reader)
$Show = $Form.findname("Show")
$Dialog = $Form.findname("Dialog1")
$Check_ME =  $Form.findname("Check_Me")
$Close = $Form.findname("Close_ME")

$Show.add_Click({

$Dialog.IsOpen = $True

})

$Close.add_Click({

    if ($Check_ME.IsChecked -eq $true)
    {
        [System.Windows.Forms.MessageBox]::Show("You close the Dialog with the CheckBox Checked")
        $Check_ME.IsChecked = $False
    }
    else
    {
        [System.Windows.Forms.MessageBox]::Show("You close the Dialog without the CheckBox Checked")
    }

    $Dialog.IsOpen = $False
})

$Form.ShowDialog() | Out-Null

3.2 Example Credential

My XAML Code :

<materialDesign:DialogHost Name="Dialog1">
        <materialDesign:DialogHost.DialogContent>
            <StackPanel Margin="15">
              <StackPanel Orientation="Vertical">  
                <TextBlock Margin="10" Text="Enter your Credential" />
                <TextBox Name="Name" materialDesign:HintAssist.Hint="Name" />
                <PasswordBox Name="PasswordBox" 
                    materialDesign:HintAssist.Hint="Floating Password" 
                    materialDesign:HintAssist.Foreground="Green"
                    materialDesign:TextFieldAssist.UnderlineBrush="Green"
                    Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
              </StackPanel>
                <Button Margin="10" Name="Close_ME" Content="Close" />
            </StackPanel>
        </materialDesign:DialogHost.DialogContent>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Name="Show" Content="Show Dialog" Margin="0,0,0,10"/>
        </StackPanel>
    </materialDesign:DialogHost>

My PS1 Code :

[System.Reflection.Assembly]::LoadWithPartialName('presentationframework') |Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\System.Windows.Interactivity.dll") | Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\MaterialDesignThemes.Wpf.dll") | Out-Null
[System.Reflection.Assembly]::LoadFrom("assembly\MaterialDesignColors.dll") | Out-Null
[System.Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms") | Out-Null

function LoadXml ($global:filename)
{
    $XamlLoader=(New-Object System.Xml.XmlDocument)
    $XamlLoader.Load($filename)
    return $XamlLoader
}

$XamlMainWindow=LoadXml("MonInterface.xaml")
$Reader=(New-Object System.Xml.XmlNodeReader $XamlMainWindow)
$Form=[Windows.Markup.XamlReader]::Load($Reader)
$Show = $Form.findname("Show")
$Dialog = $Form.findname("Dialog1")
$Name =  $Form.findname("Name")
$Password= $Form.findname("PasswordBox")
$Close = $Form.findname("Close_ME")

$Show.add_Click({

$Dialog.IsOpen = $True


})

$Close.add_Click({

    #find value from Controls

    $MSG1 = $Name.Text  
    $MSG2 = $Password.password.tostring()

        [System.Windows.Forms.MessageBox]::Show("You name is $MSG1 with the Password $MSG2")


    $Dialog.IsOpen = $False
})

$Form.ShowDialog() | Out-Null

4 Dialogs whit ItemList

5 For the Fun you can also In Dialog launch a web page

My project is available on Github here

Thanks for reading.

Written by Jérôme Bezet-Torres @JM2K69.