#Telerik: Mastering the WPF RadWindow Dialog Boxes
RadWindow within the Telerik toolkit is an awesome resource for creating stylish windows. However, it also has the added benefit of providing you with some out-of-the-box implementations of dialog boxes. Specifically it comes with three separate ones..
- Alert
- Confirm
- Prompt
These are useful because they are already templated out with an image and everything. So I thought it would be nice to pick one of them, the Confirm prompt, and go over how you can go about using it in your projects.
So starting with a similar version to our previous projects. A simple window with two ListBoxes in it…one for ‘Selected’ and one for ‘Non-Selected’ people. When we double click on one it sends it over to the other. Easy-Peasy.
Now we want to introduce a prompt into the mix so that when we double-click it automatically prompts us to make sure that we want to do that…. should be pretty straightforward. To get the basic prompt we merely have to introduce a couple of lines of code.
1: public void MoveToSelected(Person person)
2: {
3: var parameters = new DialogParameters();
4: parameters.Content="You sure you wanna do that?";
5: RadWindow.Confirm(parameters);
6: NonSelectedList.Remove(person);
7: SelectedList.Add(person);
8: }
9:
10: public void MoveToNonSelected(Person person)
11: {
12: var parameters = new DialogParameters();
13: parameters.Content = "You sure you wanna do that?";
14: RadWindow.Confirm(parameters);
15: NonSelectedList.Add(person);
16: SelectedList.Remove(person);
17: }
Now when we try to double-click an item we get the pop-up with the content set to our specific message.
Nice except that it doesn’t NOT move the person over if we hit the Cancel button. So now we need to deal with the user’s input. Luckily the RadWindow comes with an OnClose event that we can set to grab the result from a set of WindowsClosedEventArgs. So we merely have to set up two events to handle the processing after the dialog is closed. Along with a variable to temporarily hold the person object we are trying to pass around.
1: private Person tmpPerson { get; set; }
2:
3: public void MoveToSelected(Person person)
4: {
5: tmpPerson = person;
6: var parameters = new DialogParameters();
7: parameters.Content="You sure you wanna do that?";
8: parameters.Closed += OnMoveToSelectedClosed;
9: RadWindow.Confirm(parameters);
10:
11: }
12:
13: private void OnMoveToSelectedClosed(object sender, WindowClosedEventArgs e)
14: {
15: if (e.DialogResult == true)
16: {
17: NonSelectedList.Remove(tmpPerson);
18: SelectedList.Add(tmpPerson);
19: }
20: }
21:
22: public void MoveToNonSelected(Person person)
23: {
24: tmpPerson = person;
25: var parameters = new DialogParameters();
26: parameters.Content = "You sure you wanna do that?";
27: parameters.Closed += OnMoveToNonSelectedClosed;
28: RadWindow.Confirm(parameters);
29:
30: }
31:
32: private void OnMoveToNonSelectedClosed(object sender, WindowClosedEventArgs e)
33: {
34: if (e.DialogResult == true)
35: {
36: NonSelectedList.Add(tmpPerson);
37: SelectedList.Remove(tmpPerson);
38: }
39: }
Now we get the expected behavior. Okay, so now, the buttons do not seem to correspond with what we are trying to convey to the user. It would be better since we are asking a Yes/No question to have our buttons reflect that. So in order to do that we must merely change the properties for the contents of the buttons through the parameters using OKButtonContent and CancelButtonContent. Looking at one of our functions it looks like this…
1: public void MoveToNonSelected(Person person)
2: {
3: tmpPerson = person;
4: var parameters = new DialogParameters();
5: parameters.Content = "You sure you wanna do that?";
6: parameters.OkButtonContent = "Yes";
7: parameters.CancelButtonContent = "No";
8: parameters.Closed += OnMoveToNonSelectedClosed;
9: RadWindow.Confirm(parameters);
10:
11: }
And now we have our expected results..
Now when I have a very long statement that I am trying to process …the control kind of flubs it because by default the TextBlock that the contents are set to is about 250 wide and of course TextWrapping is not enabled on it. So when you try to put a long string in you get the scrollbar like this…
So that’s kind of crummy but the content property of the DialogParameter object actually ties us into the actual content of that area so we can programmatically build up our own TextBlock object to pass it along to the dialog however we want to… so a quick couple of lines of code and we end up with this….
1: public void MoveToSelected(Person person)
2: {
3: tmpPerson = person;
4: var parameters = new DialogParameters();
5: var box = new TextBlock();
6: box.Width = 250;
7: box.Text="Are you sure you like this person well enough that they should get moved over to the selected list? It is very prestigious of course...";
8: box.TextWrapping = System.Windows.TextWrapping.Wrap;
9: parameters.Content = box;
10: parameters.OkButtonContent = "Yes";
11: parameters.CancelButtonContent = "No";
12: parameters.Closed += OnMoveToSelectedClosed;
13: RadWindow.Confirm(parameters);
14:
15: }
Pretty cool….. and that also means that you have control over the content of the OK and Cancel buttons as well so if you would like to programmatically build up say, an image button, you are more than free to do so.
Cheers!
AJ