Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink
	TABLE OF CONTENTS Introducing AutoCompleteBox Alternatives?

One of the great features Silverlight offers is the ability to customize controls by using control templates. If you don't like how a particular control looks you can modify the template and in many cases be ready to use the new control without writing a single line of C# or VB code. I'm working on a client application that uses the AutoCompleteBox found in the Silverlight Toolkit and needed a way to change it from a regular TextBox to more of an editable ComboBox. Fortunately the Silverlight Toolkit samples (for Silverlight 2 and 3) already do something like this as you can see in Figure 1. (Once on the page click on AutoCompleteBox to the left and then on the Styling tab at the top of the page to see the sample).

Figure 1

The sample modifies the standard to look more like an editable ComboBox by defining a custom control template with a ToggleButton in it (Tim Heuer provides a nice walk through of this type of customization here if you're interested). Listing One is a simplified version of the Silverlight Toolkit's sample template that I'm using:

<ControlTemplate TargetType="input:AutoCompleteBox">
    <Grid Margin="{TemplateBinding Padding}">
        <TextBox IsTabStop="True" x:Name="Text" 
          Style="{TemplateBinding TextBoxStyle}" Margin="0" />
        <ToggleButton x:Name="ToggleButton"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            Style="{StaticResource ComboToggleButton}"
            Margin="0"
            HorizontalContentAlignment="Center" 
            Background="{TemplateBinding Background}" 
            BorderThickness="0" 
            Height="16" Width="16"
            Click="DropDownToggle_Click">
            <ToggleButton.Content>
                <Path x:Name="BtnArrow" Height="4" Width="8" Stretch="Uniform" 
                  Data="F1 M 301.14,-189.041L 311.57,-189.041L 
                  306.355,-182.942L 301.14,-189.041 Z " 
                      Margin="0,0,6,0" HorizontalAlignment="Right">
                    <Path.Fill>
                        <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/>
                    </Path.Fill>
                </Path>
            </ToggleButton.Content>
        </ToggleButton>
        <Popup x:Name="Popup">
            <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="1.0" 
              BorderThickness="0">
                <Border.RenderTransform>
                    <TranslateTransform X="2" Y="2" />
                </Border.RenderTransform>
                <Border.Background>
                    <SolidColorBrush Color="#11000000" />
                </Border.Background>
                        <ListBox x:Name="Selector" 
                             ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                             ScrollViewer.VerticalScrollBarVisibility="Auto" 
                             ItemTemplate="{TemplateBinding ItemTemplate}" />
             </Border>
        </Popup>
    </Grid>
</ControlTemplate>

Looking at the template you'll see that it defines a ToggleButton with a Click event and associated event handler named < b>DropDownToggle_Click. Listing Two is what the ToggleButton's Click event handler looks like:

private void DropDownToggle_Click(object sender, RoutedEventArgs e)
{
    FrameworkElement fe = sender as FrameworkElement;
    AutoCompleteBox acb = null;
    while (fe != null && acb == null)
    {
        fe = VisualTreeHelper.GetParent(fe) as FrameworkElement;
        acb = fe as AutoCompleteBox;
    }
    if (acb != null)
    {
        if (String.IsNullOrEmpty(acb.SearchText))
        {
            acb.Text = String.Empty;
        }
        acb.IsDropDownOpen = !acb.IsDropDownOpen;
    }
}

You can see that the code uses the VisualTreeHelper class to access the parent of the ToggleButton which is the AutoCompleteBox. Once the AutoCompleteBox parent is found the code handles showing or hiding the Popup control that's part of the control template by setting the IsDropDownOpen property to True or False.

1 Introducing AutoCompleteBox | 2 Alternatives? Next Page

RELATED ARTICLES Petascale Tools and Genomic Evolution Legal Compliance: Open Source and Quality Assurance SEI, Army Team Up on Software Testing Nozzle: Counteracting Memory Exploits Experts Consider Robots, Legal Issues		TOP 5 ARTICLES No Top Articles.