Silverlight Dropdown List Control

Just found my glitch in populating ddl from List or ObservableCollection...

When the properties say "Field" they MEAN it. For example, if you try to set DataKeyField or DataTextField to a property name you will get a "Field not found" exception. However, implementing them as fields in the underlying class will get you cooking.

The following code works, but if you comment out the fields and uncomment out the properties it will throw. Hopefully this helps someone...

Public Class TestObject

     Public Field1 As Integer
     Public Field2 As String

     'Private m_field1 As Integer
     'Public Property Field1() As Integer
     '     Get
     '         Return m_field1
     '     End Get
     '     Set(ByVal value As Integer)
     '         m_field1 = value
     '     End Set
     'End Property

     'Private m_field2 As String
     'Public Property Field2() As String
     '     Get
     '         Return m_field2
     '     End Get
     '     Set(ByVal value As String)
     '         m_field2 = value
     '     End Set
     'End Property

     Public Sub New(ByVal f1 As Integer, ByVal f2 As String)
         Field1 = f1
         Field2 = f2
     End Sub
End Class

Partial Public Class AdminGUI
     Inherits UserControl

     Private m_List As New ObservableCollection(Of TestObject)

Private Sub AdminGUI_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        
         '//populate ddl
         m_List.Clear()
         Dim t As TestObject
         t = New TestObject(1, "Apple")
         m_List.Add(t)
         t = New TestObject(2, "Baby")
         m_List.Add(t)
         t = New TestObject(3, "Cat")
         m_List.Add(t)
         ddl1.DataSource = m_List
         ddl1.DataKeyField = "Field1"
         ddl1.DataTextField = "Field2"
         ddl1.DataBind()
     End Sub
End Class

Also, there isn't any real keyboard functionality of the drop down. You can't select an item using the keyboard, nor can you tab away from the control. Tabbing into the control does not focus on the control as you would expect.

Apologies if I'm missing something obvious here. These are just the things that I've noticed whilst trying to use this control:

1. I have a drop down with only a couple of items in, however the list that drops down is still about 6 items high. Is there a way so that it only drops down the amount it needs to?

2. I can't seem to set the background colour.

3. It doesn't inherit the Font Size, FontFamily etc from its parent.

4. Not setting a width causes a crash. How can I have the control stretch to the available width?

Thanks,
Lee

This control CRASHES when I click on the drop down box button IF the control is hosted on a sub user control.

In my page I pop up another user control which contains the drop down. As soon as I clikc the button it crashes. If i set the star up control of the app to the custom control, than it works fine.

See if you can reproduce and if so please fix this bug, controls are useless if they can only be used on the main control.

Hi,

Thanks for posting this, we have managed to reproduce this and it looks like a bug. We will get this added as a fix for the next version. Thanks!

Hi,
I'm using the dropdownlist in a user control.
In the user control constructor and after the InitializeComponent(); method call, I'm setting the dropdownlist DataSource, then the
DataTextField and the DataKeyField. Finaly I'm calling the dropdonwlist DataBind(). WhenI run the application, the dropdownlist is empty. I'm missing something ? thx in advance.


             ddlSort.DataSource = DataContext as List<Entity>;
             ddlSort.DataTextField = "Name";
             ddlSort.DataKeyField = "Id";
             ddlSort.DataBind();

Hi Bache,

I got a question. The DropDown List can't insert into a DataGrid as a DataGridTemplateColumn.

This is code sinppet
<my:DataGrid x:Name="dg" Width="200" Height="200" AutoGenerateColumns="False">
                                                                <my:DataGrid.Columns>
                                                                                 <my:DataGridTemplateColumn>
                                                                                                 <my:DataGridTemplateColumn.CellTemplate>
                                                                                                                                <DataTemplate>
                                                                                                                                                 <liquid:DropDownList.Items>
                                                                                                                                                                                                <liquid:ListItem Key="1" Value="A"></liquid:ListItem>
                                                                                                                                                                                                <liquid:ListItem Key="2" Value="B"></liquid:ListItem>
                                                                                                                                                                                                <liquid:ListItem Key="2" Value="C"></liquid:ListItem>
                                                                                                                                                                                                <liquid:ListItem Key="4" Value="D"></liquid:ListItem>
                                                                                                                                                                                                <liquid:ListItem Key="5" Value="E"></liquid:ListItem>
                                                                                                                                                                 </liquid:DropDownList.Items>
                                                                                                                                </DataTemplate>
                                                                                                 </my:DataGridTemplateColumn.CellTemplate>
                                                                                 </my:DataGridTemplateColumn>
                                                                                 </my:DataGrid.Columns>
                                 </my:DataGrid>
Could you please help me?

Hi Bache,

Instead of setting the DataContext field, set the DataSource field with your data source:

this.DDLWharf.DataSource = wharfList.OrderBy(item => item.Name);

Hope this helps!

Dan,

I'm trying to databind the Liquid.Dropdownlist to a collection.
After adding an item to a list, I want to order the list alphabetically on the Name property and Databind the ordered list to the control

wharfList.Add(newWharf);
this.DDLWharf.DataContext = wharfList.OrderBy(item => item.Name);
this.DDLWharf.DataKeyField = "WharfId";                            //DDLWharf = DropDownList
this.DDLWharf.DataTextField = "Name";


where "wharfList.OrderBy(item => item.Name);" returns a "System.Linq.OrderedEnumerable"
while dbugging, I see all the ordered(!) items in the "this.DDLWharf.DataContext" but the dropdownlist shows up empty after finishing the code.

Am I forgetting something?

Thanx

Bache

Hello,

The DropDownList can be set so that it is always on top of other controls by ensuring it has a greater Canvas.ZIndex property than other controls and this, of course requires you to be positioning your controls absolutely using a Canvas. Hope this helps!

Hello all currently i am using liquid 4.7 version combobox. the problem i am facing is the in the layout when i click at the dropdown it is not overlapping the other controls in form . so please help me regarding this

Hello,

Good point! At the moment you cannot clear the selection which is a bit of an oversight. This is on the fix list for the next version, thanks for reporting this!

I know I know, SetSelected(Key) but how can i select nothing? Clear display and selectedvalue.

How can i select an item from code?
Excellent work :-)

Hello,

The controls are being updated to Silverlight 2 BETA 2 and will be available very soon, thanks for your patience!

I've got the same problem as harishb17 but with the treeview control. Let us know when you have a fix for this.

Hi,

As XAML Databinding is not possible, is there any way to add dynamically liquid:ListItem from database. my wcf service returns the result set.

thanks in advance

Hi Kevin,

This seems to be a bug and has been added to the list of fixes for the next version, thanks for reporting this!

Hello,

When calling the DropDown.SetSelected(Key) method, the selected item is not hilighted when the dropdown is clicked. Is there a way to do this?


Thanks,

Kevin

To harishb17:

Where did you get the BETA 2 download?

Hello,

Are you using the style listed on the Visual Customizations page or your own? We are adding easy font customizations for the dropdownlist at the moment and appreciate your patience on this!

to dan:
im working with beta 1 and when tried to add default drop down list styles to app.xaml and customize it, it gives internal exception and the project can't run, so is there any way to customize the default text font ?

to dan,

ya other projects of mine are working fine in beta 2 if some changes should be done (due to version change)..
your code is also working fine with beta 1 version sucessfully but failed to build it in beta 2 of silverlight.

To harishb17:

We have not seen this error before, do other Silverlight BETA 2 demos work on your machine? Have you managed to download and use any of our projects?

To Dipali Shah:

The controls do not expire after a certain time and are free to use on 1 website for your company, if you want to use it on more than one website or want to re-distribute the dll then you will need a license.

hi,
I am working on silver light 2.0 beta 2 version,
when i am using this dll in my application i am getting the following error..
-------
The "ValidateXaml" task failed unexpectedly.
System.TypeLoadException: Derived method 'OnApplyTemplate' in type 'Liquid.LiquidControl' from assembly 'Liquid, Version=4.4.0.17600, Culture=neutral, PublicKeyToken=null' cannot reduce access.
    at System.Reflection.Assembly._GetType(String name, Boolean throwOnError, Boolean ignoreCase)
    at System.Reflection.Assembly.GetType(String name)
    at MS.Internal.Xaml.Schema.ClrNamespace.SearchAssembliesForShortName(String shortName)
    at MS.Internal.Xaml.Schema.ClrNamespace.TryGetXamlType(String xamlName, Assembly localAssembly, XamlType& xamlType)
    at MS.Internal.Xaml.Schema.ClrNamespace.GetXamlType(String typeName, XamlTypeSearchSettings searchSettings, Assembly localAssembly, Boolean throwOnError)
    at MS.Internal.Xaml.XamlContext.GetXamlType(String prefix, String name, XamlTypeSearchSettings searchSettings, XamlNamespace& xamlNs, Boolean throwOnError)
    at MS.Internal.Xaml.Parser.XamlScanner.ReadObjectElement(XamlName name, Boolean isEmptyTag)
    at MS.Internal.Xaml.Parser.XamlScanner.ReadElement()
    at MS.Internal.Xaml.Parser.XamlScanner.DoXmlRead()
    at MS.Internal.Xaml.Parser.XamlScanner.Read()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__23.MoveNext()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__7.MoveNext()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__39.MoveNext()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__23.MoveNext()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__7.MoveNext()
    at MS.Internal.Xaml.Parser.XamlPullParser.d__0.MoveNext()
    at MS.Internal.Xaml.TextReaderEnumerator.MoveNext()
    at MS.Internal.Xaml.XamlTextReader.Read()
    at MS.MarkupCompiler.ValidationPass.ValidateXaml(String fileName, Assembly[] assemblies, Assembly callingAssembly, TaskLoggingHelper log, Boolean shouldThrow)
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.XamlValidator.Execute()
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.XamlValidator.Execute()
    at Microsoft.Silverlight.Build.Tasks.ValidateXaml.Execute()
    at Microsoft.Build.BuildEngine.TaskEngine.ExecuteInstantiatedTask(EngineProxy engineProxy, ItemBucket bucket, TaskExecutionMode howToExecuteTask, ITask task, Boolean& taskResult) SilverlightApplication2
---


please help out.

Is this controls are like trial version and expired after some time? Becoz we don't have code of this and if i want to use it in live project that so need to confirm.

Hi,

It is possible databinding throu code in this ddl....

ThanX

Hello,

It is not possible to set the background at the moment, we are looking to add this feature in the next version. Thanks!

Hi,

How do you change the background colour of the DropDownList?

Thx

Hello,

Not at this time, databinding is being looked at at the moment, we will update this page when we are nearer a solution!

Dan,

Can databinding be done in the code behind?


Thanks.

Hello,

XAML Databinding is not possible at the moment in the DropDownList, we are looking at implementing this soon!

Hi,

Does anyone know how to bind a DropDownList in XAML? Thanks.

Hello,

This is a good request and one we will add to the improvements list for the next version. Thanks!

Is there a way to set the direction the list opens in? When I have the DropDownList near the bottom of the browser window, the open list isn't visible because it runs out of the visible area. In this situation the list needs to open above rather than below.

Hello,

I think the bit you are missing is where you give the style (in the App.xaml file) a name (x:Name="testStyle") and then when you declare the control in xaml you should include the style attribute (style="{StaticResource testStyle}"). For more information There is a very good article on styles..

I've tried downloading the default style and changing them, but it does seem to effect the look of the dropdownlist.
Basicly, I've copied the default styles into the app.xaml file and made changes to them. Am I missing a step?

Hello,

The latest release 4.4 addresses the issue of controlling the formatting of the selected item, see the example above.

Hi,

I have not had any success setting the font family and size of the displayed text after a list item has been selected in a DropDownList (i.e. the control is in a collapsed state). Although, using styles, I can set the style attributes of the list items in an expanded DropDownList. Is this a bug or do you have some working examples?

Any help would be appreciated.

Hello,

Apologies for this, there seems se be some missing styles from the page which I have now fixed. Basically the DropDownList uses a standard ScrollViewer which is referred to in the styles see the line:

Style="{StaticResource scrollViewerStyle}"

You can remove this if you do not want rounded corners else you will need to copy these styles too. Please refer to the Visual Customizations page for the correct styles.

Trying to use styles with the dropdown box, but when I add the sample you have in visual customisations the whole xaml page doesn't show in VS2008 designer. Do you have any working examples on howto change the look and feel of the dropdown list ?

Nathan

ok heres an easy extension method

public static void SetSelectedByIndex(this Liquid.DropDownList list, int index)
{
         if (list.Items.Count > 0 && list.Items.Count >= index)
         {
                 Liquid.ListItem item = list.Items[index];
                 list.SetSelected(item.Key);
         }
}

pop it in a static class then use it like

lstSelectContentBlock.SetSelectedByIndex(0);

easy :)

Hi,

We don't have any samples of using the dropdown in the DataGrid, first guesses are that it won't be possible but we will test and report back.

Do you have any samples on how I could use this in a DataGrid? Is it possible?

Hello,

Yes, one of the main fixes with this version is an over-haul of the rendering to bring them in-line with Microsoft's own control library and as a result they now work in the XAML preview. Enjoy using them:-)

It seems that version (4.2) correct all the problems that I has. (the demo page works fine now and no more exception are thrown).

Thx.

Hey guys,

when I open a xaml file in Blend 2.5, the drop-down control could not be rendered correctly on the design surface. Any fix for that?

Hello,
Thank you for the quick reply. I'm gonna post part of the code I'm using. Hope this help.

public void PopulateDropDownList(DropDownList myList)
{
myList.Items.Clear();
myList.Items.Add(new liquid.ListItem("0", "All"));
myList.SetSelected("0");

foreach (MyObject obj in List)
{
myList.Items.Add(new liquid.ListItem(obj.ID, obj.Name));
}
}

This is the method I'm using to populate the drop down list. after calling this method I set the popup of the drop down list : myList.SetPopup(myPopup); I call this functions everytime I want to change the values in the Drop down list. Hope this helps. Thank you once again.

Hello,

This sounds like a bug, we have unsuccessfully tried to replicate it here. Do you have any sample code that demonstrates the problem?

Hello,
I'm using a dropDownList version 4.1 in a silverlight 2.0 project. The problem is when I populate the drop down list for the second time and I select an item from the list. This action makes my drop down to set the scroll bar outside of the area of the list and it shows an empty space below my last item. The moment I press a scroll bar button everything seems to work perfect. There aren't any more empty spaces and the scrollbar is in it's normal position. Could you please tell me if this is a bug or if I'm doing something wrong. Thank you.

Hello,
I'm using a dropDownList version 4.1 in a silverlight 2.0 project. The problem is when I populate the drop down list for the second time and I select an item from the list. This action makes my drop down to set the scroll bar outside of the area of the list and it shows an empty space below my last item. The moment I press a scroll bar button everything seems to work perfect. There aren't any more empty spaces and the scrollbar is in it's normal position. Could you please tell me if this is a bug or if I'm doing something wrong. Thank you.

I'm definitly sure the problem in on my system, because the Form Controls Demo on this site doesn't work too. (Nothing is visible under the text description). The odd thing is that every sample on silverlight 2 beta that I tried (like http://silverlight.net/Samples/2b1/SilverlightControls/run/default.html) works fine. I 'll let you known if I found something.

Thanx

Hello,

We have been unable to replicate this problem, if you like can you zip up and email the complete project to us at: dan@vectorlight.net?

Thanx for this quick answer. but there is still an issue. There is probably something wrong with my config.

VS2008 - Silverlight 2 Beta - Silverlight Tools Beta 1 for Visual Studio 2008 - Control For Silverlight v 4.1

I loaded the demo project found in zip file. When I launch it, it throw this kind of exception. (I didn't made any change in project)

Additional information: System.Windows.Markup.XamlParseException: AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 9 Position: 196]
at MS.Internal.XcpImports.Control_InitializeFromXaml(Control control, String xamlString, Boolean createNamescope)
at System.Windows.Controls.Control.InitializeFromXaml(String xaml)
at Liquid.Core.Controls.LiquidControl..ctor()
at Liquid.Core.Controls.DataboundLiquidControl..ctor()
at Liquid.Core.Controls.DropDownList..ctor() [Line: 0 Position: 2]

Hello,

This is due to the styles not being copied to your App.xaml file. The styles can be found in the downloaded zip file of version 4.1, you need to ensure these files are in your project App.xaml. If you need an example project then you can download the form controls demo project.

I tried a simple solution with a copy/paste of sample from this page, but i have an exeption on InitializeComponent();
I copied the liquid.dll to ClientBin too.

Additional information: System.Windows.Markup.XamlParseException: System.Windows.Markup.XamlParseExcepion: Cannot find a Resource with that Name/Key [Line: 7 Position: 81]
at MS.Internal.XcpImports.Control_InitializeFromXaml(Control control, String xamlString, Boolean createNamescope)
at System.Windows.Controls.Control.InitializeFromXaml(String xaml)
at Liquid.Core.Controls.LiquidControl..ctor()
at Liquid.Core.Controls.ListItem..ctor() [Line: 0 Position: 2]
at MS.Internal.XcpImports.Control_InitializeFromXaml(Control control, String xamlString, Boolean createNamescope)
at System.Windows.Controls.Control.InitializeFromXaml(String xaml)
at Liquid.Core.Controls.LiquidControl..ctor()
at Liquid.Core.Controls.DataboundLiquidControl..ctor()
at Liquid.Core.Controls.DropDownList..ctor() [Line: 4522085 Position: 6488184]

Hi Deraldo,

To set the selected item you can use the SetSelected() method of your dropdownlist. This method requires you to pass the Key for the item you want to select. So, taking the example above you would use:

testDropDown.SetSelected("9");

This selects "Item 9" in the dropdownlist. It is important you call this method after you have populated your control with items. Hope this helps.

Hi.
If I have the dropdownlist populated and get some values from database, how could I select the apropriate value in the ddl control? I tried with selectedvalue but it is readonly.

thx in advance.

Hello,

The nature of z-depth calculations in Silverlight make it not possible to have two Canvas objects next to each other and have child controls of one canvas overlap another. The solution is to put the DropDownList ListBox on the Canvas that contains these two canvas' i.e. the parent canvas of the canvas your DropDownList control is on. That way you will be able to specify the Canvas.ZIndex property.

Unfortunately this is the way Silverlight handles the depth of visual elements and controls. Let me know if you need more help with this and I can do a tutorial page about Siverlight control rendering order (z-indexing) to help as I know it can be quite confusing.

Hi Dan. Nice work!
How could I put the dropdownlist associated listbox in top of others components? I have a dropdownlist inside one canvas that has another canvas very closed. the listbox shows behind this adjacent canvas.

thx in advance.

Hello,

There is a bug with the dropdown list and selecting a default item. This is being fixed at the moment and will be available in version 2.7 along with other improvements.

ho to customize the intial text(select an item) ie present in dropdownlist

Having investigated the problem you have with duplicated entries, we have found that when adding InputOption objects to the Items collection of the drop down you must ensure the ID property is unique, otherwise you will encounter problems like you have been having.

For simplicity, in the example above the PopulateDropDown() method takes a List collection and populates the Items collection using each string as both the ID and Label for the Item. In a real-life application the ID would be unique, in your application you can have duiplicate Label values in the collection but the ID values must be unique.

Hi,

Regarding your last two posts, there is no way (yet) to customize the Brush or the font for this control, visual customizations are currently being implemented and will be included as part of Version 2.3.

The duplication issue you are having is a new issue, thanks for raising that it has been added to the bug list for the next version.

Duplicated list entries will cause the list to be truncated where the duplication occurs.
Suppose I have 10 list entries > 1,2,3,4,5,5,6,7,8,9 > Only 1,2,3,4,5 will appear in the drop down box. Known issue?

Is it possible to customize the Brush for the background, foreground? How about changing the font size of the options? I don't see any properties exposed. There is a SetSkin(string xaml) function but there are no samples on how to use that.

thanks dan its working

Is the latest version of the Liquid.dll in your ClientBin folder? This is essential for fixing the missing images errors you are getting.

i m getting an download error, i guess it is for image in that dropdownlist its missing...other stuffs are working..thanks for earlier help

I've created a quick example of creating a drop down list populated with countries above, ensure you have the latest version 2.1 of the Liquid.dll from the downloads page before running the above example. I will continue to create more examples for the other controls where time permits.

can u give some codes for using it?