Drag image and create button

[Peppi Vecchio]

Good day,

 

I would like to drag an image from a radtoolbar and have it create a button or some other custom control in a stackpanel.
I would think it would sit under DragStatus.DropComplete. Different buttons could be created based on the name of the image or some other attribute. How can I do this programmatically? Can someone post an example or point me to a tutorial?

Thanks in advance,

JV

[Tina Stancheva]

Hello Joseph Vecchio,

Please accept my apology for the delayed response.

I have prepared an example for you, can you please take a look at it and let me know if this is what you had in mind?

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Peppi Vecchio]

Tina,

Thank you for the example. It works perfectly. Nice of you to add different controls too (like the tab).
The only other thing I haven't been able to find in an example is how you would "view" the new controls properties in a separate stack panel.

e.g. I drag the red button down from the tool bar into stack panel 1 and it creates a radbutton. Is it possible to see the radbutton properties in stack panel 4 - and be able to change them?

height = 20
width = 100
tag = ""

stuff like that?

Thank you,
JV

[Tina Stancheva]

Hi Joseph Vecchio,

In the example you can access the button in StackPanel 1, through the children collection of the StackPanel, like this:

if (this.MyStackPanel1.Children.Count > 1 && this.MyStackPanel1.Children[1] != null)
                        {
                            (this.MyStackPanel1.Children[1] as RadButton).Height= 500;
                        }

In a more complicated scenario, you can try using VisualTreeHelper to find the item you need.

I have modified the example implementing the first suggested approach. Can you please take a look at it and let me know if this is what you had in mind?

Regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Peppi Vecchio]

This example is very helpful. But I think what I'm looking for is something more like this.

Button in toolbar gets dragged into stackpanel 1. In stackpanel 2, I see the properties of the button listed as text and their values populating a textbox.

So stackpanel 2 looks like this

Radbutton1.Height          textbox[ 100 ]
Radbutton1.Width           textbox[ 200 ]
Radbutton1.IsEnabled     textbox[ true ]

I would think we could iterate through the controls and their properties using a loop:

for

 

(int idx = 0; idx < this.MyStackPanel1.Children.Count; ++idx)
{ 

 

TextBlock

 

 

txt1 = new TextBlock() { Text = this.MyStackPanel1.Children[idx].Height }
TextBlock  txt2 = new TextBlock() { Text = this.MyStackPanel1.Children[idx].Width}
TextBlock txt3 = new TextBlock() { Text = this.MyStackPanel1.Children[idx].IsEnabled}
}

Sorry - this is a crude example.

JV

 

[Tina Stancheva]

Hello Joseph Vecchio,

I couldn't understand whether you need to display the properties of the created in StackPanel1 button in StackPanel2 when you drop the image in the StackPanel1 or when you drop an image in StackPanel2. However, I modified the example to implement both of this scenarios.

So when you drop an image in StackPanel1:

1. A RadButton control is created in StackPanel1;
2. 3 TextBlock controls are created in StackPanel2 and their Text properties are set to appropriate titles;
3. 3 TextBlocks are created in StackPanel4 and they are displaying the values of the Height, Width and IsEnabled properties of the RadButton.

Then when you drop an image into StackPanel2 the Text properties of the TextBlocks will change, displaying the values of the Height, Width and IsEnabled properties of the RadButton/s contained in StackPanel1.
 
Please, note that in order to display the Height, Width and IsEnabled properties of all RadButton controls created in StackPanel1, you should create as many TextBlocks in StackPanel2 as necessary. This is why in the example, I am adding new TextBlocks whenever a RadButton is created in StackPanel1. Then when an image is dropped into StackPanel2 I am iterating not only through all items dropped into StackPanel1, but also through the previously created TextBlocks in StackPanel2.

You should also keep in mind that if you don't set the Height and Width properties when you create the RadButton, their values will be unknown.

Please take a look at the project and let me know if this is what you had in mind.

Kind regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Peppi Vecchio]

This is very helpful. Thank you for the help. It is an idea to build on.

I would think my only other question would be if a property and/or it's value were visible in a sepate stackpanel, would it be possible to change the value and have it update the button?

So I drag a button from the tool bar into stackpanel1, stackpanel3 shows the values of the properties such as height = 50. If I were able to change the value from 50 to 100, would it affect the button in stackpanel1?

I know printing the values as a textblock will not affect the property - not sure if there was a way to manipulate the properties in a way like this.

Thank you,

JV

[Tina Stancheva]

Hi Joseph Vecchio,

When an item is dropped into, let say StackPanel2, you can set new values of the Height/Width/IsEnabled properties of the buttons created in StackPanel1 and the changes will be applied immediately.

I attached the modified example. If you drop some images into StackPanel1 thus creating RadButtons and then you drop an image into StackPanel2, you can see that the RadButtons in StackPanel1 have changed.

Also, please notice that in the example in StackPanel2 will be displayed the updated values, however the values in StackPanel4 won't change since they are set when an item is dropped into StackPanel1.

Is this what you had in mind?

Sincerely yours,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.