Post
Ask Question

Learn Universal Windows Programming Via Modern C++ (ContentDialog)

Before reading this article, I highly recommend reading the previous parts of the series.

In this article, we are going to learn about ContentDialog in Modern C++

ContentDialog is used to create a user-defined Modal Dialog

Modal dialog

It forces the user to get the input (whether success or failure) until user cannot interact with Parent windows. Modal dialog is called child dialog.

Example

VS - Account Settings, then Enter the product key dialog (Modal Dialog), without close this dialog. User cannot interact with the parent dialogue.

 

ContentDialog

ContentDialog is a modal dialog, it has title, content, default three buttons, primary, secondary and close buttons. This dialog is completely customizable, like all the properties we can assign our own control or styles

  1.          ContentDialog cDlg;  
  2.         cDlg.Title(CreateInspectable(L"Content Dialog"));  
  3.         cDlg.Content(CreateInspectable(L"C++/WinRT UWP Content Dialog"));  
  4.         cDlg.PrimaryButtonText(L"Primary Button");  
  5.         cDlg.SecondaryButtonText(L"Secondary Button");  
  6.         cDlg.CloseButtonText(L"Close Button");  

 Show ContentDialog

 Show the dialog using the ShowAsync function. 
  1. cDlg.ShowAsync();  

ContentDialogResult

ContentDialog return the ContentDialogResult as a return value

  1. auto Result = co_await cDlg.ShowAsync();
  3. ContentDialogResult::Primary -> primary button has clicked   
  4.   
  5. ContentDialogResult::Secondary -> Secondary button has clicked   
  6.   
  7. ContentDialogResult::None -> Close button has clicked  
FullSizeDesired

Property used for displaying content dialog in full screen.Complete sample source to handle the ContentDialog
  1. #include "pch.h"  
  2. using namespace winrt;  
  3. using namespace Windows::ApplicationModel;  
  4. using namespace Windows::ApplicationModel::Activation;  
  5. using namespace Windows::Foundation;  
  6. using namespace Windows::UI;  
  7. using namespace Windows::UI::Xaml;  
  8. using namespace Windows::UI::Xaml::Controls;  
  9. using namespace Windows::UI::Xaml::Controls::Primitives;  
  10. using namespace Windows::UI::Xaml::Interop;  
  11. using namespace Windows::UI::Xaml::Media;  
  12. using namespace Windows::UI::Xaml::Navigation;  
  13. using namespace Windows::UI::Popups;  
  14. using namespace Windows::Storage;  
  15. struct App :ApplicationT<App>    
  16. {    
  17.     TextBlock txtStatus;    
  18.     
  19.     IInspectable CreateInspectable(hstring strCaption)    
  20.     {    
  21.         return PropertyValue::CreateString(strCaption);    
  22.     }    
  23.     
  24.     fire_and_forget BtnClick(IInspectable const & sender, const RoutedEventArgs &args)    
  25.     {    
  26.         ContentDialog cDlg;    
  27.         cDlg.Title(CreateInspectable(L"Content Dialog"));    
  28.         cDlg.Content(CreateInspectable(L"C++/WinRT UWP Content Dialog"));    
  29.         cDlg.PrimaryButtonText(L"Primary Button");    
  30.         cDlg.SecondaryButtonText(L"Secondary Button");    
  31.         cDlg.CloseButtonText(L"Close Button");    
  32.         cDlg.FullSizeDesired(true);    
  33.         auto Result = co_await cDlg.ShowAsync();    
  34.     
  35.         switch (Result)    
  36.         {    
  37.         case ContentDialogResult::Primary:    
  38.             txtStatus.Text(L"Primary Clicked");    
  39.             break;    
  40.         case ContentDialogResult::Secondary:    
  41.             txtStatus.Text(L"Secondary Clicked");    
  42.             break;    
  43.         case ContentDialogResult::None:    
  44.             txtStatus.Text(L"None Clicked");    
  45.             break;    
  46.         default:    
  47.             break;    
  48.         }    
  49.             
  50.     }    
  51.     
  52.     TextBlock CreateTextBlock(hstring text)    
  53.     {    
  54.         TextBlock txtBlock;    
  55.         txtBlock.Text(text);    
  56.         txtBlock.FontFamily(FontFamily(L"Segoe UI Semibold"));    
  57.         txtBlock.TextAlignment(TextAlignment::Left);    
  58.         txtBlock.FontSize(35);    
  59.         txtBlock.Foreground(SolidColorBrush(Colors::Brown()));    
  60.         txtBlock.Margin(CreateThickness(10, 10, 0, 0));    
  61.         return txtBlock;    
  62.     }    
  63.     
  64.     Thickness CreateThickness(int left, int top, int right, int bottom)    
  65.     {    
  66.         Thickness thick;    
  67.         thick.Left = left;    
  68.         thick.Top = top;    
  69.         thick.Right = right;    
  70.         thick.Bottom = bottom;    
  71.         return thick;    
  72.     }    
  73.     
  74.     
  75.     void OnLaunched(LaunchActivatedEventArgs const&)    
  76.     {    
  77.         Button BtnClick;    
  78.         auto captionText = PropertyValue::CreateString(L"Content Dialog");    
  79.         BtnClick.Content(captionText);    
  80.         BtnClick.Click({ this,&App::BtnClick });    
  81.         BtnClick.Margin(CreateThickness(20, 10, 0, 0));    
  82.     
  83.         Button BtnCustomClick;    
  84.         auto customCaptionText = PropertyValue::CreateString(L"Custom Content Dialog");    
  85.                 txtStatus = CreateTextBlock(L"Content Status");    
  86.         txtStatus.Margin(CreateThickness(20, 10, 0, 0));    
  87.         StackPanel sStatusPanel;    
  88.         sStatusPanel.Children().Append(txtStatus);    
  89.     
  90.         StackPanel sContentPanel;    
  91.         sContentPanel.Children().Append(BtnClick);    
  92.         sContentPanel.Orientation(Orientation::Horizontal);    
  93.         sContentPanel.VerticalAlignment(VerticalAlignment::Top);    
  94.     
  95.         StackPanel mainPanel;    
  96.         mainPanel.Children().Append(sContentPanel);    
  97.         mainPanel.Children().Append(sStatusPanel);    
  98.     
  99.     
  100.         Window window = Window::Current();    
  101.         window.Content(mainPanel);    
  102.         window.Activate();    
  103.     
  104.         auto txtNo = CreateTextBlock(L"Welcome");    
  105.     
  106.             
  107.     }    
  108. };    
  109.     
  110. int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)    
  111. {    
  112.     Application::Start([](auto &&) {make<App>(); });    
  113.     return 0;    
  114. }    
output 

 
 
So far we have seen the ContentDialog , now I am going to explain , how to customize content dialog
 
Customize ContentDialog   

ContentDialog content property is use to customize the dialog content area, this property is like a container control, prepare the controls you want to use, prepare the list and add it in to panel control, finally assign the panel control to the content property

Ex: below sample code prepares the header text and two checkboxes are added into the ContentDialog

  1. CheckBox CreateCheckBox(hstring caption,bool IsChecked)  
  2.     {  
  3.         CheckBox chkBox;  
  4.         chkBox.IsChecked(IsChecked);  
  5.         chkBox.Content(CreateInspectable(caption));  
  6.         return chkBox;  
  7.     }  
  8.   
  9. fire_and_forget BtnCustomClick(IInspectable const & sender, const RoutedEventArgs &args)  
  10.     {  
  11.   
  12.         auto chkBox1 = CreateCheckBox(L"C++/WinRT",true);  
  13.         auto chkBox2 = CreateCheckBox(L"C#",false);  
  14.         auto header = CreateTextBlock(L"Customize Dialog");  
  15.   
  16.         StackPanel sPanel;  
  17.         sPanel.Orientation(Orientation::Vertical);  
  18.         sPanel.Children().Append(header);  
  19.         sPanel.Children().Append(chkBox1);  
  20.         sPanel.Children().Append(chkBox2);  
  21.   
  22.   
  23.         ContentDialog cDlg;  
  24.         cDlg.Title(CreateInspectable(L"Content Dialog"));  
  25.                 cDlg.Content(sPanel);  
  26.         cDlg.CloseButtonText(L"Close");  
  27.         auto Result = co_await cDlg.ShowAsync();  
  28.         txtStatus.Text(L"Custom Dialog");  
  29.     }  
Output

 
All the C++/WinRT samples code here 
 
Conclusion

I hope you understood how to use ContentDialog control.


Similar Articles