[WP] TextBox Personalizado

C#

Empezamos creamos una clase que extienda de Control con la siguiente definición:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace CustomTextBox.Controls
{
    public class PhoneTextBox : Control
    {
        #region Members

        private TextBlock _hintTextBlock;
        private TextBox _controlTextBox;

        #endregion Members

        #region DependencyProperties

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }

        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(PhoneTextBox), new PropertyMetadata(null));

        public string Hint
        {
            get { return (string)GetValue(HintProperty); }
            set { SetValue(HintProperty, value); }
        }

        public static readonly DependencyProperty HintProperty =
            DependencyProperty.Register("Hint", typeof(string), typeof(PhoneTextBox), new PropertyMetadata(null));

        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(string), typeof(PhoneTextBox), new PropertyMetadata(string.Empty));

        #endregion DependencyProperties

        public PhoneTextBox()
        {
            DefaultStyleKey = typeof(PhoneTextBox);
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this._hintTextBlock = (TextBlock)GetTemplateChild("HintTextBlock");
            this._controlTextBox = (TextBox)GetTemplateChild("ControlTextBox");
        }

        protected override void OnKeyUp(System.Windows.Input.KeyEventArgs e)
        {
            base.OnKeyUp(e);
            this._hintTextBlock.Visibility = string.IsNullOrWhiteSpace(this._controlTextBox.Text) ? Visibility.Visible : Visibility.Collapsed;
        }
    }
}

Y un Converter:

using System;
using System.Windows;
using System.Windows.Data;

namespace CustomTextBox.Converters
{
    public class ObjectToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null != value ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

XAML

Y continuamos definiendo la plantilla del control que acabamos de crear mediante un estilo implícito de la siguiente manera:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:CustomTextBox.Controls"
    xmlns:converters="clr-namespace:CustomTextBox.Converters">

    <converters:ObjectToVisibilityConverter x:Key="ObjectToVisibilityConverter"/>

    <Style TargetType="controls:PhoneTextBox">
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:PhoneTextBox">
                    <Border Background="{TemplateBinding Background}" CornerRadius="5" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Image Margin="6" Source="{TemplateBinding ImageSource}" Width="32" Height="32" VerticalAlignment="Center" Visibility="{Binding ImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ObjectToVisibilityConverter}}"/>
                            <TextBlock Margin="6" x:Name="HintTextBlock" Grid.Column="1" Text="{TemplateBinding Hint}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Opacity="0.54" />
                            <TextBox Margin="6" x:Name="ControlTextBox" Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" >
                                <TextBox.Template>
                                    <ControlTemplate TargetType="TextBox">
                                        <ContentControl x:Name="ContentElement" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                                    </ControlTemplate> 
                                </TextBox.Template>
                            </TextBox>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Uso

Agregar el namespace de PhoneTextBox a la página o al control correspondiente:

<phone:PhoneApplicationPage
    x:Class="CustomTextBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    xmlns:controls="clr-namespace:CustomTextBox.Controls">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="WWW.REACHSOS.COM" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="xaml development" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <controls:PhoneTextBox Hint="efectivamente es el joven" Background="White" Foreground="Blue" ImageSource="/Assets/icon.png"/>
            <controls:PhoneTextBox Grid.Row="1" Hint="y dile que ahorita no" Background="Brown" Foreground="White" ImageSource="/Assets/icon.png"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

CodePlex

Código fuente disponible en: Windows Phone -> CustomTextBox