Continuando con el artículo anterior, vamos a insertar el control que hemos creado y personalizado en el diccionario de recursos, a la aplicación.

Para ello, referenciamos el namespace al marcado, como antes, con el prefijo "local" e insertamos el objeto en el punto de la aplicación que deseemos.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid Background="AliceBlue">
        <local:CustomControl Style="{DynamicResource CustomCtrlv1}" Text="@rfcm83"
                             Clicks="0 clicks" HorizontalAlignment="Center" VerticalAlignment="Center">
            <local:CustomControl.Icon>
                <Image Source="twitter.png"/>
            </local:CustomControl.Icon>
        </local:CustomControl>
    </Grid>
</Window>

Es fundamental explicar que para que el control tenga el diseño que hemos creado, hay que referenciarlo dinámicamente al estilo creado, y después introducir las distintas propiedades que hemos creado. Para el texto he puesto "@rfcm83", para el contador he introducido un texto que dice "0 clicks" y luego una imagen de twitter, que previamente he introducido al proyecto. Las propiedades de alineación vertical y horizontal, es para que el control salga en el centro de la pantalla, pero esto es totalmente opcional.

Aunque he establecido un valor a la propiedad "Clicks", lo lógico es que esta propiedad se actualice con cada click que se realiza en la aplicación, para ello, hay que implementar la interfaz INotifyPropertyChanged de System.ComponentModel, la cual va a gestionar los cambios en la propiedad "Clicks" y relacionar esta propiedad con una que implementemos en el code behind. Además, es necesario crear un evento MouseLeftButtonDown sobre el control, para que se desencadene finalmente la modificación de la propiedad "Clicks".

Implementamos el código fuente, empezando por implementar los miembros de la interfaz INotifyPropertyChanged. Después creamos la propiedad pública "ClicksTxt", la cual va a ser la que que notifique el cambio, y modifique el texto del control. Por último creamos el evento MouseLeftButtonDown de nuestro control, y este se ocupará de modificar la propiedad, incrementando un contador en el código.

using System;
using System.Windows;
using System.Windows.Input;
using System.ComponentModel;

namespace WpfApplication1
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private const string ClickStr = "{0} click(s)";
        private int _nClicks = 0;
        private string _clicksTxt;
        public String ClicksTxt
        {
            get { return _clicksTxt; }
            set
            {
                _clicksTxt = value;
                NotifyChange("ClicksTxt");
            }
        }

        public MainWindow()
        {
            InitializeComponent();
        }

        private void BtnCControlClick(object sender, MouseButtonEventArgs e)
        {
            _nClicks++;
            ClicksTxt = String.Format(ClickStr, _nClicks);
        }
        
        private void NotifyChange(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

A continuación vamos al diseñador, y modificamos el control, agregándole un evento y modificando la propiedad "Clicks" del control, enlazándola a la propiedad que hemos creado en el code behind ("ClicksTxt").

        <local:CustomControl x:Name="BtnCControl" Style="{DynamicResource CustomCtrlv1}" Text="@rfcm83"
                             Clicks="{Binding ClicksTxt, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                             HorizontalAlignment="Center" VerticalAlignment="Center"
                             MouseLeftButtonDown="BtnCControlClick">
            <local:CustomControl.Icon>
                <Image Source="twitter.png"/>
            </local:CustomControl.Icon>
        </local:CustomControl>

Una vez realizados estos cambios, el control debería incrementar el número de clicks que se vayan pulsando sobre el objeto.

Al arrancar, tendríamos el control sin ningún texto, pues la propiedad no estará iniciada, después de hacer clicks tendremos algo como esto.