Table of Contents



Scope

This article has the goal to show how to use the AutoCompleteBox for Universal Apps, from Telerik.

Introduction

Some time ago Telerik published the UI For Windows Universal as a Beta version, which can be download in Telerik WebSite.

telerik

For now is only available the following controls:

In this article we will focus in the AutoCompleteBox. Let's see how we can use it!

Description

Before download and install UI For Windows Universal, we should create a Blank Universal App, then we need to add the reference for this. The following image show how to add it:
add reference

and then
sdk extension

Now we can start use the Telerik controls, but before we can move MainWindow.xaml and App.xaml for the shared project for reuse the code.

Note: In this article we will use MVVMLight, see more about here.

In MainWindow we can define the UI  as following

<Page
    x:Class="MyTelerikSamples.AutoCompleteBoxSample.MainPage"
    xmlns:input="using:Telerik.Universal.UI.Xaml.Controls.Input"
    mc:Ignorable="d"
    DataContext="{Binding Main, Source={StaticResource Locator}}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{StaticResource HeaderWidth}"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="{StaticResource HeaderHeigth}"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Style="{StaticResource HeaderTextBlockStyle}" Grid.ColumnSpan="2">RadAutoCompleteBox Sample</TextBlock>
        <StackPanel Margin="20,10,0,0" Orientation="Vertical"  Grid.Row="1" Grid.Column="1">
            <TextBlock  FontSize="20">Insert some text:</TextBlock>
            <input:RadAutoCompleteBox Margin="0,20,0,0"
                     FilterMode="Contains" IsTextMatchHighlightEnabled="True"
                     Text="{Binding Value, Mode=TwoWay}"
                     FilterComparisonMode="CurrentCultureIgnoreCase"
                     ItemsSource="{Binding Suggestions}" AutosuggestFirstItem="False"
                     Width="200" HorizontalAlignment="Left">
                <input:RadAutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"
                               input:RadAutoCompleteBox.IsTextMatchHighlightEnabled="True">
                          <input:RadAutoCompleteBox.TextMatchHighlightStyle>
                              <input:HighlightStyle Foreground="DeepPink" FontSize="21"/>
                          </input:RadAutoCompleteBox.TextMatchHighlightStyle>
                        </TextBlock>
                    </DataTemplate>
                </input:RadAutoCompleteBox.ItemTemplate>
            </input:RadAutoCompleteBox>
        </StackPanel>
    </Grid>
</Page>

In AutoCompleteBox we defined a binding for the Text, which define the text string we will write in the control and we defined the ItemsSource which are the suggestion we will provide to the control, with this each time we start to write a word the control will try to find available words that match with the user input.

The DataTemplate was defined for allow to highlight the matched chars when we insert the text, in this case will be highlight by Pink color.

The MainViewModel can be defined as following

public class MainViewModel : ViewModelBase
   {
       private string _value;
 
       /// <summary>
       /// Gets or sets the value.
       /// </summary>
       /// <value>
       /// The value.
       /// </value>
       public string Value
       {
           get { return _value; }
           set { Set(() => Value, ref _value, value); }
       }
 
       /// <summary>
       /// Gets the suggestions.
       /// </summary>
       /// <value>The suggestions.</value>
       public IEnumerable<string> Suggestions
       {
           get
           {
               return new List<string>
               {
                    "Apple",
                    "Babaco",
                    "Bacupari",
                    "Bacuri",
                    "Black cherry",
                    "Pineapples",
                    "Orange",
                    "Tomato",
               };
           }
       }
   }


After it we can run the app for test if the behavior do what we want, but before we should change the style for the selected item, because it will show the default colors and for the highlight was choose Pink. For it, create a dictionary for add the resource we want to override

<SolidColorBrush x:Key="TelerikAutoCompleteBoxSelectorSelectedItemBackgroundBrush" Color="DeepPink"/>
 <SolidColorBrush x:Key="TelerikAutoCompleteBoxFocusedForegroundBrush" Color="White"/>


then in App.xaml add the resources and the themes, as following

<Application
    x:Class="MyTelerikSamples.AutoCompleteBoxSample.App"
    xmlns:viewModel="using:MyTelerikSamples.AutoCompleteBoxSample.ViewModel"
    xmlns:controls="using:Telerik.Universal.UI.Xaml.Controls">
    <Application.Resources>
        <ResourceDictionary>
            <viewModel:ViewModelLocator x:Key="Locator"/>
            <controls:UserThemeResources x:Key="ThemeResource"
                                         DarkResourcesPath="ms-appx:///Styles/TelerikResources.xaml"
                                         LightResourcesPath="ms-appx:///Styles/TelerikResources.xaml"/>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <ResourceDictionary.MergedDictionaries>
                        <!-- your namespace is "Telerik.Universal.UI.Xaml.Input" -->
                        <ResourceDictionary Source="ms-appx:///Telerik.Universal.UI.Xaml.Input/Themes/ThemeResourcesDark.xaml"/>
                        <ResourceDictionary Source="{CustomResource DarkResourcesPath}"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="ms-appx:///Telerik.Universal.UI.Xaml.Input/Themes/ThemeResourcesLight.xaml"/>
                        <ResourceDictionary Source="{CustomResource LightResourcesPath}"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Style/Definition.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Running the app

When we run the app, we will get

sample

sample

sample

Source Code

The source code is available in github.

See Also

Telerik UI for Windows 8 XAML Documentation - Telerik Named Brushes

Telerik UI for Windows 8 XAML Documentation - Resolving Telerik named resources



shopify analytics tool