Hello!
I followed the tutorial to create a custom shape for a RadDiagram in WPF:
https://docs.telerik.com/devtools/wpf/controls/raddiagram/howto/create-custom-shape
But there is no explanation on how I could add mouse interaction (or other events).
Binding normal values works fine, but if I try to bind, for example:
<Ellipse MouseDown="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MyMouseDownFunction}" />I receive an error: "A 'Binding' can only be set on a DependencyProperty of a DependencyObject.'".
How can I add mouse interaction to certain parts of my custom shape?
1 Answer, 1 is accepted
Hello Dominic,
Since a custom control is created (as shown in the article that you shared) the approach would be to set the x:Name property on the elements from the ControlTemplate and retrieve them on the OnApplyTemplate method (which will have to be overridden). Then, subscribe to the required parts and execute the custom logic.
The following code snippets show this suggestion's implementation, which extends the custom shape from the article:
<Style TargetType="local:CustomShape">
<Setter Property="BorderThickness" Value="4" />
<Setter Property="BorderBrush" Value="#6C666666" />
<Setter Property="Width" Value="355" />
<Setter Property="Height" Value="160" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="0" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" />
<GradientStop Offset="1" Color="#FFEDF4FF" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomShape">
<Border Margin="{TemplateBinding Margin}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="3">
<Border Background="{TemplateBinding Background}"
BorderBrush="#E6FBFDFF"
BorderThickness="1"
CornerRadius="1">
<StackPanel>
<telerik:RadGlyph x:Name="glyphClose"
Glyph="{StaticResource GlyphCloseCircle}"
Foreground="red"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="10"/>
<Grid Margin="40 5" VerticalAlignment="Center">
<TextBlock FontFamily="Segoe UI"
FontSize="14"
Text="MIX RADIO" />
<TextBlock HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="14"
Text="108.8 FM" />
</Grid>
<Border Height="90"
BorderBrush="#6C666666"
BorderThickness="0 1">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#65FFFFFF" />
<GradientStop Offset="0.965" Color="#66E7E5E5" />
<GradientStop Offset="0.609" Color="#9DD9D9D9" />
<GradientStop Offset="0.826" Color="#A5D9D9D9" />
</LinearGradientBrush>
</Border.Background>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="BufferingPercentageLabel"
Margin="0 0 0 15"
HorizontalAlignment="Center"
FontFamily="Segoe UI"
FontSize="13">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="1" Color="Black" />
<GradientStop Color="#FF727272" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<telerik:RadProgressBar x:Name="BufferingProgressBar"
Width="270"
Height="30"
Maximum="100"
Minimum="0"
Value="60" />
</StackPanel>
</Border>
<Border Padding="0 5">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.07" Color="#7FFFFFFF" />
<GradientStop Offset="0.965" Color="#7EE7E5E5" />
<GradientStop Offset="0.61" Color="#FFD9D9D9" />
<GradientStop Offset="0.826" Color="#FFD9D9D9" />
</LinearGradientBrush>
</Border.Background>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<TextBlock Margin="0 0 0 15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe UI"
FontSize="13"
Text="VOTE">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="1" Color="Black" />
<GradientStop Color="#FF727272" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<telerik:RadRating x:Name="Rating"
Margin="15 0"
HorizontalAlignment="Center"
Value="3" />
</StackPanel>
</Border>
</StackPanel>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
public class CustomShape : Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase
{
private RadGlyph glyphClose;
static CustomShape()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomShape), new FrameworkPropertyMetadata(typeof(CustomShape)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.glyphClose = this.GetTemplateChild("glyphClose") as RadGlyph;
this.SubscribeToEvents();
}
private void SubscribeToEvents()
{
this.glyphClose.MouseLeftButtonDown += GlyphClose_MouseLeftButtonDown;
}
private void GlyphClose_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.Diagram.RemoveShape(this);
}
}
The produced result is as follows:
I have attached a sample project for you to test, which contains the above implementation.
Regards,
Stenly
Progress Telerik