1. Home
  2. Forum
  3. WPF
  4. Open new Window

Open new Window

Hi,

Is it possible to create a custom propertygrid editor that opens a new WPF Window.

- I imagine the custom editor to look like a button that is located at the right end of the property value column. Initially the property value is empty, and you just see white space and a button in that cell.
- Clicking the button will open a new (modal) child window.
- The new window contains multiple cascading comboboxes.
- The user selects a single object by picking values from the cascading comboboxes.
- After pressing OK, the selected object will be returned to the propertygrid. Pressing cancel will close the window without returning anything.
- The displayvalue of the selected object will now appear in the propertygrid cell; and the button remains next to it, at the right end of the propertygrid cell.

I am struggling a bit with this. In addition to the question I above, I am unsure about these things:
- Should this window be a new Window or a new Usercontrol?
- Also, how do I set the skin of the child window to match that of the main application?

As usual - any help you may be able to provide is very much appreciated.

Kind regards,

Niels van Strien




17 Replies 1 reply marked as answer
VR Vijayalakshmi Roopkumar Syncfusion Team July 20, 2020 01:41 PM UTC

Hi Niels, 
  
Query :Is it possible to create a custom propertygrid editor that opens a new WPF Window.Should this window be a new Window or a new Usercontrol? 
  
Could you please provide the detailed pictorial representation of your requirement with the PropertyGrid, so that we can able to check completely and provide you the solution and suggest you the component to be used in your application. 
  
Query :Also, how do I set the skin of the child window to match that of the main application? 
  
You can set the theme for the child window by setting the theme in Parent window using SfSkinManager.ApplyStyleOnApplication property. Please refer the following code and sample for the same below: 
 
Code:[C#] 
 
 
//Apply style on application globally 
SfSkinManager.ApplyStylesOnApplication = true; 
SfSkinManager.SetVisualStyle(this, VisualStyles.Blend); 
 
 
  
 
Please try this solution and let us know if it is helpful. 
 
Regards,
Vijayalakshmi VR. 


NV NM van Strien July 20, 2020 03:20 PM UTC

Hello Vijayalakshmi VR,

I detailed my request in the attached file.

Wrt the skin  I will try the suggested approach and let you know if I succeeded.

Kind regards

Niels van Strien

Attachment: pg_custom_window_modal_d1acdb5f.7z

VR Vijayalakshmi Roopkumar Syncfusion Team July 21, 2020 02:34 PM UTC

Hi Niels,

Thank you for your update.

We have checked the reported requirement using PropertyGrid to set the SelectedValue of cascading ComboBox in the custom editor of the PropertyGrid. If so, could you please confirm us the following details such as:

1.What do you mean by cascading ComboBox and what is the purpose of using it in your application?

2. Also confirm us from which Combobox of your Custom Window, the selected value should update in the custom editor of PropertyGrid?

Kindly update the requested details, it would help us to analyze it and provide you the solution accordingly.

Regards,
Vijayalakshmi VR

NV NM van Strien July 21, 2020 07:15 PM UTC

Hi Vijayalakshmi,

I have created an example.

In the attached project, there is a ribbon with 2 buttons on the ribbon tab PropertyGrid.

- The left Ribbon button will show a propertygrid. It will load an example ContactDetailDisplayModel from the Models folder.

The ContactDetailDisplayModel contains a IDiagnosisSelectionDisplayModel object and this will be listed in the 3rd category Diagnosis Model). For this object I would like to create the custom editor as described.

- The right button on the Ribbontab will launch the custom window. The custom window will let the user go through a number of steps and when pressed OK, it will return an object that implements the interface IDiagnosisSelectionDisplayModel. The returned object should be set to IDiagnosisSelectionDisplayModel object in the propertygrid using the property "Description" as the 'DisplayMemberPath (thinking comboboxes here, but I hope this is clear). You can create an instance of a DiagnosisDSM5DisplayModel to simulate the return type of the custom window, when you press ok.

Do not worry about the logistics of the cascading combo's - they are hooked to a database file and it would perhaps be a bit too much to mail that in the example. Just know that the custom window returns an object that implements IDiagnosisSelectionDisplayModel.

I hope this will help clarify my aim.

Kind regards,

Niels van Strien





Attachment: 2020_07_21_SyncfusionControlsDemo_a31d63cc.7z

VR Vijayalakshmi Roopkumar Syncfusion Team July 22, 2020 01:51 PM UTC

Hi Niels, 
 
Thank you for your explanation. 
 
From your update, we have understood that your requirement is to update the selected content of combobox in CustomEditor of PropertyGrid , on clicking the Okay button in new custom window . If this is your requirement, you need to bind the property in CustomEditor as below: 
 
Code:[C#] 
 
 
public void Attach(PropertyViewItem property, PropertyItem info) 
{ 
if (info.CanWrite) 
{ 
var binding = new Binding("Value") 
{ 
Mode = BindingMode.TwoWay, 
Source = info, 
ValidatesOnExceptions = true, 
ValidatesOnDataErrors = true 
}; 
 
//  Update the content for the Button 
BindingOperations.SetBinding(fontlistbox, FontListBox.ButtonContentProperty, binding); 
} 
} 
 
 
 
 
 
We have prepared a simple sample for the same from the following: 
 
 
Please try this solution and use this in your application to meet your requirement. 
 
You can learn more about configuring CustomEditor of PropertyGrid in below KB: 
 
 
Regards, 
Vijayalakshmi VR. 


Marked as answer
NV NM van Strien July 22, 2020 07:36 PM UTC

Hi Vijayalakshmi VR,

Thank you for your help!

It is a useful example, and it will help me to find a solution.

Instead of using a button that covers the whole property value area, I was hoping
- to use the same layout as was made available for the new collectionview, i.e. a small button with 3 dots [...] at the end of the cell, to open my custom window,
- and have the returned value from the custom window display in the place where it reads (Collection).

I have changed your example to display a List object in the propertygrid, so you can see the requested layout.
I have also changed your example to display a class object in the propertygrid, and set the PropertyExpandMode="NestedMode" option. This will render an arrow in front of this property and clicking it will expand the object to reveal its properties. It is for this object that I would like to create a custom editor with a collectionview-style button at the end of the cell to open my custom window.

Please let me know if this is possible and if yes, how?

Kind regards,

Niels van Strien






Attachment: 2020_07_22_PropertyGridSample_ccf0cc27.zip

BR Backia Raj Kanagaraj Syncfusion Team July 23, 2020 10:01 AM UTC

Hi Niels, 

Yes, It’s possible to show the small button with 3 dots[…] at the end of cell to open the custom window. Refer the below sample and UG link. 



Please let us know if you have any concerns. 

Regards, 
Backia Raj Kanagaraj

NV NM van Strien July 23, 2020 04:07 PM UTC

Hi Backia Raj Kanagaraj,

It feels like I cannot make clear what I am trying to achieve.

The sample you provided opens - as far as I can tell - the standard syncfusion collectionview window.  (A great new control! )

What I am trying to achieve:
- for a class object (i.e. object with nested properties) shown in in the property grid
-> show in the value field, a button at the right end of the value cell
-> clicking the button will open my own custom window. 
-> the custom window will set the object value in the propertygrid.

I know that I should write a CustomEditor for this and I have created several already.

Since there is no 'out of the box' control (eg combobox, syncfusion UpDown) that shows a textfield + button at the right end of the cell, and the custom editor requires a control, I don't know how to write my custom editor. Perhaps I should create my own control, but I was wondering if the control created for the syncfusion collectionview can be used?

I hope this is clearer.

Kind regards,

Niels






NV NM van Strien July 23, 2020 07:58 PM UTC

Hi Backia Raj Kanagaraj and Vijayalakshmi VR,


After writing my previous post I looked at it again and was able to create a custom control (as specified) and attach that to the propertygrid. This allows me to launch my custom window like requested. I need to work on the code to capture the return value, but I will update you on my progress.

What made it difficult for me is that I did not realize that I could code my own control layout for the Customeditor.  You could consider adding this info to the manual here:
https://www.syncfusion.com/kb/10143/how-to-configure-custom-editors-in-wpf-propertygrid

Thank you so much for your effort!

Kind regards,

Niels 

NV NM van Strien July 23, 2020 09:42 PM UTC

Hi,

I am still having difficulty catching the return value from my custom window.

In the example https://www.syncfusion.com/downloads/support/forum/156174/ze/PropertyGridSample_customeditor-861248939 

there is lots of code behind the xaml files. I am using MVVM, so this requires a different approach. Would it possible that you created your example using the MVVM pattern?

Thank you in advance

Niels van Strien

VR Vijayalakshmi Roopkumar Syncfusion Team July 27, 2020 02:08 PM UTC

Hi Niels. 
 
Thank you for your patience. 
 
As per your request, we have been returned the value of ComboBox from customwindow to customEditor in PropertyGrid using ComboSelectedItem property in MVVM pattern. Please find the code and sample from the following location: 
 
Code:[C#] 
 
 
var s= this.TryFindResource("viewmodel1"); 
(this.DataContext as FontListBox).ButtonContent = ((s as ViewModel).ComboSelectedItem as Model).Contentnew.ToString(); 
 
 
 
 
 
Please try this solution and let us know if it is helpful. 
 
Regards, 
Vijayalakshmi VR 


NV NM van Strien July 27, 2020 05:52 PM UTC

Hi Vijayalakshmi VR,

That is an instructive example! Thank you so much.

I prefer an approach that has even less code behind the xaml files than your last example and it seems I have found a way. I will describe my approach for future reference. Should you need a fully working code example, let me know and I will be happy to create it.

- I created a custom usercontrol that consists of a textbox + button. This usercontrol is specific to the new window that I want to interact with. Due to limitations of C# I cannot create a generic version of this usercontrol (or at least, it would not be straightforward). As far as I understand it, a code behind file cannot be initialized with a generic parameter T.

- The custom usercontrol has code-behind its xaml file. It handles the Button_Click to open the custom window (using caliburn micro). I also created a DependencyProperty (SelectedContentProperty), like in your example and called the associated property SelectedContent. The SelectedContent property is of a custom datatype class. The Xaml TextBox.Text parameter is bound to the SelectedContent.Description property (type string).

- When pressing the OK button on the custom window, a custom event is advertised on the caliburn micro event aggregator.

- The CustomEditor for my propertygrid custom usercontrol is subscribed to this event aggregator and handles the event type that was published by my custom window.

- In the CustomEditor, I have access to the usercontrol SelectedContent property and the advertised event contains a copy of the data model I selected in the custom window. In the CustomEditor event handler for my window event, I set the SelectedContent property of my custom usercontrol.

Since this setup visually produced the result I wanted, I initially thought my search was over. Alas, the custom usercontrol was only displaying a value, but it was not yet attached to the designated property in the propertygrid. For this to work, I looked at this example: https://www.syncfusion.com/forums/138092/how-to-detect-change-on-property-of-selectedobject

- I added a TextChanged event to the code behind file of my custom usercontrol:

        public event TextChangedEventHandler TextChanged;

        private void Text_TextChanged(object sender, TextChangedEventArgs e)
        {
            this.TextChanged?.Invoke(this, e);
        }
- In the viemodel of the view that contains the propertygrid, I added an eventhandler to the _PropertyGrid_SelectedPropertyItemChanged event following the pattern that was outlined in the forum post that I cited. I implemented the example in the ViewModel associated with my View, and not in the code behind file of my View, as shown in the example. Only then I was able to set the designated target of my custom Window with the desired value.

This approach follows a more clean MVVM pattern since there is only code behind the custom usercontrol xaml file. For the rest the View and Viewmodel containing the propertygrid from which my custom window was launched, were fully separated.

I feel that it could be valuable to include the info in this example and the referenced example at https://www.syncfusion.com/forums/138092/how-to-detect-change-on-property-of-selectedobject to the propertygrid manual.

Thank you again for your help!

Niels van Strien



VR Vijayalakshmi Roopkumar Syncfusion Team July 28, 2020 10:43 AM UTC

Hi Niels, 
 
Thank you for your update. 
 
We are glad to hear that you have meet your requirement with PropertyGrid. 
 
Query :I feel that it could be valuable to include the info in this example and the referenced example at https://www.syncfusion.com/forums/138092/how-to-detect-change-on-property-of-selectedobject to the propertygrid manual. 
 
The sample has been prepared based on the customer scenario and it is different for all customer usage. However in all our dashboard samples of PropertyGrid follows the MVVM pattern which illustrates the basic functionalities and feature of the control. 
 
You can locate the same in the below location: 
 
C:\Program Files (x86)\Syncfusion\Essential Studio\WPF\Installed Version\PropertyGrid\ 
 
So please provide your updated sample, it will help us to analyze on the sample pattern and decide on whether to consider the same in our PropertyGrid Manual. 
 
Please let us know if you have any other concerns on this. 
 
Regards, 
Vijayalakshmi V.R. 


NV NM van Strien July 29, 2020 07:43 AM UTC

Hi Vijayalakshmi V.R.

Here is my code demo.

Since it uses Caliburn Micro and MVVM, it has a bit of extra setup than your usual demos, to configure the container. 

1 If you click the button on the Ribbon, a propertygrid will appear
- The last property is called Diagnosis and has a custom usercontrol (label + button).

2 If you click the button, a new custom Window will appear. The cascading combos are not wired up, but pressing Save will return a custom data model to the propertygrid.

3 I have set breakpoints at some crucial locations, so you will see what happens after pressing save.

I hope it is clear enough. If not, feel free to let me know.

Kind regards,

Niels



Attachment: 2020_07_29_SyncfusionControlsDemo_bd0310c6.7z

VR Vijayalakshmi Roopkumar Syncfusion Team July 30, 2020 07:47 AM UTC

Hi Niels. 
 
Thank you for your update. 
 
We have consider your request to prepare the PropertyGrid Manual in MVVM pattern to illustrates the reported scenario at our end. We have logged a documentation report for the same and it will be published at the earliest. 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Vijayalakshmi VR 


TY Tyrone replied to Vijayalakshmi Roopkumar November 25, 2024 07:59 AM UTC

Hi

Has the current feature been added to the latest version?


BS Bhaskar Suresh Syncfusion Team November 28, 2024 04:32 PM UTC

Hi Tyrone,


We have considered the previous customer's request to prepare the solution as documentation and not considered it as a feature request.


Kindly inform us if you have any additional concerns.


Regards,

Bhaskar Suresh


Loader.
Up arrow icon