question

AghaKhan-7367 avatar image
0 Votes"
AghaKhan-7367 asked NicoZhu-MSFT answered

Adding DataContext to ContentDialog

The ContentDialog doesn't offer binding, and I like to add binding to that control, so I like to add DataContext to control
Any help will be very much appreciated.

windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

NicoZhu-MSFT avatar image
0 Votes"
NicoZhu-MSFT answered

Hello, Welcome to Micorosoft Q&A,

Adding DataContext to ContentDialog

You could make ViewModel for ContentDialog, and binding the primary and second buttons click with command property. I will show the sample code below.

For example

Xaml

 <ContentDialog
     x:Class="App28.UWP.TestDialog"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:App28.UWP"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="TITLE"
     PrimaryButtonCommand="{Binding PrimaryClickCommand}"
     PrimaryButtonText="{Binding Ok}"
     SecondaryButtonCommand="{Binding SecondaryClickCommand}"
     SecondaryButtonText="{Binding Cancel}"
     mc:Ignorable="d">
     <ContentDialog.DataContext>
         <local:DialogViewModel />
     </ContentDialog.DataContext>
    
     <Grid>
         <TextBlock VerticalAlignment="Center" Text="{Binding Content}" />
     </Grid>
 </ContentDialog>

Code Behind


 public sealed partial class TestDialog : ContentDialog
 {
     public TestDialog()
     {
         this.InitializeComponent();
     }
    
 }
 public class DialogViewModel
 {
     public string Ok { get; set; }
     public string Cancel { get; set; }
     public string Content { get; set; }
     public ICommand PrimaryClickCommand
     {
         get
         {
             return new RelayCommand(() =>
             {
    
    
             });
         }
     }
    
     public DialogViewModel()
     {
         Ok = "Ok";
         Cancel = "Cancel";
         Content = "Hello Word";
     }
     public ICommand SecondaryClickCommand
     {
         get
         {
             return new RelayCommand(() =>
             {
    
    
             });
         }
     }
 }
    
 public class RelayCommand : ICommand
 {
     private readonly Action _execute;
     private readonly Func<bool> _canExecute;
     /// <summary>
     /// Raised when RaiseCanExecuteChanged is called.
     /// </summary>
     public event EventHandler CanExecuteChanged;
     /// <summary>
     /// Creates a new command that can always execute.
     /// </summary>
     /// <param name="execute">The execution logic.</param>
     public RelayCommand(Action execute)
         : this(execute, null)
     {
     }
     /// <summary>
     /// Creates a new command.
     /// </summary>
     /// <param name="execute">The execution logic.</param>
     /// <param name="canExecute">The execution status logic.</param>
     public RelayCommand(Action execute, Func<bool> canExecute)
     {
         if (execute == null)
             throw new ArgumentNullException("execute");
         _execute = execute;
         _canExecute = canExecute;
     }
     /// <summary>
     /// Determines whether this RelayCommand can execute in its current state.
     /// </summary>
     /// <param name="parameter">
     /// Data used by the command. If the command does not require data to be passed,
     /// this object can be set to null.
     /// </param>
     /// <returns>true if this command can be executed; otherwise, false.</returns>
     public bool CanExecute(object parameter)
     {
         return _canExecute == null ? true : _canExecute();
     }
     /// <summary>
     /// Executes the RelayCommand on the current command target.
     /// </summary>
     /// <param name="parameter">
     /// Data used by the command. If the command does not require data to be passed,
     /// this object can be set to null.
     /// </param>
     public void Execute(object parameter)
     {
         _execute();
     }
     /// <summary>
     /// Method used to raise the CanExecuteChanged event
     /// to indicate that the return value of the CanExecute
     /// method has changed.
     /// </summary>
     public void RaiseCanExecuteChanged()
     {
         var handler = CanExecuteChanged;
         if (handler != null)
         {
             handler(this, EventArgs.Empty);
         }
     }
 }


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.








5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.