How to Trigger Click Event in WPF User control (Textbox with Button)?

Question

I have Created one User control for WPF Like Windows 8 Password box Model.

My UserControl XAML Code -

 <Grid.Resources>
        <Style x:Key="ButtonWithoutHover" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                        BorderThickness="0"                                                        
                        Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Border BorderBrush="Black" BorderThickness="2" >
            <DockPanel Canvas.Right="2" Canvas.Top="2">
                <Button Style="{StaticResource ButtonWithoutHover}" Height="25" Width="20" BorderThickness="3" BorderBrush="White" DockPanel.Dock="Right" Background="CadetBlue" >
                    <Button.Content>
                        <Label Content="->" Foreground="White" />
                    </Button.Content>
                </Button>
                <TextBox Height="30" Width="180" FontSize="18" BorderThickness="0" Name="txtNumber" DockPanel.Dock="Left" >
                </TextBox>
            </DockPanel>
        </Border>

enter image description here

Edit 1:

I have include this Usercontrol in My project. But at the time of Implementing UserControl in Wpf Application There is No Click Event for my UserControl. So I add Click="UserControl1_Click" to Xaml. But It through an Error

The property 'Click' does not exist in XML namespace 'clr-namespace:NumericTextbox;assembly=NumericTextbox'.

My Application Xaml Code-

<Window x:Class="NumericAppication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:NumText="clr-namespace:NumericTextbox;assembly=NumericTextbox"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <NumText:UserControl1 Width="120" Height="30" Click="UserControl1_Click" />
    </Grid>
</Window>

downvoted, as the answer picked has nothing to do with the question. (I would have better looked at some other question instead, with a matching answer) — SwissCoder, Jul 05 '17 at 09:23

David Pilkington · Answer 1 · 2013-10-31T12:49:29.177

3

You could have a Dependency Property on the UserControl that you bind to the Click event of the button.

EDIT:

In your UserControl you can have

    public EventHandler MyProperty
    {
        get { return (EventHandler)GetValue(MyPropertyProperty); }
        set { SetValue(MyPropertyProperty, value); }
    }
    public static readonly DependencyProperty MyPropertyProperty = DependencyProperty.Register("MyProperty", typeof(EventHandler), typeof(ownerclass));

then in the XAML you have:

 <button Click="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=MyProperty}" />

Although, I think that it is best practice to use ICommand instead of the event handler but the principle is the same.

edited Oct 31 '13 at 12:49

answered Oct 31 '13 at 12:25

David Pilkington

13,528
3
41
73

Can You Explain Little bit More... Pls – Sagotharan Oct 31 '13 at 12:41
1

Sure: if you have a Dependency Property on the UserControl, it is exposed externally because it is public. Then, in the XAML, you bind the button Click event to that DP. I will update my answer with an example – David Pilkington Oct 31 '13 at 12:43
Thanks BSoD_ZA. I am waiting for Your Example. – Sagotharan Oct 31 '13 at 12:47
Dear I got an error.. Click="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=MyProperty}" is not valid. '{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=MyProperty}' is not a valid event handler method name. Only instance methods on the generated or code-behind class are valid. – Sagotharan Nov 01 '13 at 05:22

score 1 · Answer 2 · answered Oct 31 '13 at 12:32

1

may be this will help you

  <Button Style="{StaticResource ButtonWithoutHover}" Height="25"
   Width="20" BorderThickness="3" BorderBrush="White"
   DockPanel.Dock="Right" Background="CadetBlue" Click="Button_Click">
                               <Button.Content>
                                   <Label Content="->" Foreground="White" />
                               </Button.Content>

</Button>

answered Oct 31 '13 at 12:32

Debashrita

940
1
8
20

Dear Are You sure This is Right way?. Bzs I got Error... The property 'Click' was not found in type 'UserControl1'. – Sagotharan Oct 31 '13 at 12:37
Hi if you want to add the click event for the Button which is present on the userControl .Here lets say i have added a Usercontol1 to my project then in the UserControl1.cs[Design]* added one Button then you can right click on the Button then in the properties of the Button you can set the click event. – Debashrita Oct 31 '13 at 12:50
I know how to add click event in Button. But When I Tried in Application the UserControl1 has not the Event. Please make sure your solution related to WPF User Control. – Sagotharan Nov 01 '13 at 05:27
yes my solution is related to WPF UserControl.You want to add the click event for the Button which is present in the UserControl or want to add the click event for the UserControl – Debashrita Nov 01 '13 at 05:33
Dear Please See my Updated Question. Sorry For Confusing Question, Now I explain it in briefly. – Sagotharan Nov 01 '13 at 06:18

score 1 · Answer 3 · answered Oct 31 '13 at 12:53

You can create a command an make a command binding like this:

Create RoutedUiCommand command:

Class Command
{
     Static RoutedUICommand ButtonClick = New RoutedUICommand("Buttonclick", "ButtonClick", TypeOf(Window))
}

Then in xaml

<Window.CommandBindings>
    <CommandBinding Command="local:Command.ButtonClick" Executed="CommandBinding_ButtonClick" />
</Window.CommandBindings>

inside the method CommandBinding_ButtonClick you make the logic.

and finally add the command to the button:

<Button Style="{StaticResource ButtonWithoutHover}" Height="25" Width="20" BorderThickness="3"    BorderBrush="White" DockPanel.Dock="Right" Background="CadetBlue" Command=local:Command.ButtonClick>
                <Button.Content>
                    <Label Content="->" Foreground="White" />
                </Button.Content>
            </Button>

score 0 · Answer 4 · edited May 12 '15 at 10:40

0

When you design your user control have you tried this on your button? (remember to choose that edit template thing)

https://i-msdn.sec.s-msft.com/dynimg/IC616903.png

p.s. when I design user controls I always prefer to use blend.

edited May 12 '15 at 10:40

Robert

5,278
43
65
115

answered May 12 '15 at 10:21

Dark Templar

1,130
8
10

score -3 · Accepted Answer · answered Oct 31 '13 at 12:58

As we have created the UserControl1.then after adding the Click event the UserControl1.Desginer.cs file will look like this.

  private void InitializeComponent()
        {
            this.button1 = new System.Windows.Forms.Button();
            this.SuspendLayout();
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(180, 38);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(75, 23);
            this.button1.TabIndex = 0;
            this.button1.Text = "button1";
            this.button1.UseVisualStyleBackColor = true;
            this.button1.Click += new System.EventHandler(this.button1_Click);
            // 
            // UserControl1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.Controls.Add(this.button1);
            this.Name = "UserControl1";
            this.Size = new System.Drawing.Size(286, 95);
            this.ResumeLayout(false);

        }

and in the UserControl1.cs file will have the body of the Button click event

private void button1_Click(object sender, EventArgs e)
        {

        }

this may help you.Plz let me know

How is it possible that the accepted answer is for Winforms when the question is for WPF? — Bartosz, Jul 08 '15 at 21:01

How to Trigger Click Event in WPF User control (Textbox with Button)?

5 Answers5

Linked