Click here to Skip to main content
15,885,767 members
Articles / Desktop Programming / WPF

How to extend a WPF Textbox to Custom Picker

Rate me:
Please Sign up or sign in to vote.
4.86/5 (21 votes)
24 Nov 2012CPOL7 min read 86.8K   4.4K   37  
This article is to show how to extend a standard WPF Textbox to behave as a Picker via Template Style.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
                    xmlns:Converter="clr-namespace:CustomPicker.Utility">

    <Converter:DoubleStringConverter x:Key="doubleStringConverter" />
    
    <ControlTemplate x:Key="IconButton" TargetType="{x:Type ToggleButton}">
        <Border>
            <ContentPresenter />
        </Border>
    </ControlTemplate>

    <Style x:Key="tbCalculatorStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border BorderThickness="1" BorderBrush="DarkGray">
                            <ScrollViewer x:Name="PART_ContentHost" />
                        </Border>
                        <ToggleButton Template="{StaticResource IconButton}"
                              MaxHeight="21" 
                              Margin="-1,0,0,0" 
                              Name="PopUpImageButton" 
                              Focusable="False"
                              IsChecked="False">
                            <Image Source="Images\Calculator_Icon.png" Stretch="Uniform" Visibility="Hidden" HorizontalAlignment="Right" Name="imgPicker" >
                            </Image>
                        </ToggleButton>
                        <Popup IsOpen="{Binding Path=IsChecked, ElementName=PopUpImageButton, Mode=TwoWay}" x:Name="CustomPopup" Margin="0,-1,0,0" PopupAnimation="Fade" StaysOpen="False">
                            <extToolkit:Calculator Margin="0,0,0,0" x:Name="CalDisplay" 
                                      DisplayText="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Text, Mode=TwoWay, Converter={StaticResource doubleStringConverter}}" 
                                      Focusable="False"                                       
                                      Precision="2">
                                <Control.Triggers>
                                    <EventTrigger RoutedEvent="extToolkit:Calculator.LostFocus">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PopUpImageButton" Storyboard.TargetProperty="IsChecked">
                                                    <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"></DiscreteBooleanKeyFrame>
                                                </BooleanAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="extToolkit:Calculator.MouseLeave">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PopUpImageButton" Storyboard.TargetProperty="IsChecked">
                                                    <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"></DiscreteBooleanKeyFrame>
                                                </BooleanAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Control.Triggers>
                            </extToolkit:Calculator>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Visibility" TargetName="imgPicker" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="Visibility" TargetName="imgPicker" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Intuit India
India India


A software professional for more than 17+ years building solutions for Web and Desktop applications.

Currently working at Intuit India.

Website: Learn By Insight
Github: Sandeep Mewara
LinkedIn: Sandeep Mewara

Strongly believe in learning and sharing knowledge.



Comments and Discussions