Windows 10 UWP

ComboBox with Editable Textbox

Looking for a ComboBox that has an editable textbox – allowing you to either pick a pre-selected item or enter something else? Here’s a simple implementation.

Background

Turns out that, as of WinRT (Windows 8) and onwards, ComboBoxes have a (read-only) textblock field. This is a pain if you wanted to handle the scenario where users could either select a pre-existing item or type in something different.

I have seen a few implementations floating around where, in the ComboBoxItems, the first item was always an editabled TextBox. If you entered text it would then add to the list. But this still wasn’t the behaviour I was after.

ComboBoxTextBoxControl

I created a user control that gives me behaviour I’m after, as seen below.

Combo textbox sample

In a nutshell, what I did was:

  • Create a UserControl I called ComboBoxTextBoxControl
  • Added a ComboBox and TextBox
  • Modified the TextBox template to remove the delete button (the X that shows up in the right when you have text)
  • Modified the ComboBox template so that there is no border, background and the minimum width is 32
  • In code-behind, if you selected an item it would put the content into the textbox
  • Added properties to accept a binding (i.e. a list of pets) and to get what was selected (so we can bind this in the form)

The Code

Here you go. It’s long but only because of the custom templates. Once you get past that, you’ll see that the rest of my code is quite simple.

Firstly, here is the code behind

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace MyCode.Controls
{
    /// <summary>
    ///     UserControl where a ComboBox also has an editable TextBox
    /// </summary>

    public sealed partial class ComboBoxWithTextBox : UserControl
    {
        public ComboBoxWithTextBox()
        {
            InitializeComponent();
        }

        public object ComboBoxTextItems
        {
            set { comboBox.SetBinding(ItemsControl.ItemsSourceProperty, value as Binding); }
        }

        public object SelectedComboBoxTextItem
        {
            set { textBox.SetBinding(TextBox.TextProperty, value as Binding);}
        }

        private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            textBox.Text = comboBox.SelectedItem as string;
        }
    }
}

Here’s the XAML

<UserControl     x:Class="MyCode.Controls.ComboBoxWithTextBox"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:local="using:MyCode.Controls"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     mc:Ignorable="d"     d:DesignHeight="50"     d:DesignWidth="300">

    <UserControl.Resources>
        <!-- In this combobox style I stripped the borders and reduced the minimum width to just 32 -->
<Style x:Key="UCComboBoxStyle" TargetType="ComboBox">
            <Setter Property="Padding" Value="12,5,0,7" />
            <!--<Setter Property="MinWidth" Value="{ThemeResource ComboBoxThemeMinWidth}" />-->
            <Setter Property="MinWidth" Value="32" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}" />
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThemeThickness}" />
            <Setter Property="TabNavigation" Value="Once" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <CarouselPanel />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>-->
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>-->
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>-->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="HeaderContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="PlaceholderTextBlock">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="DropDownGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="HighlightBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"                                                              Storyboard.TargetName="HighlightBackground" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="PlaceholderTextBlock">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="DropDownGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="FocusedPressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"                                                              Storyboard.TargetName="HighlightBackground" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="PlaceholderTextBlock">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="DropDownGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                    <VisualState x:Name="FocusedDropDown">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"                                                                            Storyboard.TargetProperty="Visibility"                                                                            Storyboard.TargetName="PopupBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DropDownStates">
                                    <VisualState x:Name="Opened">
                                        <Storyboard>
                                            <SplitOpenThemeAnimation ClosedTargetName="ContentPresenter"                                                                      OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"                                                                      OpenedTargetName="PopupBorder"                                                                      OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Closed">
                                        <Storyboard>
                                            <SplitCloseThemeAnimation ClosedTargetName="ContentPresenter"                                                                       OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"                                                                       OpenedTargetName="PopupBorder"                                                                       OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="HeaderContentPresenter"                                               ContentTemplate="{TemplateBinding HeaderTemplate}"                                               Content="{TemplateBinding Header}"                                               FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"                                               FlowDirection="{TemplateBinding FlowDirection}"                                               Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility="Collapsed"                                               x:DeferLoadStrategy="Lazy" />
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}"                                     BorderThickness="{TemplateBinding BorderThickness}"                                     Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" />
                            <Border x:Name="HighlightBackground"                                     BorderBrush="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"                                     BorderThickness="{TemplateBinding BorderThickness}"                                     Background="{ThemeResource SystemControlHighlightListAccentLowBrush}"                                     Grid.ColumnSpan="2" Opacity="0" Grid.Row="1" />
                            <ContentPresenter x:Name="ContentPresenter"                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                               Margin="{TemplateBinding Padding}" Grid.Row="1"                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <TextBlock x:Name="PlaceholderTextBlock"                                            Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"                                            Text="{TemplateBinding PlaceholderText}" />
                            </ContentPresenter>
                            <FontIcon x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw"                                       Grid.Column="1"                                       Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"                                       FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph=""                                       HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,10,10,10"                                       Grid.Row="1" VerticalAlignment="Center" />
                            <Popup x:Name="Popup">
                                <Border x:Name="PopupBorder"                                         BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"                                         BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"                                         Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"                                         HorizontalAlignment="Stretch" Margin="0,-1,0,-1">
                                    <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw"                                                   BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"                                                   Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"                                                   HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"                                                   HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"                                                   IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"                                                   IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"                                                   IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"                                                   MinWidth="{Binding TemplateSettings.DropDownContentMinWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}"                                                   VerticalSnapPointsType="OptionalSingle"                                                   VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"                                                   VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"                                                   VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                                        <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Removed the delete button from the textbox -->
<Style x:Key="UCTextBoxStyle" TargetType="TextBox">
            <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
            <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid>
                            <Grid.Resources>
<Style x:Name="DeleteButtonStyle" TargetType="Button">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Grid x:Name="ButtonLayoutGrid"                                                       BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"                                                       BorderThickness="{TemplateBinding BorderThickness}"                                                       Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal" />
                                                            <VisualState x:Name="PointerOver">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames                                                                         Storyboard.TargetProperty="Foreground"                                                                         Storyboard.TargetName="GlyphElement">
                                                                        <DiscreteObjectKeyFrame KeyTime="0"                                                                                                 Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Pressed">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames                                                                         Storyboard.TargetProperty="Background"                                                                         Storyboard.TargetName="ButtonLayoutGrid">
                                                                        <DiscreteObjectKeyFrame KeyTime="0"                                                                                                 Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames                                                                         Storyboard.TargetProperty="Foreground"                                                                         Storyboard.TargetName="GlyphElement">
                                                                        <DiscreteObjectKeyFrame KeyTime="0"                                                                                                 Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Disabled">
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0" To="0"                                                                                      Storyboard.TargetProperty="Opacity"                                                                                      Storyboard.TargetName="ButtonLayoutGrid" />
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <TextBlock x:Name="GlyphElement"                                                                AutomationProperties.AccessibilityView="Raw"                                                                Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"                                                                FontStyle="Normal" FontSize="12"                                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"                                                                HorizontalAlignment="Center" Text=""                                                                VerticalAlignment="Center" />
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>

                            </Grid.Resources>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="HeaderContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="BorderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="BorderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="PlaceholderTextContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="BorderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"                                                                            Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="PlaceholderTextContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlPageTextChromeBlackMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"                                                                            Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"                                                                            Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource TextControlBackgroundFocusedOpacity}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"                                                                            Storyboard.TargetName="BorderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"                                                                            Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0"                                                                         Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme"                                                                            Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ButtonStates">
                                    <VisualState x:Name="ButtonVisible">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"                                                                            Storyboard.TargetName="DeleteButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>-->
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ButtonCollapsed" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="BackgroundElement" Background="{TemplateBinding Background}"                                     Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}"                                     Opacity="{ThemeResource TextControlBackgroundRestOpacity}" Grid.Row="1"                                     Grid.RowSpan="1" />
                            <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}"                                     BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"                                     Grid.Row="1" Grid.RowSpan="1" />
                            <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2"                                               ContentTemplate="{TemplateBinding HeaderTemplate}"                                               Content="{TemplateBinding Header}"                                               Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"                                               FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed"                                               x:DeferLoadStrategy="Lazy" />
                            <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw"                                           HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"                                           HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"                                           IsTabStop="False"                                           IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"                                           IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"                                           IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"                                           Margin="{TemplateBinding BorderThickness}"                                           Padding="{TemplateBinding Padding}" Grid.Row="1"                                           VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"                                           VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"                                           ZoomMode="Disabled" />
                            <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2"                                             Content="{TemplateBinding PlaceholderText}"                                             Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"                                             IsHitTestVisible="False" IsTabStop="False"                                             Margin="{TemplateBinding BorderThickness}"                                             Padding="{TemplateBinding Padding}" Grid.Row="1" />
                            <Button x:Name="DeleteButton" BorderThickness="{TemplateBinding BorderThickness}"                                     Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False"                                     Margin="{ThemeResource HelperButtonThemePadding}"                                     MinWidth="34" Grid.Row="1"                                     Style="{StaticResource DeleteButtonStyle}" Visibility="Collapsed"                                     VerticalAlignment="Stretch" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBox x:Name="textBox"                  
		Grid.Column="0"                  
		VerticalAlignment="Top"                  
		Canvas.ZIndex="-1"                  
		TabIndex="0"                  
		Style="{StaticResource UCTextBoxStyle}"  />

        <ComboBox x:Name="comboBox"                  
		Grid.Column="0"                   
		BorderThickness="0"                   
		Background="Transparent"                   
		Width="32"                    
		TabIndex="1"                   
		HorizontalAlignment="Right"                   
		Style="{StaticResource UCComboBoxStyle}"                    
		SelectionChanged="comboBox_SelectionChanged" />

    </Grid>
</UserControl>

And finally here is the code showing how you could use it in your XAML page

<Grid>
    <controls:ComboBoxWithTextBox ComboBoxTextItems="{Binding PetTypes}" SelectedComboBoxTextItem="{Binding SelectedPet, Mode=TwoWay}"  Width="150" HorizontalAlignment="Left" />

</Grid>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s