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>

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>

Answer 1

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.

Answer 2

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>

Answer 3

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>

Answer 4

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

ps when I design user controls I always prefer to use blend.

Answer 5

You could always add a Command binding to your button. That way you can link your button to a method and control when the button can be used, too.

Rachel provides a great explanation on this matter here .

Answer 6

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