How to handle events in Custom Controls

Question

I am trying to create a simple controller, here is my Generic.xaml;

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TopluNotEkle">


    <Style TargetType="{x:Type local:FileSelector}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FileSelector}">

                    <Button BorderThickness="8,8,8,8" Background="Gray" x:Name="MainButton">
                        <Button.BorderBrush>
                            <DrawingBrush TileMode="Tile" Viewport="0,0,64,64" ViewportUnits="Absolute">
                                <DrawingBrush.Drawing>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="LightGray">
                                            <GeometryDrawing.Geometry>
                                                <RectangleGeometry Rect="0,0,100,100" />
                                            </GeometryDrawing.Geometry>
                                        </GeometryDrawing>
                                        <GeometryDrawing Brush="DarkGray">
                                            <GeometryDrawing.Geometry>
                                                <GeometryGroup>
                                                    <RectangleGeometry Rect="0,0,50,50"/>
                                                    <RectangleGeometry Rect="50,50,50,50"/>
                                                </GeometryGroup>
                                            </GeometryDrawing.Geometry>
                                        </GeometryDrawing>
                                    </DrawingGroup>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Button.BorderBrush>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="BlueViolet" FontWeight="Bold" FontSize="20">Drag & Drop</TextBlock>
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

and this is my code behind

public class FileSelector : Control
{
    static FileSelector()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(FileSelector), new FrameworkPropertyMetadata(typeof(FileSelector)));
        MainButton.Drop += myDrop;

    }

    static void myDrop(object sender, DragEventArgs e)
    {
        Debug.Fail("This is called");
    }
}

I am getting The name MainButton does not exist in current context error. I also tried setting Drop = "myDrop" , however, that also didn't work.

How can I listen to events on my component?

Answer 1

So your problem is not what you are setting as a 'Drop' value, it is the reference to the MainButton that is not available.

I think you are trying to create a custom control, which typically defined as UserControl , not as a part of ResourceDictionary . I might be wrong as I haven't worked with WPF for several years. Here is how to create user control:

<UserControl x:class= "YourNamespace.FileSelector" ... other xmlns garbage>

<Button BorderThickness="8,8,8,8" Background="Gray" x:Name="MainButton">
    <Button.BorderBrush>
        <DrawingBrush TileMode="Tile" Viewport="0,0,64,64" ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="LightGray">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,100,100" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="DarkGray">
                        <GeometryDrawing.Geometry>
                            <GeometryGroup>
                                <RectangleGeometry Rect="0,0,50,50"/>
                                <RectangleGeometry Rect="50,50,50,50"/>
                            </GeometryGroup>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Button.BorderBrush>
    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="BlueViolet" FontWeight="Bold" FontSize="20">Drag & Drop</TextBlock>
</Button>

Also check out this tutorial: https://www.tutorialspoint.com/wpf/wpf_custom_controls.htm

Answer 2

Buttons have been assigned a name by the x:Name attribute for us to be able to find them in code and hook up their click event handlers. This is done by overriding the OnApplyTemplate in our Custom Control class.

Retrieve the Button from the template

public override void OnApplyTemplate() 
{ 
    Button mainButton = GetTemplateChild("MainButton") as Button; 
    if (mainButton != null) 
        mainButton.Click += MainBtnClick; 
}

Follow a complete tutorial like for example (but not necessarily) this: http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/