DropDown Control （转）

Silverlight DropDown Control

This free DropDown control is, as its name suggests a generic control for allowing any content to be presented in a manner similar to the ComboBox.

This Silverlight only DropDown Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

To use the DropDown control you will need to add a reference to Liquid.dll in your project.

Download these Silverlight Controls for free now! Download the DropDown example  

How to Use the DropDown Control

To use the DropDown on your Silverlight page:

<UserControl x:Class="DropDown.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"

    xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <liquid:DropDown x:Name="dropDown" Width="100" Height="23" SelectedItemContent="Pick...">

            <liquidTreeView:Tree x:Name="treeView" Width="150" Height="150" EnableLines="True" SelectionChanged="Tree_SelectionChanged">

                <liquidTreeView:Node Title="Root Node">

                    <liquidTreeView:Node Title="Item 1" />

                    <liquidTreeView:Node Title="Item 2" />

                    <liquidTreeView:Node Title="Item 3" />

                    <liquidTreeView:Node Title="Item 4" />

                    <liquidTreeView:Node Title="Item 5" />

                </liquidTreeView:Node>

            </liquidTreeView:Tree>

        </liquid:DropDown>

    </Grid>

</UserControl>

 

With this DropDown control example we embed a TreeView control, this is the content that will "drop down" or "popup" when the button it clicked.

We have a single DropDown control named dropDown, this when clicked will display the TreeView and allow you to expand and select a single node from the tree.  When you have selected a node the TreeView will close, this is handled in a few lines of C# below.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Liquid;

namespace DropDown

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

        }

        private void Tree_SelectionChanged(object sender, TreeEventArgs e)

        {

            dropDown.SelectedItemContent = e.Target.Title;

            dropDown.IsOpen = false;

        }

    }

}

 

As you can see in the C# we attach an event handler to theSelectionChanged event which occurs when a node is selected.  In this event we change the SelectedItemContent property of our dropdown to relect the changes made and then close the dropdown with DropDown.IsOpen = false.

Example Silverlight DropDown Control:

 

 

Silverlight DropDown Reference

The DropDown exposes several properties for controlling various aspects of the DropDown and its behaviour.

Properties for Liquid.DropDown

Below are the available properties complete with descriptions.

Property Name	Type	Description
IsOpen	Boolean	Gets or sets the open status of the Drop down.
OpenPosition	DropDownPosition	Gets or sets the opening position.

 

Methods for Liquid.DropDown

Below are the available methods, complete with parameters and descriptions.

Method Name	Description	Parameters
OnApplyTemplate()	This is called when the template has been bound to the control.