Event from DataTemplate? ControlTemplate results wierd diagram behaviour

[Michael]

I have created an application that is somewhat similiar to the Dashboard designer except in SL. Following the approach demonstrated in the DD I have a DataTemplate such as:

GENERIC.XAML

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Controls.Diagrams;Component/Themes/office/black/DiagramShapes.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="local:ASResourceShape" BasedOn="{StaticResource RadDiagramShapeStyle}">
        <Setter Property="Background" Value="Wheat" />
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="ContentTemplate">
            <Setter.Value>
             <DataTemplate >
                    <telerik:RadButton Grid.Row="1" Grid.Column="1" Name="ASRRadButton"
              Content="{Binding Path=Content, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}"
              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}"
              Margin="0,0,0,0"  MaxWidth="800"
              FontSize="{Binding Path=FontSize, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}, Mode=TwoWay}"
              FontWeight="{Binding Path=FontWeight, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}" />
                </DataTemplate>
             </Setter.Value>
        </Setter>
     </Style>

This style is defined in generic.xaml because I need the RadDiagramShapeStyle

So, now how do I setup a event on the RadButton click?

No matter what I do I cant find the button in code in order to wire up an eventhandler. Perhaps in this case I should use a ControlTemplate like so:

       <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ASResourceShape">
                   
                        <telerik:RadButton  Grid.Row="1" Grid.Column="1" Name="ASResource"
 
                          Content="{Binding Path=Content, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}"
                          Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}"
                          Margin="0,0,0,0"  MaxWidth="800"
                          FontSize="{Binding Path=FontSize, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}, Mode=TwoWay}"
                          FontWeight="{Binding Path=FontWeight, RelativeSource={RelativeSource AncestorType=local:ASResourceShape}}" />
                      
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>

If I do that I can find the button in code, but when I drop this style on to the diagram surface, it comes across as width=0, height=0, but much worse, although I can select the object I cannot move it on the diagram the way I could before when using a datatemplate.

Any suggestions?

[Lancelot]

Hi Michael,

Have you tried to wire up to the ShapeClicked event? When using RadDiagram framework, the elements are considered shapes rather than normal UI elements. Telerik has created an entire framework to handle regularly used events. 

This link will bring you to the events overview of the RadDiagram framework. Here are some other resources you might find useful:

• Shapes Overview
• Manipulation and Selection of diagram shapes
• RadDiagram Commands

If you go to any of those links, you'll be inside the documentation for the control. Look over to the left pane and scroll down. You'll find there is extensive documentation. I hope this helps you complete your goals.

Good Luck,
Lancelot

[Michael]

Thanks for the suggestion but this still does not answer my question.

1) Is is possible to trigger an event from a datatemplate?
2) What if I use a command?
3) If I use the ShapeClicked event can I try and cast the sender to the button in the shape to see if was the button that got clicked as opposed to the entire shape. This is important because the shape may be much larger than the button, there may multiple buttons in the shape, or the shape may be grouped with another shape.
4) And it does not address the question of why I cant move the shape when I use a ControlTemplate instead of datatemplate.

[Miro Miroslavov]

Hi Michael, 
Let me go through your questions:

1. You can't easily get the visuals that are inside your DataTemplate, because they're not intended to be used that way. Your best option in that case is to use Command (DelageCommand) as you asked in your second question. And actually this is your best option in my opinion, because this is the purest MVVM way of handling the user actions.
2. Yes, you can use DelegateCommand in your DataContext.
3. ShapeClicked is also very good option, because it comes out of the box. You can also make your shape looks like a button - with some borders and colors, but it otherwise it can be just regular shape.
4. When you put a button in your ControlTemplate - it handles the mouse down/click event, so the Diagram/Shape can't see it, so it doesn't understand that it should be selected and moved. You can fix that if you set Margin to your Button, so that leave some space for the user to be able to select and drag the shape.

Please let us know if you need more help on any of the mentioned approaches. 

Greetings,
Miro Miroslavov
the Telerik team

[Michael]

Thank you that answers my questions completely.