Summary and detail in listbox

A couple of posts back we saw how to create a simple yet functional expander control. this sample shows how to use one of those in listbox. we will replace the listboxitem template with our expander control.

see a demo

source is available here

Source code links

Some source code links were pointing to wrong locations. Updated the links

Silverlight – ComboBox

Here is sample implementation of ComboBox in silverlight. it has the basic functionality. Ideally a Popup Control should be used in the controltemplate of the combobox. For some reason, it was not working when ItemsPresenter is added to Popup, will look into it

you can download the  source here

Expander in silverlight

I was trying to do something like ‘Accordion’ in silverlight, but ran into issues with animating the height. I had set the ‘To ‘ value for the double animation(s) in code and still have to figure out why the rotate transform is not rotating at the center

Here is the sample updated to beta 2

Here is the sample updated to fix an issue with IsExpanded property

Silverlight and javascript

Communication between silverlight and javascript seems to be simple

To call a Javascript function from codebehind

HtmlPage.Window.CreateInstance(“FunctionName”) ;
or
//if the function has parameters
HtmlPage.Window.CreateInstance(“FunctionName”, “param1″, “param2″) ;

to call a method in codebehind from javascript

we have to decorate the method with “ScriptableMember”

 [ScriptableMember()]
 public string GetString()
 {
     return “this is a test”;            
 }

and in App.xaml.cs, we have to register our page

 private void Application_Startup(object sender, StartupEventArgs e)
 {
     Page page = new Page();
     HtmlPage.RegisterScriptableObject(“MyPage”, page);
     this.RootVisual = page;
 }
and in the html page where the control is hosted. we can call GetString() method defined in the page

function CallCodeBehind(){      
        var retvalue = document.getElementById(“SilverlightControl”).Content.MyPage.GetString());
        }

<div id=”silverlightControlHost”>
  <object data=”data:application/x-silverlight,”
            type=”application/x-silverlight-2-b1″ width=”400″
            height=”400″ name=”SilverlightControl”/></div>

TabControl- Silverlight

Here is a basic implementation of TabControl in Silverlight. it shows 2 ways you could add items to the control.

see a demo

you can download the sample here

Adding dynamic columns in Silverlight Datagrid

This post shows how to add button column to a datagrid(Silverlight) and react to the click event

1.Create a resource for the DataGridtemplateColumn, define CellTemplate
2.After setting the ItemsSource, get the resource we added in step 1 and add it to the grid
 
this is XAML from the page

<UserControl x:Class=”SilverlightApplication1.Page”
    xmlns=”http://schemas.microsoft.com/client/2007“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    Width=”600″ Height=”600″
             xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”
             xmlns:local=”clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1″>
    <UserControl.Resources>      
        <data:DataGridTemplateColumn Header=”" x:Name=”dtc”>
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Click=”Button_Click” Tag=”{Binding CustomerID}”
                            Content=”Delete”></Button>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
        </data:DataGridTemplateColumn>
    </UserControl.Resources>
  
    <Canvas>
        <data:DataGrid x:Name=”dataGrid1″
                       Height=”400″
                       Width=”450″
                       Margin=”0,5,0,10″
                       AutoGenerateColumns=”True” />
        <TextBlock Text=”Sample Text” x:Name=”txt1″
                   Canvas.Top=”500″
                   Canvas.Left=”100″></TextBlock>
    </Canvas>
</UserControl>

let’s say we are getting data from WCF service

the code to call WCF service will look something like this

BasicHttpBinding b = new BasicHttpBinding();
EndpointAddress addr = new EndpointAddress(“http://localhost/mywebsite/MyService.svc“);
ServiceReference1.MyServiceClient client = new SilverlightApplication1.ServiceReference1.MyServiceClient(b, addr);
client.GetCustomersCompleted += new EventHandler<SilverlightApplication1.ServiceReference1.GetCustomersCompletedEventArgs>(client_GetCustomersCompleted);
client.GetCustomersAsync();

 void client_GetCustomersCompleted(object sender, SilverlightApplication1.ServiceReference1.GetCustomersCompletedEventArgs e)
 {           
            this.dataGrid1.ItemsSource = e.Result;
            //this gets the column from the resources and inserts at the beginning of the row
            this.dataGrid1.Columns.Insert(0, this.Resources["dtc"] as DataGridTemplateColumn);
        }

// this  button click handler sets the text of a Textblock(“txt1″) to customerid of the row in which the button is clicked
 private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.txt1.Text = (sender as Button).Tag.ToString();
        }

ListView with Dynamic ContextMenu

When we want to display a ContextMenu based on the ListViewItem(Row) that was clicked, we have to handle ContextMenuOpening event and add our menuitems in that event. Attached sample shows how to do this.(change .doc to .zip)