IE 11 address bar functionality

[Christie Admin]

Hi,

I'm looking for a control who can react like the address bar in IE 11. I mean having an autocomplettion and a kind of dropdown which can have grouping functionalities, expand or not  the existing groups, highlighting portion of text, etc...

I don't know if I can do it with this control or any other existing controls in Telerik...

Thank's
Alain

[Kalin]

Hello Alain,

I can suggest you to check our AutoCompleteBox control. You can find more information about its key features in our online help documentation and especially you can check the following articles: Key Properties, AutoComplete and Filtering Behavior. What I can also suggest you is that you check the online WPF AutoCompleteBox demos here.

Hope this helps. If you have any further questions let us know.

Regards,
Kalin
Telerik

[Christie Admin]

Hi Kalin,

the Telerik Demo doesn't work on my computer so do you have a sample project representing what I want to do?

Thank's
Alain

[Rosen Vladimirov]

Hi Alain,

May I ask what is the problem with our demos? We are not aware of any issues with their installation.

Anyway in case you need runnable projects, I suggest you to take a look at our SDK Repository. There you will find examples of the base functionality of RadAutoCompleteBox and also some custom scenarios (for example NoMatchingFilteringBehavior).

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

[Christie Admin]

Hi Rosen,

I'm launching the demo and when I select a control (ie: AutoCompleteBox), the downloading examples appeared but nothing occured.... Sometime it work and sometime not...

Thank's
Alain

[Rosen Vladimirov]

Hi Alain,

You can try installing the latest version of our controls, as I've noticed you are using an older one. As I said you can find runnable examples in our SDK Repository.

Feel free to contact us in case you still have any problems or concerns.

Regards,
Rosen Vladimirov
Telerik

[Christie Admin]

Great it work, thank's :)

[Christie Admin]

Hi,

can I have a small demo representing the resquested feature (Internet Explorer 11 address bar dropdown functionality)? When the dropdown appear, we can see different section with a different look, also, when we type in the address bar, all the text we entered in the address bar appear in different color in the dropdown as a matching value...

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

I've created a sample project that demonstrates how you can add button that opens RadAutoCompleteBox's drop down and when you enter some text, the matching letters are bold in the dropdown items. You can find it attached (RadAutoCompleteBox_WPF_767672) and extend it based on your needs.

As per the grouping part - it's a little bit tricky, so we've prepared another project that demonstrates how you can achieve a similar approach. Please note that the Grouping is not a real "grouping" as RadAutoCompleteBox doesn't have groups. The project is simulating grouping of items.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

[Christie Admin]

Hi Rosen,

I can't find any of the two projects attached with the email..

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

There was some issue with the attachments, but now everything should be fine - you can find them attached to my previous post.

Feel free to contact us in case you have any other problems or concerns.

Regards,
Rosen Vladimirov
Telerik

[Christie Admin]

Hi Rosen,

can you try you grouping project with the Office2013 theme??? When I start typing in the AutoComplete control I receiv an exception:

System.Windows.Markup.XamlParseException occurred
  HResult=-2146233087
  Message=La valeur fournie sur 'System.Windows.Markup.StaticResourceHolder' a levé une exception.
  Source=PresentationFramework
  LineNumber=0
  LinePosition=0
  StackTrace:
       à System.Windows.FrameworkTemplate.LoadTemplateXaml(XamlReader templateReader, XamlObjectWriter currentWriter)
       à System.Windows.FrameworkTemplate.LoadTemplateXaml(XamlObjectWriter objectWriter)
       à System.Windows.FrameworkTemplate.LoadOptimizedTemplateContent(DependencyObject container, IComponentConnector componentConnector, IStyleConnector styleConnector, List`1 affectedChildren, UncommonField`1 templatedNonFeChildrenField)
       à System.Windows.FrameworkTemplate.LoadContent(DependencyObject container, List`1 affectedChildren)
       à System.Windows.StyleHelper.ApplyTemplateContent(UncommonField`1 dataField, DependencyObject container, FrameworkElementFactory templateRoot, Int32 lastChildIndex, HybridDictionary childIndexFromChildID, FrameworkTemplate frameworkTemplate)
       à System.Windows.FrameworkTemplate.ApplyTemplateContent(UncommonField`1 templateDataField, FrameworkElement container)
       à System.Windows.FrameworkElement.ApplyTemplate()
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.VirtualizingStackPanel.MeasureChild(IItemContainerGenerator& generator, IContainItemStorage& itemStorageProvider, IContainItemStorage& parentItemStorageProvider, Object& parentItem, Boolean& hasUniformOrAverageContainerSizeBeenSet, Double& computedUniformOrAverageContainerSize, Boolean& computedAreContainersUniformlySized, IList& items, Object& item, IList& children, Int32& childIndex, Boolean& visualOrderChanged, Boolean& isHorizontal, Size& childConstraint, Rect& viewport, VirtualizationCacheLength& cacheSize, VirtualizationCacheLengthUnit& cacheUnit, Boolean& foundFirstItemInViewport, Double& firstItemInViewportOffset, Size& stackPixelSize, Size& stackPixelSizeInViewport, Size& stackPixelSizeInCacheBeforeViewport, Size& stackPixelSizeInCacheAfterViewport, Size& stackLogicalSize, Size& stackLogicalSizeInViewport, Size& stackLogicalSizeInCacheBeforeViewport, Size& stackLogicalSizeInCacheAfterViewport, Boolean& mustDisableVirtualization, Boolean isBeforeFirstItem, Boolean isAfterFirstItem, Boolean isAfterLastItem, Boolean skipActualMeasure, Boolean skipGeneration, Boolean& hasBringIntoViewContainerBeenMeasured, Boolean& hasVirtualizingChildren)
       à System.Windows.Controls.VirtualizingStackPanel.MeasureOverrideImpl(Size constraint, Nullable`1& lastPageSafeOffset, List`1& previouslyMeasuredOffsets, Boolean remeasure)
       à System.Windows.Controls.VirtualizingStackPanel.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
       à System.Windows.Controls.ItemsPresenter.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
       à System.Windows.Controls.ScrollContentPresenter.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Grid.MeasureCell(Int32 cell, Boolean forceInfinityV)
       à System.Windows.Controls.Grid.MeasureCellsGroup(Int32 cellsHead, Size referenceSize, Boolean ignoreDesiredSizeU, Boolean forceInfinityV, Boolean& hasDesiredSizeUChanged)
       à System.Windows.Controls.Grid.MeasureCellsGroup(Int32 cellsHead, Size referenceSize, Boolean ignoreDesiredSizeU, Boolean forceInfinityV)
       à System.Windows.Controls.Grid.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Border.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.ScrollViewer.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Border.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Grid.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Control.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Grid.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Documents.AdornerDecorator.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Decorator.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Controls.Primitives.PopupRoot.MeasureOverride(Size constraint)
       à System.Windows.FrameworkElement.MeasureCore(Size availableSize)
       à System.Windows.UIElement.Measure(Size availableSize)
       à System.Windows.Interop.HwndSource.SetLayoutSize()
       à System.Windows.Interop.HwndSource.set_RootVisualInternal(Visual value)
       à System.Windows.Controls.Primitives.Popup.CreateWindow(Boolean asyncCall)
       à System.Windows.Controls.Primitives.Popup.OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
       à System.Windows.DependencyObject.OnPropertyChanged(DependencyPropertyChangedEventArgs e)
       à System.Windows.FrameworkElement.OnPropertyChanged(DependencyPropertyChangedEventArgs e)
       à System.Windows.DependencyObject.NotifyPropertyChange(DependencyPropertyChangedEventArgs args)
       à System.Windows.DependencyObject.UpdateEffectiveValue(EntryIndex entryIndex, DependencyProperty dp, PropertyMetadata metadata, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType)
       à System.Windows.DependencyObject.SetValueCommon(DependencyProperty dp, Object value, PropertyMetadata metadata, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType, Boolean isInternal)
       à System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
       à Telerik.Windows.Controls.AutoClosePopupWrapper.set_IsOpen(Boolean value) dans c:\TB\105\WPF_Scrum\Release_WPF\Sources\Development\Core\Controls\Popup\AutoCloseWrapper\AutoClosePopupWrapper.cs:ligne 81
  InnerException:
       HResult=-2146233088
       Message=Impossible de trouver la ressource nommée'ControlOuterBorder_CornerRadius'. Les noms de ressources respectent la casse.
       Source=PresentationFramework
       StackTrace:
            à System.Windows.StaticResourceExtension.ProvideValue(IServiceProvider serviceProvider)
            à MS.Internal.Xaml.Runtime.ClrObjectRuntime.CallProvideValue(MarkupExtension me, IServiceProvider serviceProvider)
       InnerException:

Thank's
Alain

[Rosen Vladimirov]

Hi Alain,

In case you want to use another theme, you have to modify the templates in the Example.xaml as they are based on our Office_Black theme. I've modified my project and now the theme is set to Office2013 and everything is working as expected. The error you've seen is that a resource is missing, as you've merged resources for Office2013 theme and the ControlOuterBorder_CornerRadius resource doesn't exist in it.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

regarding the project RadAutoCompleteBox-WPF-767672.zip you gave to me, when I executed it, I remark that an error occur during the execution in my Visual Studion:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=WatermarkTextBox'. BindingExpression:Path=ActualWidth; DataItem=null; target element is 'AutoCompleteBoxesWrapPanel' (Name=''); target property is 'Width' (type 'Double')

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

I've just tested my project and everything is working as expected. Could you clarify if this is exception or just an error in the output window of visual studio? Have you modified the project? Which version of UI for WPF are you using and are you using Xaml or NoXaml binaries?

I'm looking forward to hearing from you.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

regarding the grouping project, like internet explorer, is this possible to have the items in an expander???

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

It is not possible to use an expander - the grouped items are in fact styled items of the RadListBox that is inside RadAutoCompleteBox's Popup. They are not much different from the other items that you select - they look like grouped, but as I've already mentioned - RadAutoCompleteBox doesn't support real grouping. So even if you place RadExpander where we are currently using TextBlock, you will not be able to expand and collapse items.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

thank you for your reply :) Do you have any suggestion to have this kind of feature in my control???

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

As I've said - it is not possible to use RadExpander in this case. But you can simulate the same behavior, by adding a button in the Group's template. I've modified the Grouping project in order to show you how to achieve this. Please note that this is just a workaround for the required scenario. You can modify the button's template based on your needs.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

regarding the matching text highlight feature, I would like to know if it's possible to match any word anywhere in each dropdown item instead of having at startingwith feature???

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

In order to use "Contains" instead of "StartsWith" you should modify AutoCompleteBoxGroupingFilteringBehavior and replace the following line:

examples = item.Items.Where(e => e.Description.StartsWith(pSearchText, StringComparison.InvariantCultureIgnoreCase));

with e.Description.Contains...

I've modified the project which you've sent us in your other ticket in order to show you how to achieve this. Please give it a try and inform us in case you have any problems or concerns.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

wonderfull and it's exactly what I did but the problem is if I have more than one words in the AutoCompleteBox like the following: Rosen Alain User1

In this situation, I need to display the items which contain all words and of course I need to highligh to portion of the text which contain all entered words.

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

I'm not sure I fully understand your idea, but if you have an item, which contains all the names (Rosen Alain User 1), it will be shown and highlighted - you can check the attached screenshot for your reference.

In case you want to highlight all items, which contain at least one of the names, you will have to change the FilteringBehavior:

var allSearchWords = pSearchText.Split(' ');
foreach (string word in allSearchWords)
{
    if (word == null || word == string.Empty)
    {
        continue;
    }
....

After that change pSearchText in the method with "word". This way RadAutoCompleteBox will filter the items which contain at least one of the words. Please note that this could break the highlighting logic. In this case you will have to modify BuildText method of AutoCompleteBoxTextBlockWithHighlight.cs.

I've modified the FilteringBehavior of the project in order to show you how to achieve the splitting of input string. Please note that if you enter the following text for example "Bernier Item", the entered letters will not be highlighted in the dropdown. You will have to modify BuildText method according to your desired scenario.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

 

 

[Christie Admin]

Hi Rosen,

regarding the button to expand or not a group of items, I have an issue with that. What I'm trying to do is, the first time the dropdown appear, all groups should be collapsed and when the group is collapsed, I need to show always 3 items and when the user expand the group, all items should be visible.

Thank's
Alain

[Rosen Vladimirov]

Hello Alain,

Your idea of using RadAutoCompleteBox in the same way as IE 11 address bar is interesting, but it requires a lot of customizations of the control. As we have already stated, using Grouping inside RadAutoCompleteBox is not supported and we provide only a workaround how to simulate grouping behavior. Based on your requirements, we have provided several projects with additional customizations - highlighting of matching letters, etc. We cannot provide better help as all of the solutions are based on your custom scenario and our support is dedicated to the built-in features of the control. We can help you with ideas how you could achieve the desired scenario, but with no guarantees that they'll work as expected.

As per the problem with collapsing the items at initialization, I would suggest to do the following:
1) Add the following setter to your RadExpanderStyle:

<Setter Property="IsExpanded" Value="True"/>

2) Add Loaded handler to the RadExpander inside SearchBoxControlItem:

<telerik:RadExpander Loaded="RadExpander_Loaded" Style="{DynamicResource RadExpanderStyle}" Grid.Column="2" Margin="2 0" Collapsed="RadExpander_CollapsedExpanded" VerticalAlignment="Center" Expanded="RadExpander_CollapsedExpanded" />

3) In the Loaded handler add a code to Collapse the expander:

private void RadExpander_Loaded(object sender, RoutedEventArgs e)
{
    var expander = (sender as RadExpander);
    expander.IsExpanded = false;
}

4) I've noticed there is an error in the code we've included in RadExpander_CollapsedExpanded handler - change the initialization of shouldCollapse variable in the following way:

var shouldCollapse = !expander.IsExpanded;

This way the items will be collapsed at initialization.

Hope this helps.

Regards,
Rosen Vladimirov
Telerik