mydotnetblog.org

Arjun's Blog on .Net

LightSwitch Custom Control: Autocomplete Textbox

clock August 29, 2010 07:46 by author Arjun Paudel

1.Create a lightswitch application or open your existing lightswitch application.

2.Add a new Silverlight class project (VB or C#), 

     File, New, Add Project and select Silverlight class project, name it something like LightSwitch.CustomControls

3.Create an silverlight user control called LSAutocomplete

 

 

4.Add an AutocompleteBox from toolbox to user control (If you do not have AutocompleteBox please download it here  )

 

 

5. Your xaml should be something like below

 <sdk:AutoCompleteBox   HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="LSAutocomplete" VerticalAlignment="Stretch" />

 

6.Press F7 to bring code editor  window and Add following properties

  private object   _ItemsSource;
        public object ItemsSource
        {
            get
            {
                return _ItemsSource;
            }
            set
            {
                if (_ItemsSource != value)
                {
                    _ItemsSource = value;
                     LSAutocomplete.ItemsSource = (IEnumerable) _ItemsSource;
                }
                
            }
        }


        private string _SelectedItemPath;
        public string SelectedItemPath
        {
            get
            {
                return _SelectedItemPath;
            }
            set
            {
                if (_SelectedItemPath != value)
                {

                    var bindingPath = "Screen." + value;
                    LSAutocomplete.SetBinding(AutoCompleteBox.SelectedItemProperty, new Binding() { Path = new PropertyPath(bindingPath), Mode = BindingMode.TwoWay });
                   
                    _SelectedItemPath = value;
                }

            }
        }

7.Build your LightSwitch.CustomControls project

8.Create 2 tables similar to the following in your sql database

 

Customer Table

CustomerID

CustomerName

CountryID

 

Country Table

CountryID

CountryName

 

Add one to many relation (Country Table’s CountryID to Customers Table CountryID) and fill some countries manually(or create screen in LightSwitch to fill in)

9.Create a list and detail screen in lightswitch, refer to how do I videos below.

http://msdn.microsoft.com/en-us/lightswitch/cf7b8a6e-c3fd-4d1f-88d4-095a1d02f6f1.aspx

 

10.Change Country ‘s control to Custom Control and click Customer Control’s change button on properties panel and add reference as follow.

 

 

11.Find the control you built in Add Custom Control window and then press OK

 

 

12.Add countries list to screen , click add Data Item, select queries and countries, press OK 

 

13.Now, add following code in CustomerDetail_Loaded event

 

partial void CustomerListDetail_Loaded()
        {

            IContentItemProxy proxy = this.FindControl("Country1");  //make sure name of control is country1
            proxy.Invoke(() =>
            {
                var cc = (LightSwitch.CustomControls.LSAutoComplete)proxy.Control;
                cc.SelectedItemPath = "CustomerCollection.SelectedItem.Country";
                cc.ItemsSource = this.CountryCollection;
              
            }
            );
        }

 

You can always change the summary field to Display different column  in autocomplete box.

 

 

 

 

14.That’s All, if everything goes well, you should see something like below. Please find attached code and SQL scripts to generate required tables.

 

Sources.zip (1.68 kb)



Edit SubItems in ListView Control

clock July 22, 2009 19:54 by author Arjun Paudel

This is just a simple example of how to edit Sub Items in ListView. If you need such things frequently then just create an user control inheriting ListView and incorporate the idea, you can read column names dynamically and create context menu as shown in the example, you can find source project at the bottom of this post, please download it. I am providing 2 methods

1. Using ContextMenu

   Private WithEvents EditBox As New TextBox

    Private WithEvents EditMenu As New ContextMenu

    Private SelectedItem As ListViewItem

    Private EditingcolumnIndex As Integer = 0

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        For i As Integer = 1 To ListView1.Columns.Count - 1

            Dim EditCoulmn1 As New MenuItem(String.Format("Edit {0}", ListView1.Columns(i).Text), AddressOf EditMenu_click)

            EditMenu.MenuItems.Add(EditCoulmn1)

        Next

    End Sub

 

    Private Sub EditMenu_click(ByVal S As Object, ByVal e As EventArgs)

        Dim clickedmenu As MenuItem = CType(S, MenuItem)

        EditingcolumnIndex = (From c As ColumnHeader In ListView1.Columns Where c.Text = clickedmenu.Text.Replace("Edit ", String.Empty) Select c).First.Index

        EditBox.Bounds = SelectedItem.SubItems(EditingcolumnIndex).Bounds

        EditBox.Text = SelectedItem.SubItems(EditingcolumnIndex).Text

        EditBox.Visible = True

        EditBox.Select()

    End Sub

    Private Sub Editbox_Leave() Handles EditBox.Leave

        SetValues()

    End Sub

    Private Sub EditBox_KeyUp(ByVal s As Object, ByVal e As KeyEventArgs) Handles EditBox.KeyUp

        If e.KeyCode = Keys.Enter Then

            SetValues()

        ElseIf e.KeyCode = Keys.Escape Then

            EditBox.Visible = False

        End If

    End Sub

    Private Sub SetValues()

        SelectedItem.SubItems(EditingcolumnIndex).Text = EditBox.Text

        EditBox.Visible = False

    End Sub

    Private Sub ListView1_MouseClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles ListView1.MouseClick

        Dim item = ListView1.GetItemAt(e.X, e.Y)

        If item IsNot Nothing Then

            If e.Button = Windows.Forms.MouseButtons.Right Then

                SelectedItem = item

                EditMenu.Show(ListView1, e.Location)

            End If

        End If

        EditBox.Visible = False

        ListView1.Controls.Add(EditBox)

    End Sub

2. HitTest Method

Public Class Form1

    Private WithEvents EditBox As New TextBox

    Private SelectedItem As ListViewItem.ListViewSubItem

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        EditBox.Visible = False

        ListView1.Controls.Add(EditBox)

        ListView1.FullRowSelect = True

    End Sub

Private Sub Editbox_Leave() Handles EditBox.Leave

        SetValues()

    End Sub

    Private Sub EditBox_KeyUp(ByVal s As Object, ByVal e As KeyEventArgs) Handles EditBox.KeyUp

        If e.KeyCode = Keys.Enter Then

            SetValues()

        ElseIf e.KeyCode = Keys.Escape Then

            EditBox.Visible = False

        End If

    End Sub

    Private Sub SetValues()

        SelectedItem.Text = EditBox.Text

        EditBox.Visible = False

    End Sub

    Private Sub ListView1_MouseClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles ListView1.MouseClick

        Dim info As ListViewHitTestInfo = ListView1.HitTest(e.X, e.Y)

        If info.Item IsNot Nothing AndAlso info.SubItem.Bounds.X > 10 Then

 

            EditBox.Bounds = info.SubItem.Bounds

            EditBox.Text = info.SubItem.Text

            SelectedItem = info.SubItem

            EditBox.Visible = True

            EditBox.Select()

 

 

        End If

    End Sub

End Class

 

 

 

EditSubItemHitTest.zip (118.95 kb)

 

EditSubItem.zip (121.08 kb)



Calendar

<<  February 2012  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
2728291234
567891011

View posts in large calendar

Sign In