Just code - Tamir Khason : Silverlight, Tips and Tricks, tutorial

New year – new blog or how to migrate Community Server to any other engine, supports XML-RPC

Tamir Khason — Fri, 02 Jan 2009 02:33:04 GMT

Please update your bookmarks, because the new url of this blog is http://khason.net/ (you have not update RSS feeds, it will be done automatically). Why I did it? Why I decided to go to “stand-alone”… Well. there are some reasons. Generally, I do not want to explain all those here, but trust me, there are some. The main reason is, that there is no responsible person in charge for this blog platform in Microsoft Israel. This why, if your blog is popular and you have a respect to your blog visitors, you cannot host it here… Take a look into new comments notifications in my inbox. Would you answer your readers with such “small amount” of SPAM and capcha, that cannot be fixed already for three years in this platform? This how my inbox looks like for last three years. So now, you should not ask me, why I not answered your email or comments. Aren’t you? :)

Currently, all comments in this blog are disabled, so if you want to comment, please use new url of posts (this will appear shortly in the beginning of each post). Also, this post will not be syndicated in RSS.

So, this post is the last. I loved this platform, and loved people started it. But, unfortunately, it seemed, that bloggers community is not important enough for new platform managers.

Also, If you want to learn how to use C# and XML-RCP to migrate from CS2007, used in this platform, visit my new home :)

Have a great year and, as always, be good people. This post marked with all possible tags automatically. Sorry.

Quick Silverlight (and WPF) tip: How to write program without XAML

Tamir Khason — Tue, 23 Dec 2008 23:51:00 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/quick-silverlight-and-wpf-tip-how-to-write-program-without-xaml/]

From the moment, 10K MIX09 contest was launched, I got more, then 20 people, asking the same question: Is it possible to have Silverlight program up and running without XAML at all?

The answer is “YES, IT IS”. Here is how:

All you need for run WPF or Silverlight application is

Class inherited from System.Windows.Application
Class inherited from System.Windows.Controls.UserControl

So, Let’s create new WPF or Silverlight application and delete all files from the project directory. Then add one file, named App.cs (or Foo.cs or Whatever.cs – the length of the file name is not included :) ) and write there :

using System.Windows.Controls;
using System.Windows;

public class App : Application {public App() {this.Startup += (s, e) => { this.RootVisual = Foo.M; };}}
class Foo: UserControl {static Foo _b = new Foo();public static Board M { get { return _b; } }

We done. F5, be happy. You just wrote first officially smallest Silverlight functional application. Good luck with Mix09 contest.

How to handle thickness

Tamir Khason — Wed, 09 Jul 2008 02:07:42 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/how-to-handle-thickness/]

Yesterday, we spoke about type converters. We even, built simple generic enum converter. Today, we’ll create more complicated converter, that very missing in Silverlight – ThicknessConverter. During the post, I also explain about tokenizing values in Silverlight

What is Thickness ?

What is thickness in Silverlight? It’s

<Border BorderThickness=”6”/>

<Border BorderThickness=”6,4,3,2”/> or <Border BorderThickness=”6, 4, 3,2”/> or, even <Border BorderThickness=”6; 4; 3 ;2”/>

How to handle it?

Tokenizing strings

What you seen here is tokenized strings. We have to split them by known token (one and own for each string) and then we can parse it for converter. How to do this? Complicated – too much cases. But, basically, you have to get string, quote character and separator. Don’t forget to check for empty spaces

private void Initialize(string str, char quoteChar, char separator)
        {
            this._str = str;
            this._strLen = (str == null) ? 0 : str.Length;
            this._currentTokenIndex = -1;
            this._quoteChar = quoteChar;
            this._argSeparator = separator;
            while (this._charIndex < this._strLen)
            {
                if (!char.IsWhiteSpace(this._str, this._charIndex))
                {
                    return;
                }
                this._charIndex++;
            }
        }

Then we have to scan string to find tokens

private void ScanToNextToken(char separator)
        {
            if (this._charIndex < this._strLen)
            {
                char c = this._str[this._charIndex];
                if ((c != separator) && !char.IsWhiteSpace(c))
                {
                    Exceptions.ThrowInvalidOperationException("No Separator Found");
                }
                int i = 0;
                while (this._charIndex < this._strLen)
                {
                    c = this._str[this._charIndex];
                    if (c == separator)
                    {
                        this._foundSeparator = true;
                        i++;
                        this._charIndex++;
                        if (i > 1)
                        {
                            Exceptions.ThrowInvalidOperationException("Empty Token Found");
                        }
                    }
                    else
                    {
                        if (!char.IsWhiteSpace(c))
                        {
                            break;
                        }
                        this._charIndex++;
                    }
                }
                if ((i > 0) && (this._charIndex >= this._strLen))
                {
                    Exceptions.ThrowInvalidOperationException("Emply Token Found");
                }
            }
        }

why not just split? Because it is not generic solution for strings with empty tokens, which is absolutely invalid. Another reason of using such helper is performance. String operation are not very fast things, thus we’ll check only the number of tokens required for future operations.

Also, we should make sure, that all tokens are required and get rid of unnecessary parts of the string, such as leading spaces, control characters etc. Now, when we have tokenized string, we can start building converter

Building thickness converter

Actually, the most significant part of this converter is tokenization , thus the most important override method for such converter is ConvertFromString

public override object ConvertFromString(string text)
        {
            Thickness res = new Thickness();
            TokenizerHelper helper = new TokenizerHelper(text);
            double[] numArray = new double[4];
            int index = 0;
            while (helper.NextToken())
            {
                if (index >= 4)
                {
                    index = 5;
                    break;
                }
                LengthConverter lc = new LengthConverter();
                numArray[index] = (double)lc.ConvertFromString(helper.GetCurrentToken());
                index++;
            }
            switch (index)
            {
                case 1:
                    res = new Thickness(numArray[0]); break;
                case 2:
                    res = new Thickness(numArray[0], numArray[1], numArray[0], numArray[1]); break;

                case 4:
                    res = new Thickness(numArray[0], numArray[1], numArray[2], numArray[3]); break;
                default:
                    typeof(Thickness).ThrowConvertFromException(text); break;
            }
            return res;
        }

The only thing to remember is to check whither we can convert from the type received from XAML

public override bool CanConvertFrom(Type sourceType)
        {
            switch (Type.GetTypeCode(sourceType))
            {
                case TypeCode.Int16:
                case TypeCode.UInt16:
                case TypeCode.Int32:
                case TypeCode.UInt32:
                case TypeCode.Int64:
                case TypeCode.UInt64:
                case TypeCode.Single:
                case TypeCode.Double:
                case TypeCode.Decimal:
                case TypeCode.String:
                    return true;
            }
            return false;
        }

Have a nice day and be good people. Stay tuned for future work process items.

Work process: How to use and build type converters

Tamir Khason — Tue, 08 Jul 2008 00:58:15 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/work-process-how-to-use-and-build-type-converters/]

Today, I want to start new tag - “Work process”. Here I’m going to publish partial classes, fixes, small utilities, I’m building for myself or clients to help in work process. I’ll give an example: currently, I’m working on BiDi support for Silverlight 2.0 (beta 2 to RTM). During the work process, I need to write different classes, such as converters, string utilities, exception helpers etc.

So, today I’ll public general type converter for generic classes.

What is type converter?

TypeConverter is a service attribute, used to help rendering engine to convert XAML string (usually it strings) to the type, you require in your class implementation. Here an example:

In your custom class you have dependency property of type TextAlignment

public TextAlignment TextAlignment
       {
           get { return (TextAlignment)GetValue(TextAlignmentProperty); }
           set { SetValue(TextAlignmentProperty, value); }
       }

In XAML code it will be used as:

<MyControl TextAlignment=”Left”/>

But, what you’re actually transfer to your class is string “Left”, when you need enum TextAlignment.Left, how to convert it? This for we’re using type converters

Attribute usage

In order to “tell” framework to use your type converter, you should mark target property with special attribute TypeConverterAttribute. Also, you can provide default value to your property by using another attribute DefaultValueAttribute. This will looks as following:

[TypeConverter(typeof(MyTextAlignmentTypeConverter))]
[DefaultValue(TextAlignment.Left)]
public TextAlignment TextAlignment
{
get { return (TextAlignment)GetValue(TextAlignmentProperty); }
set { SetValue(TextAlignmentProperty, value); }
}

How to build type converter

In order to build type converter, all you have to do is to build your own class, derived from TypeConverter. It also can be generic class. Then, implement necessary methods, that incorporate your business logic. Like this one, converter any enum value back and forward for TypeConverterAttribute

public class EnumValueConverter<T> : TypeConverter where T:struct
    {
        static EnumValueConverter()
        {
            if (!typeof(T).IsEnum) { Exceptions.ThrowInvalidOperationException("Cannot use this type for conversion"); }
        }

        public override bool CanConvertFrom(Type sourceType)
        {
            return Type.GetTypeCode(sourceType) == TypeCode.String;
        }

        public override object ConvertFrom(object value)
        {
            if (value == null)
            {
                typeof(T).ThrowConvertFromException(value);
            }
            if (value is string)
            {
                return ConvertFromString(value as string);
            }
            return (T)value;
        }

        public override object ConvertFromString(string text)
        {
            return (T)Enum.Parse(typeof(T), text, true);
        }

        public override string ConvertToString(object value)
        {
            return Enum.GetName(typeof(T), value);
        }
    }

Final result

Now, when we built converter and know how to use it, we can easily set it to any DependencyProperty requires conversion from / to enum

[TypeConverter(typeof(EnumValueConverter<LineStackingStrategy>))]
public LineStackingStrategy LineStackingStrategy
{
get { return (LineStackingStrategy)GetValue(LineStackingStrategyProperty); }
set { SetValue(LineStackingStrategyProperty, value); }
}

[TypeConverter(typeof(EnumValueConverter<TextAlignment>))]
[DefaultValue(TextAlignment.Right)]
public TextAlignment TextAlignment
{
get { return (TextAlignment)GetValue(TextAlignmentProperty); }
set { SetValue(TextAlignmentProperty, value); }
}

[TypeConverter(typeof(EnumValueConverter<TextWrapping>))]
public TextWrapping TextWrapping
{
get { return (TextWrapping)GetValue(TextWrappingProperty); }
set { SetValue(TextWrappingProperty, value); }
}

We done, have a nice day and be good people.

Stay tuned for release of BiDi support for Silverlight 2.0, sponsored by Development Platform Evangelism unit of Microsoft Israel

Silverlight Visual Tree Investigation

Tamir Khason — Mon, 07 Jul 2008 11:44:31 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/silverlight-visual-tree-investigation/]

Wait a moment. Silverlight has Visual and Logical Trees as well as WPF? Not exactly. The design more similar to how it was in WinForms (Parent-Child relationship). But dev team made all possible to make it syntactically similar to WPF. Let’s start

Challenge: Find and hold references to all element, contains text.

Solution: Recursive VisualTreeHelper (introduced in SL2.0 b2)

First of all we should know, that Silverlight is not ready for manufacture, thus direct references might produce memory leaks, thus we’ll use WeakReference to hold pointers to SL objects.

First step: We know for sure, that TextBox and TextBlock controls has Text property, that holds only text. Also TextBlock can hold Inlines collection with Runs and LineBreaks. Let’s find them all

internal static List<WeakReference> GetTextElements(this DependencyObject root)
        {
List<WeakReference> res = new List<WeakReference>();
if (root is TextBlock | root is TextBox)
         {
                res.Add(new WeakReference(root));
         }

Next, we know, that ContentControl can hold text directly inside Content property. We’ll find them too, but should check if it holds text inside…

else if (root is ContentControl)
            {
                (root as ContentControl).CheckAndAddStringContentControl(ref res);
            }

Now ItemsControl. It can hold inside either ContentElement, TextBox, TextBlock or other. So we should check inside it too.

else if (root is ItemsControl)
            {
                ItemsControl ic = root as ItemsControl;
                for (int i = 0; i < ic.Items.Count; i++)
                {
                    if (ic.Items[i] is ContentControl)
                    {
                        (ic.Items[i] as ContentControl).CheckAndAddStringContentControl(ref res);
                    }
                    else
                    {
                        List<WeakReference> tmp = (ic.Items[i] as DependencyObject).GetTextElements();
                        if (tmp != null && tmp.Count > 0)
                        {
                            res.AddRange(tmp);
                        }
                    }
                }
            }

And last, but not least is to dig into all child of each control.

else
            {
                int cnt = VisualTreeHelper.GetChildrenCount(root);

                for (int i = 0; i < cnt; i++)
                {
                    DependencyObject d = VisualTreeHelper.GetChild(root, i);
                    List<WeakReference> tmp = d.GetTextElements();
                    if (tmp != null && tmp.Count > 0)
                    {
                        res.AddRange(tmp);
                    }

                }
            }
            return res;

Step two: Check whether object contains text inside. This one is simple. If not, we’ll call the main method to inter inside the control and check deeper.

internal static void CheckAndAddStringContentControl(this ContentControl cc, ref List<WeakReference> res)
        {
            if (cc.Content is string)
            {
                res.Add(new WeakReference(cc));
            }
            else
                res.AddRange(cc.GetTextElements());
        }

We done. Now we have WeakReferences collection of all items, which contains text in our page.

Have a good day and be nice one to another.

Quick Silverlight Tip: How to access HTML DOM from Silverlight and Silverlight managed objects from HTML?

Tamir Khason — Tue, 01 Jul 2008 16:56:33 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/quick-silverlight-tip-how-to-access-html-dom-from-silverlight-and-silverlight-managed-objects-from-html/]

After my session yesterday, I got number of email from people, who have a problem to access HTML DOM from Silverlight and vice verse. I want to answer to all of you by this post.

Access HTML from Silverlight

You have not do anything special in Silverlight to access it. Your friend is HtmlPage.Window object. For example, if I want to execute window.open JavaScript method from Silverlight, all I have to do is to call:

public void OpenWindow()

{

HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });

}

HtmlPage.Window.Invoke also returns Object – this is the response of function executed.

Access Silverlight Managed Objects from HTML

Here you should remember two things:

You should mark both class and member you want to access with special attributes ScriptableType (for class) and ScriptableMember (for member)
Register Scriptable object anywhere (for example in Constructor).

So, if you want OpenWindow method to be exposed from the Page class to HTML, you should use following code:

    [ScriptableType]
public partial class Page : UserControl    {
public Page() {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("Page", this);
        }

[ScriptableMember]
public void OpenWindow() {
object o = HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });
        }
}

That’s all, folks. Be good people and have a nice day.

Here the script of test application:

Page.xaml

<UserControl x:Class="DomAccessDemo.Page"

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

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

Height="20">

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

<Button Click="Button_Click" Content="Fun!"/>

</Grid>

</UserControl>

Page.xaml.cs

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 System.Windows.Browser;

using System.ComponentModel;

namespace DomAccessDemo

{

    [ScriptableType]

public partial class Page : UserControl

    {

public Page()

        {

            InitializeComponent();

HtmlPage.RegisterScriptableObject("Page", this);

        }

private void Button_Click(object sender, RoutedEventArgs e)

        {

            OpenWindow();

        }

        [ScriptableMember]

public void OpenWindow()

        {

object o = HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });

        }

    }

}

DomAccessDemoTestPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

<head runat="server">

<title>Test Page For DomAccessDemo</title>

<script language="javascript">

function testSL()

        {

var xaml = document.getElementById("Xaml1");

            xaml.Content.Page.OpenWindow();

        }

</script>

</head>

<body style="height:100%;margin:0;">

<form id="form1" runat="server" style="height:100%;">

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div style="height:100%;">

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/DomAccessDemo.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

</div>

</form>

<button onmouseup="testSL();">Test</button>

</body>

</html>

How to consume WCF or Webservice from Vista Sidebar gadget by using Silverlight?

Tamir Khason — Tue, 24 Jun 2008 01:37:10 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/how-to-consume-wcf-or-webservice-from-vista-sidebar-gadget-by-using-silverlight/]

The challenge today is really simple. All we have to do is to write Silverlight Vista Sidebar Gadget, that consumes either WCF, ASMX or REST based service. Really simple, isn’t it? Let’s start

Build server side services

We should start from services. This is very straight forward mission. Here the logic I want to implement

public string Echo(string input)
    {
        return string.Format("ACK from {0}", input);
    }

Well, WCF? We should mark service and operation contracts. That’s all

[ServiceContract(Namespace = "")]
public class EchoService
{
    [OperationContract]
    public string Echo(string input)
    {
        return string.Format("ACK from WCF with {0}", input);
    }

}

This does not works. Why? Silverlight knows only consumes ASP.NET compatible (simplified) web services, thus we should add following attribute to the our class attributes collection

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class EchoService
{

Now, the service is discoverable and accessible by Silverlight. Great news. Now let’s put it into our shared host. Hmm, we got strange error: “Deploying WCF Services: This collection already contains an address with scheme http.” What the hell is it?

This is shared hosting problem. Your host provider uses virtual IP and host addresses and has number of different web services, sitting on the same shared host. How to solve it?

Simple, all you have to do is to specify your own service host factory. Here the example of classes to put into code behind

class SLHostFactory : ServiceHostFactory
{
    protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses)
    {
        SLHost customServiceHost =
          new SLHost(serviceType, new Uri("[Your URL goes here]",UriKind.Absolute));
        return customServiceHost;
    }
}

class SLHost : ServiceHost
{
    public SLHost(Type serviceType, params Uri[] baseAddresses)
        : base(serviceType, baseAddresses)
    { }
    protected override void ApplyConfiguration()
    {
        base.ApplyConfiguration();
    }
}

And one attribute into your service tag

Factory="SLHostFactory"

Now it works. So what’s next? Build ASMX web service. This is even simpler

[WebMethod]
public string Echo(string input)
{
return string.Format("ACK from web service with {0}", input);
}

We done, now either WCF and Web services are accessible from your Silverlight application. So, add Service reference and consume it

Building client side

Inside code behind of your Silverlight project, you should define two proxies – one for Web Service and another for WCF service. Bother services implements the same interface, so it should not be a problem

ServerEcho.EchoServiceClient proxy;
WebServiceEcho.EchoWebServiceSoapClient wsProxy;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    proxy = new ServerEcho.EchoServiceClient();
    proxy.EchoCompleted += new EventHandler<ServerEcho.EchoCompletedEventArgs>(proxy_EchoCompleted);

    wsProxy = new SLGadget.WebServiceEcho.EchoWebServiceSoapClient();
    wsProxy.EchoCompleted += new EventHandler<SLGadget.WebServiceEcho.EchoCompletedEventArgs>(wsProxy_EchoCompleted);
}

Silverlight work only asynchronously, thus you should begin to understand, that synchronous programming is for pussies :). Consume it

private void WCF_Click(object sender, RoutedEventArgs e)
        {
            proxy.EchoAsync(txt.Text);
        }

        private void WS_Click(object sender, RoutedEventArgs e)
        {
            wsProxy.EchoAsync(txt.Text);
        }

And Update output

void wsProxy_EchoCompleted(object sender, SLGadget.WebServiceEcho.EchoCompletedEventArgs e)
        {
            txt.Text = e.Error == null ? e.Result : (e.Error.InnerException != null ? e.Error.InnerException.ToString() : e.Error.Message);
        }

        void proxy_EchoCompleted(object sender, ServerEcho.EchoCompletedEventArgs e)
        {
            txt.Text = e.Error == null ? e.Result : (e.Error.InnerException != null ? e.Error.InnerException.ToString() : e.Error.Message);
        }

Now let’s run it. What? Another error? Security? Access denied? Of cause you have no crossdomain.xml.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*" />
</cross-domain-policy>

What? You have it and still getting the same error? Look into sniffer. You application is looking for other file, named clientaccesspolicy.xml. Why? According the documentation, you can use either… Hm, another bug with WCF consuming. Never mind, let’s put it too

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers="*">
        <domain uri="*"/>
      </allow-from>
      <grant-to>
        <resource path="/" include-subpaths="true"/>
      </grant-to>

    </policy>
  </cross-domain-access>
</access-policy>

Very well, now we are ready to run our application. It works! So, the only thing we should do is to pack it into MyGadget.gadget directory and put inside %userprofile%\appdata\local\microsoft\windows sidebar\gadgets together with gadget.xml manifest.

But… It stopped working… What’s the problem?

Very client side networking in Silverlight

The problem is, that SideBar executes it’s gadgets with local path, not with network path. Silverlight cannot use any network provider, when running locally. Why? Actually I do not know (maybe to prevent local applications development). so what to do?

Simple! Microsoft SideBar knows to run cross domain AJAX without any warnings and problems. So why not to use external XmlHttp from JavaScript for network access. Let’s do it

First we should initialize XMLHttpRequest object in JavaSctipt

var xObj;
        function getEchoWCF(text) {
            if(xObj == null) {
                xObj = new XMLHttpRequest();
                }
            else if(xObj) {
                xObj.abort();
            }

Then create SOAP request to WCF or WebService

var sURL = "[Path yo your service]";
            //Build SOAP
            var sReq = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body><Echo><input>"+text+"</input></Echo></s:Body></s:Envelope>";
            xObj.open("POST", sURL, true);
            xObj.setRequestHeader( "Content-Type", "text/xml; charset=utf-8" );
            xObj.setRequestHeader( "Cache-Control", "no-cache" );
…
xObj.send(sReq);

After the request created and send we should handle result. So we need an access from HTML page, hosting Silverlight object to Silverlight. Simple. “ScriptableMember - ScriptableType”, remember?

[ScriptableType]
public partial class Page : UserControl
{
…

[ScriptableMember]
public void UpdateResponse(string result)
{

Now return the result

xObj.onreadystatechange = function() {
            if (xObj.readyState === 4) {
                if (xObj.status && xObj.status === 200) {
                    var control = document.getElementById("silverlightControl");
                    control.Content.Page.UpdateResponse(xObj.responseText);
                }
            }

But this is not enough. We also should know to call Javascript from Silverlight… This is really simple

private void JS_Click(object sender, RoutedEventArgs e)
        {
            HtmlPage.Window.Invoke("getEchoWCF", txt.Text);
        }

We done. Now you can pack your Silverlight control, together with hosting HTML and Javascript into windows sidebar gadget and use it even with external network support.

Have a good day and be nice people.

UserControl binding to own property bug in Sliverlight 2.0 beta 2

Tamir Khason — Mon, 16 Jun 2008 13:18:59 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/usercontrol-binding-to-own-property-bug-in-sliverlight-20-beta-2/]

Today morning, I come to my office. Alex, sitting there, was very tired. His eyes were red. I asked him: “What’s going on?” and he responsed: “I think, I’m sick. Something is broken in Silverlight”. “What’s the problem?” – I asked. And he explained me, that he want to create UserControl with some properties. Let’s say something like this:

<UserControl x:Class="SilverlightControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="Hello, World" Name="tb" FontSize="{Binding MySize}"/>
    </Grid>
</UserControl>

Where MySize is internal dependency property of the SilverlightControl1. Now you’re going to your application and consuming your new control.

<l:SilverlightControl1 x:Name="kuku" MySize="40"/>

This does not work. Maybe the problem is DataContext? Let’s set DataContext of UserControl to itself

public SilverlightControl1()
        {
            InitializeComponent();
            this.DataContext = this;
        }

Ups… “An unhandled exception of type 'System.StackOverflowException' occurred in System.Windows.dll”. Well, why binding does not happens?

Maybe the problem is binding? Let’s try to explicitely bind to it property.

Binding b = new Binding("MySize");
b.Source = this;
tb.SetBinding(TextBlock.FontSizeProperty, b);

Nothing happens. Where to dig? Maybe notification changes not happen? Let’s add INotifyPropertyChanged notification

public double MySize
        {
            get { return (double)GetValue(MySizeProperty); }
            set { SetValue(MySizeProperty, value); PropertyChanged(this,new PropertyChangedEventArgs("MySize"));}
        }

Now it works, but what will happen if we’ll remove explicit binding? Nothing this does not work. What’s the problem?

The problem is bug in Silverlight 2.0 beta 2. To workaround it, you can either use explicit binding inside the usercontrol, or (like me) create external data class and bind to this class.

public class MyData : INotifyPropertyChanged
{
    public double MySize
    {
        get { return m_MySize; }
        set
        {
            m_MySize = value;
            OnPropertyChanged("MySize");
        }
    }

    double m_MySize = default(double);

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(name));
    }

    #endregion
}

Create DataContext

MyData d;
       public SilverlightControl1()
       {
           d = new MyData();
           InitializeComponent();
           this.DataContext = d;

And then, extern the property to the control

public double MySize
        {
            get { return d.MySize; }
            set { d.MySize = value; }
        }

We done. Hope this nasty bug will be fixed in RTM version of Silverlight. Have a good day and be nice people.

Have a nice day to Alex to. Do not try to understand what’s problem with your code, when working with beta version of any framework. First check alternatives.

Quick Silverlight tip: How to open new window or tab by using HyperlinkButton and Ctrl-Shift modifiers

Tamir Khason — Mon, 26 May 2008 14:07:43 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/quick-silverlight-tip-how-to-open-new-window-or-tab-by-using-hyperlinkbutton-and-ctrl-shift-modifiers/]

Regular behavior of any HTML anchor element is to open new Window if you’re clicking the link with Shift key and new Tab, if you’re clicking with Ctrl key or middle mouse button. Unfortunately, Silverlight HyperlinkButton does not support opening new window or tab. It also does not support key modifiers. What to do?

(rotary reading desk – first tabbed browser, invented in 1588. via Athanasius Kircher society)

First of all, request this feature. This is regular behavior and there is no reason not to support it in Silverlight. Next, we should do something to fix it by now. So let’s start.

We should understand what happens under the hoods of HyperlinkButton. It does not generate html anchor, however it uses window.navigate to move. One of HyperlinkButton properties is TargetName – this one is actually html ”target” attribute. So we can just change it according the keystrokes. This is acceptable, but ugly solution. The better one is to subclass HyperlinkButton and check KeyModifiers. Then void Click event and navigate

if(Keyboard.Modifiers == ModifierKeys.Control | Keyboard.Modifiers == ModifierKeys.Shift)
            {
                this.TargetName=”_blank”;
            }
            base.OnClick();

So far so good, but not good enough. What will happen if user explicitly set TargetName Value? We’ll override it and this is something we wont to do. Also, following approach will work differently between browsers. For example in IE it will open new window, while in FF – new tab by default. So how to avoid it?

We can use HtmlPage.Window.Navigate method to assure opening of new window. Navigate method receives three parameter, Uri for navigation address, target frame and “target features”. What are those target features? Actually, it parameters we’re using in JavaScript for window.open method. Thus HtmlPage.Window.Navigate(new Uri(“http://blogs.microsoft.co.il/blogs/tamir”,null,”menubar=1,resizable=1,width=350,height=250”) will open resizable window with menubar and size of 350x250.

Very well. Now we almost finished, but how to assure, that I opened new tab? Actually, we cannot until all browsers will support CSS3. In CSS3 we have style attributes, which can target into tab or window. By now, the only workaround is to use IWebBrowser2::Navigate2 method for IE and pass 0x1000 (navOpenInBackgroundTab) as second parameter. This “heck” can only be done in Full trust mode. For Mozilla (FireFox or any Geco + ancestors) we should use nsIBrowserWindow::OPEN_NEWTAB override for nsIBrowserWindow::OPEN_NEWWINDOW. There is no known way to do it for Safari.

So, the best thing can be done is inheritance of build-in feature of any supported browser to handle Ctrl/Shift modifiers for force opening links in other tabs or new windows.

Have a nice week and be good people.

How to AddRange/RemoveRange in Silverlight ObservableCollection?

Tamir Khason — Tue, 13 May 2008 16:13:00 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/how-to-addrangeremoverange-in-silverlight-observablecollectiont/]

Someone in Silverlight forum asked for interesting question: “Is there any way that I can add/remove items in bulk from an ObservableCollection object?”. The “formal” answer is: “No, AddRange RemoveRange operators are supported for List<T> only collections, thus each time you want to add or remove items from ObservableCollection, you should iterate through all items, thus CollectionChanged event will be fired each time you add or remove anything”. By the way, we have the same problem with WPF ObservableCollection<T>

Is there way to fix it? Yes, it is. However, not sure, that it is very efficient method.

We can subclass ObservableCollection and defer OnCollectionChanged method from firing Collectionchanged event for each add or remove items. Here how to do it

First of all create our own class, that inherits ObservableCollection<T>

public class BulkObservableCollection<T>:ObservableCollection<T>
{

then create two methods and one member for bulk update. At the end of the update we should "tell” our collection, that it dramatically changed, thus we’ll class OnCollectionChanged with NotifyCollectionChangedAction.Reset argument.

bool deferNotification = false;
        public void AddRange(IEnumerable<T> collection)
        {
            deferNotification = true;
            foreach (T itm in collection)
            {
                this.Add(itm);
            }
            deferNotification = false;
            OnCollectionChanged(new System.Collections.Specialized.NotifyCollectionChangedEventArgs(System.Collections.Specialized.NotifyCollectionChangedAction.Reset));
        }

        public void RemoveRange(IEnumerable<T> collection)
        {
            deferNotification = true;
            foreach (T itm in collection)
            {
               this.Remove(itm);
            }
            deferNotification = false;
            OnCollectionChanged(new System.Collections.Specialized.NotifyCollectionChangedEventArgs(System.Collections.Specialized.NotifyCollectionChangedAction.Reset));
        }

Now, the only thing to do is to override OnCollectionChanged method to involve deferNotification flag

protected override void OnCollectionChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
       {
           if (!deferNotification)
           {
               base.OnCollectionChanged(e);
           }
       }

We done, so for 500 items bulk update this method works very fast, however what’s happen with 1000 items?

Not so good. When collection Dramatically changed renderring engine regenerates all items in bounded controls. Thus it will be almost the same time as for regular one-by-one method.

Things even worth with more, then 2000 items. If we already have 1500 items in our collection and adding another 500 items, we’ll regenerate all 2000 items by calling OnCollectionchnaged with Reset params. So it twice slower, then adding items one-by-one.

What to do? Work smart – add bulks when requires and single items when the collection is big. Have a nice day and be good people.

Source code for this article

ObservableCollectionAddRange.zip [317.7 Kb]

DrawingBrush and deep clone in Silverlight

Tamir Khason — Wed, 07 May 2008 00:45:14 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/drawingbrush-and-deep-clone-in-silverlight/]

Today, we’ll say “They did not put it there” as lot. And start with DrawingBrush. Yes, there is no Drawing Brush in Silverlight, thus you cannot create neither hatch brush nor pattern brush in Silverlight. But we want it to be there. What to do? To enter into deep reflection

first thing to do is to look into Reflector. How they did another brushes… What’s the mess?

DependencyProperty.RegisterCoreProperty(0x5ef4, typeof(double));

Now very helpful. At least we know that we have TileBrush (one helpful property – Tile). What’s next? Let’s try to understand how DrawingBrush should work. Actually, it should draw our control on other surface. We cannot do this – drawing in Silverlight uses internal unmanaged methods from core dll. But we can try copy actual controls. what’s the problem? Let’s do it.

First of all, we should get the content of our UserControl – WPF, Content property of UserControl is internal! Why? “They did not put it there” (second time) Also we do not know externally when all UIElement loaded. Why? you know, ‘cos no Loaded accessible externally. “They did not put it there”. I do not want to write every time the same code, so the only way to get the content is to seek by name. But we do not know what the name of controls! Reflection! We’ll get all fields of our root control and then look for every panel

How to get and set Content property of Page (UserControl) externally.

FrameworkElement root = Application.Current.RootVisual as FrameworkElement;

FieldInfo[] fields = root.GetType().GetFields(BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.DeclaredOnly);
            for (int i = 0; i < fields.Length; i++)
            {
                if (fields[i].FieldType.IsSubclassOf(typeof(Panel)))
                {
                    Panel p = fields[i].GetValue(root) as Panel;
                    SetPattern(p);
                }
            }

Well, now we can get the panel and just replace Background property (the usual place of brushes) and Children property (to add actual controls inside the panel

if (p.Background == this)
            {
                p.Background = null;

                SetPatternImpl(p.ActualWidth, p.ActualHeight);

                p.Children.Insert(0, Pattern);
            }
            else if (this.Pattern!=null && p.Children.Contains(this.Pattern))
            {
                SetPatternImpl(p.ActualWidth, p.ActualHeight);
            }

Good. Now we should multiply the control. Let’s go old good WPF way and clone by using XamlReader/XamlWriter solute. WTF? There is no XamlWriter in Silverlight - “They did not put it there”. What to do? Clone ‘em all!

How to clone objects in Silverlight without XamlWriter

We need reflection. A lot of reflection, so we’ll create extended method for DependencyObject type, that clone for us the objects without XamlWriter. First of all we should create new instance of target class

public static T Clone<T>(this T source) where T : DependencyObject
        {
            Type t = source.GetType();
            T no = (T)Activator.CreateInstance(t);

Then travel recursively inside the type get all DependencyProperties and DependencyObjects. We need DependencyProperty to use system setter and DependencyObjects to clone them too. What is DependencyProperty from reflection point of view? It’s Static, Public and not Public ReadOnly Field. So, we’ll look for those.

Type wt = t;
            while (wt.BaseType != typeof(DependencyObject))
            {
                FieldInfo[] fi = wt.GetFields(BindingFlags.Static | BindingFlags.Public);
                for (int i = 0; i < fi.Length; i++)
                {
                    {
                        DependencyProperty dp = fi[i].GetValue(source) as DependencyProperty;

Now all values of Dependency Properties are Dependency Objects or it’s ancestors, so we should be very smart (also we do not want NameProperty of cause)

if (dp != null && fi[i].Name != "NameProperty")
                        {
                            DependencyObject obj = source.GetValue(dp) as DependencyObject;
                            if (obj != null)
                            {
                                object o = obj.Clone();
                                no.SetValue(dp, o);
                            }
                            else
                            {

Also, there are some DependencyProperties, that we cannot set. How to detect them? Inside DependencyProperty class there are only two methods (Register and RegisterAttached) and no fields. Why there is no IsReadOnly (or something) property? “They did not put it there”. As well as we cannot know what the target type of the property. Another “They did not put it there”. So, we should do it manually

else
                            {
                                if(fi[i].Name != "CountProperty" &&
                                    fi[i].Name != "GeometryTransformProperty" &&
                                    fi[i].Name != "ActualWidthProperty" &&
                                    fi[i].Name != "ActualHeightProperty" &&
                                    fi[i].Name != "MaxWidthProperty" &&
                                    fi[i].Name != "MaxHeightProperty" &&
                                    fi[i].Name != "StyleProperty")
                                {
                                    no.SetValue(dp, source.GetValue(dp));
                                }
                            }

And recursive call at the end

wt = wt.BaseType;
}

Now we have all Dependency Properties. What’s about regular CLR properties? We need them too. Let’s grab it

PropertyInfo[] pis = t.GetProperties();
            for (int i = 0; i < pis.Length; i++)
            {

                if (
                    pis[i].Name != "Name" &&
                    pis[i].Name != "Parent" &&
                    pis[i].CanRead && pis[i].CanWrite &&
                    !pis[i].PropertyType.IsArray &&
                    !pis[i].PropertyType.IsSubclassOf(typeof(DependencyObject)) &&
                    pis[i].GetIndexParameters().Length == 0 &&
                    pis[i].GetValue(source, null) != null &&
                    pis[i].GetValue(source,null) == (object)default(int) &&
                    pis[i].GetValue(source, null) == (object)default(double) &&
                    pis[i].GetValue(source, null) == (object)default(float)
                    )
                    pis[i].SetValue(no, pis[i].GetValue(source, null), null);

This will work fine for regular properties, but not for lists. There we should Add()/Get()/Remove() Items we cannot just set them. what’s the problem?

else if (pis[i].PropertyType.GetInterface("IList", true) != null)
                {
                    int cnt = (int)pis[i].PropertyType.InvokeMember("get_Count", BindingFlags.InvokeMethod, null, pis[i].GetValue(source, null), null);
                    for (int c = 0; c < cnt; c++)
                    {
                        object val = pis[i].PropertyType.InvokeMember("get_Item", BindingFlags.InvokeMethod, null, pis[i].GetValue(source, null), new object[] { c });

                        object nVal = val;
                        DependencyObject v = val as DependencyObject;
                        if(v != null)
                            nVal = v.Clone();

                        pis[i].PropertyType.InvokeMember("Add", BindingFlags.InvokeMethod, null, pis[i].GetValue(no, null), new object[] { nVal });
                    }
                }

Very well. Now we have our brand new clones ready for reuse. All we have to do is to add and layout them.

void SetPatternImpl(double width, double height)
        {
            Pattern = new WrapPanel();
            Pattern.Width = width;
            Pattern.Height = height;
            Pattern.HorizontalAlignment = HorizontalAlignment.Stretch;
            Pattern.VerticalAlignment = VerticalAlignment.Stretch;

            double xObj = (1 / this.Viewport.Width);
            double yObj = (1 / this.Viewport.Height);

            for (int i = 0; i < Math.Ceiling(xObj*yObj); i++)
            {
                Shape ns = this.Drawing.Clone();
                ns.Stretch = this.TileMode == TileMode.None?Stretch.None:Stretch.Fill;
                ns.Width = Pattern.Width / xObj;
                ns.Height = Pattern.Height / yObj;
                ScaleTransform st = new ScaleTransform();
                st.ScaleX = this.TileMode == TileMode.FlipX | this.TileMode == TileMode.FlipXY ? -1 : 1;
                st.ScaleY = this.TileMode == TileMode.FlipY | this.TileMode == TileMode.FlipXY ? -1 : 1;
                ns.RenderTransform = st;
                Pattern.Children.Add(ns);
            }
        }

We done. How to use our bush? Simple, with regular Xaml syntax

<Grid x:Name="LayoutRoot" Width="300" Height="300">
        <Grid.Background>
            <l:DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                <l:DrawingBrush.Drawing>
                    <Path Stroke="Black" Fill="Red" StrokeThickness="3">
                        <Path.Data>
                            <GeometryGroup>
                                <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
                                <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
                            </GeometryGroup>
                        </Path.Data>
                    </Path>
                </l:DrawingBrush.Drawing>
            </l:DrawingBrush>
        </Grid.Background>
        <Canvas Width="150" Height="150" x:Name="canvas">
            <Canvas.Background>
                <l:DrawingBrush Viewport="0,0,0.1,0.1" TileMode="FlipX">
                    <l:DrawingBrush.Drawing>
                        <Polygon Fill="Blue" Points="0,0 1,1 1,0 0,1"/>
                    </l:DrawingBrush.Drawing>
                </l:DrawingBrush>
            </Canvas.Background>
            <TextBox Foreground="Yellow" Background="#AA000000" Text="Hello, World!" Height="30"/>

        </Canvas>
    </Grid>

I used my WrapPanel within this sample. It’s easy to build custom controls in Silverlight, much easier, then Brushes. Why? Because “They did not put it there”.

How to build layout control in Silverlight

Really simple. 1 – subclass panel

public class WrapPanel : Panel
{

Override MeasureOverride

protected override Size MeasureOverride(Size availableSize)
{
    foreach (UIElement child in Children)
    {
        child.Measure(new Size(availableSize.Width, availableSize.Height));
    }

    return base.MeasureOverride(availableSize);
}

Then ArrangeOverride and you done!

protected override Size ArrangeOverride(Size finalSize)
        {

            Point point = new Point(0, 0);
            double maxVal = 0;
            int i = 0;

            if (Orientation == Orientation.Horizontal)
            {
                double largestHeight = 0.0;

                foreach (UIElement child in Children)
                {

                    child.Arrange(new Rect(point, new Point(point.X + child.DesiredSize.Width, point.Y + child.DesiredSize.Height)));

                    if (child.DesiredSize.Height > largestHeight)
                        largestHeight = child.DesiredSize.Height;

                    point.X = point.X + child.DesiredSize.Width;

                    if ((i + 1) < Children.Count)
                    {
                        if ((point.X + Children[i + 1].DesiredSize.Width) > finalSize.Width)
                        {
                            point.X = 0;
                            point.Y = point.Y + largestHeight;
                            maxVal += largestHeight;
                            largestHeight = 0.0;
                        }
                    }

                    i++;

                }
                if (AllowAutosizing)
                {
                    finalSize.Height = maxVal;

                    //this is ugly workaround, 'cos ScrollViewer uses Height property instead of ActualHeight
                    if (this.Height != maxVal)
                        SetValue(HeightProperty, maxVal);
                }
            }
            else
            {
                double largestWidth = 0.0;

                foreach (UIElement child in Children)
                {
                    child.Arrange(new Rect(point, new Point(point.X + child.DesiredSize.Width, point.Y + child.DesiredSize.Height)));

                    if (child.DesiredSize.Width > largestWidth)
                        largestWidth = child.DesiredSize.Width;

                    point.Y = point.Y + child.DesiredSize.Height;

                    if ((i + 1) < Children.Count)
                    {
                        if ((point.Y + Children[i + 1].DesiredSize.Height) > finalSize.Height)
                        {
                            point.Y = 0;
                            point.X = point.X + largestWidth;
                            maxVal += largestWidth;
                            largestWidth = 0.0;
                        }
                    }

                    i++;
                }
                if (AllowAutosizing)
                {
                    finalSize.Width = maxVal;

                    //this is ugly workaround, 'cos ScrollViewer uses Width property instead of ActualWidth
                    if (this.Width != maxVal)
                        SetValue(WidthProperty, maxVal);
                }
            }

            return base.ArrangeOverride(finalSize);
        }

We done. Here how it looks like. Have a nice day and be good people

Live preview is here. Visit blog to see it live!

This is not final control, there are some limitations

It works with Panels only
It does not layout (thus you cannot use it with StackPanel for example)
You should name hosting control (I explained why)
For drawings inside DrawingBrush you can use only Shape derived classes (e.g. Line, Polygon, Ellipse, Path etc)

You are more, then welcome to enhance this control, ‘cos it does not looks like Microsoft going to have DrawingBrush in RTM of Silverlight. The only request is – submit and share your enhancements to help all other developers and make their live easier with this necessary control. Source code for this article

DrawingBrush.zip [341.9 Kb]

Stand alone multiplatform Silverlight application

Tamir Khason — Fri, 02 May 2008 18:38:32 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/stand-alone-multiplatform-silverlight-application/]

Recently we spoke about running Silverlight application as client side only stand alone application. I used WebBrowser, MSHTA and Silverlight OCX with a little bit interop to make it running. In comments, Laurent Bugnion show me his method, that was pretty similar to mine, except the fact, that he used managed code to access file system. But more interesting comment come from Christophe Lauer, who tried to run Silverlight as completely stand alone application, by using Cassini embedded into windows application, that actually represents web server for Silverlight hosting.

Inspired by this idea, I decided to implement my own small web server suitable to Silverlight hosting and embed it into my application. Then, compile and run it on Linux. That’s the result – It’s working!

How to do this? Simple – we have a lot of handy classes in C# in order to make small web server, that only knows to dispatch static files with appropriate mime types. Here we go. First of all, we’ll create simple WinForms application, that has WebBrowser inside it. Then we’ll use TcpListener to create our server socket and give it’s local address to embedded web browser, that will create requests.

listener = new TcpListener(IPAddress.Any, port);
listener.Start();
BeginGetReponse(null);
webBrowser1.Url = new Uri(string.Format("http://localhost:{0}",port));

Now, we should start listening and one got request, response it

void BeginGetReponse(IAsyncResult ar)
       {
           try
           {
               if (ar == null)
               {
                   listener.BeginAcceptSocket(BeginGetReponse, null);
                   return;
               }
               Socket socket = listener.EndAcceptSocket(ar);
               if (socket.Connected)
               {
                   byte[] inbuffer = new byte[1024];
                   int br = socket.Receive(inbuffer);
                   string req = Encoding.ASCII.GetString(inbuffer, 0, br);

How could we know what file to dispatch? See http header of cause. (Note – this is ugly, quick and dirty solution only for POC)

string s = req.Split(' ')[1];
                    string send = string.Empty;
                    string mime = "text/html";

                    if (s == "/")
                    {
                        send = Resources.Default;
                    }
                    else if (s == "/Page.xaml")
                    {
                        send = Resources.Page;
                        mime = "application/xaml+xml";
                    }

How we have to create the same header our self and response with content

const string httpHeader = "HTTP/1.1 200 OK\r\nServer: WeirdThing1.1\r\nContent-Type: {0}\r\nAccept-Ranges: bytes\r\nContent-Length: {1}\r\nConnection: Close\r\n\r\n{2}";
…

byte[] data = Encoding.ASCII.GetBytes(send);
byte[] resp = Encoding.ASCII.GetBytes(string.Format(httpHeader, mime, data.Length, send));
br = socket.Send(resp);

We done. Now it works in Windows, but will it work in Linux? Let’s see…

First of all we have to add libgluezilla package to be able to use WebBrowser in mono. This is Gecko engine, that clues base browser core into Winforms. Very cool. That’s all we need. Right now we can just run our application “as-is” by using mono prompt and it will work.

The only small problem, that Moonlight plugin does not know, that it can run on Gecko (it is not FireFox). But small woodoo with it’s sources solves the problem. And now we can either continue to run it as it (with mono prompt) or compile it by using NAnt to work natively.

From here, as you, probably understand, the sky is the limit – create 1 socket by using C++ and run it whenever Silverlight can run. Also, you can even use Windows 2008 core (it has small IIS inside) to run it.

Have a nice day and be good people. Source code for this article.

ClientSL.zip [43.9 Kb]

How to make Silverlight be AiR?

Tamir Khason — Mon, 28 Apr 2008 00:29:02 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/how-to-make-silverlight-be-air/]

Today we’ll speak about three issues

How to make Silverlight application to run as stand alone application and how to insert this application inside your application?
How to escape Silverlight from it’s sand box (how to make it run in full trust mode)
When first two items done, how to make Silverlight to access anyfile in your file system?

Looks scary? Let’s see first reasons for those “hackery” targets. The main reason is to make Silverlight Air (you, probably understand what I’m speaking about :)). Why? When I want to build Silverlight Image Upload control. The one similar to those Yahoo, Facebook and many others have. With live preview, editing (before uploading), drag and drop, etc. Yes, I do not want ugly File Open dialog from Silverlight. I want it sexy, yet functional! To do this, we have to make Silverlight be able to access filesystem. Of cause I want to ask user to authorize me first, then I can get an access.

The other reason is to incorporate Silverlight control inside WinForms application. Why? There are some reasons - “light weigh stuff”, maybe :). Maybe banner ads inside desktop application. It’s just cool :). Well, there are some other more serious reasons. So let’s start.

First task – to make it run as stand alone application.

Well, this one is easy. All you have to do is to have WebBrowser control with Silverlight content inside it in your application. So,

WebBrowser wb = new WebBrowser();
wb.Parent = panel1;
wb.Dock = DockStyle.Fill;
wb.Url = new Uri("http://0x15.net/play/SLFindResource/SLFindResource.html");

We done. But we’re in desktop, thus I want it full trust… This is most interesting part of today’s post.

Second task – to make it run in User Full Trust mode.

First try – to incorporate Silverlight’s OCX (ActiveX) control. Add npctrl.dll from [Program Files]\Microsoft Silverlight\[Version] – this is ActiveX and Visual Studio will create wrapper with AxHost. This one is cool, but it wont work. why? As you, probably, know Silverlight connected to it’s web page host DOM when we’re using it as stand alone player it cannot find it’s document, thus initialization failed. So what to do? What can provide me DOM from one side and run in full trust from the other side. Someone remember what HTA is (it is not mobile device, it’s very beginning of RIA era). HTML applications were run by very special host, named mshta.exe it’s in [Windows]\System32 folder and it’s still there. Everything running inside MSHTA will run by default in full trust mode. From one hand it’s regular IE, (do we have DOM), from other hand it’s make us able to run full trust internet application. Let’s use it (from code)

ProcessStartInfo mshta = new ProcessStartInfo("mshta", "http://0x15.net/play/SLFindResource/SLFindResource.html");
Process p = Process.Start(mshta);

Now we have strange window, running our Silverlight application. What’s next? Incorporate it inside our application. What’s the problem p (my process).MainWindowHandle and then SetParent for to the control I want. Well, it does not work. MSHTA has no (publicly) main window. So, we’ll find it and then change it’s parent. His class named “HTML Application Host Window Class”.

LockWindowUpdate(GetDesktopWindow());
ProcessStartInfo mshta = new ProcessStartInfo("mshta", "http://0x15.net/play/SLFindResource/SLFindResource.html");
Process p = Process.Start(mshta);
p.WaitForInputIdle();
ptr = FindWindow("HTML Application Host Window Class", null);

SetParent(ptr, panel1.Handle);
SendMessage(ptr, WM_SYSCOMMAND, SC_MAXIMIZE, 0);

LockWindowUpdate(IntPtr.Zero);

Yu-hoo. We hosted Silverlight page inside our application. It’s full trust so, we can access file system. But wait… Silverlight is not designed to have an access to the file system. The only space it can see is isolated storage, thus it has no classes for listing files anywhere. what to do?

Third task – to make it access user’s file system

We need another ActiveX to run from Javascript (or C# code) that knows to access to file system. Our hosting document can initialize it and then expose relevant methods to Silverlight. What’s such class? Let’s back to gold era of unsafe computing – we have Scripting.FileSystemObject there. This class is very dangerous it can do anything in local file system. Many system administrators using this class to script their evil login scripts (those black quick command line promps, that doing something bad to your system each time you’re logging in in your domain). It know everything about your disks and can be run from full trust environment. So, it’s just exactly what we need. Get all drives in your machine

drivetypes = [ 'Unknown', 'Removable', 'Fixed', 'Network', 'CD-ROM', 'RAM Disk' ],
driveprops = [ 'DriveLetter', 'DriveType', 'ShareName', 'IsReady', 'Path', 'RootFolder', 'FileSystem', 'SerialNumber', 'VolumeName', 'TotalSize', 'AvailableSpace', 'FreeSpace' ];

function getdrives() {
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
e = new Enumerator(fso.Drives),
add = function(i) {
   i = driveprops[i];
   var prop = f[i];
   if( ( prop || prop===0 || prop===false ) && ( i!=='AvailableSpace' || prop!==free ) ) {
    if( /(Type)$/.test( i ) ) { prop = drivetypes[ prop ]; }
    if( /(Size|Space)$/.test( i ) ) { prop = bykb( prop, true ); }
    s.push( i.toCamelCase() + ':\t' + ( i.length < 8 ? '\t' : '' ) + prop );
   }
},

Then folders

function getfolder( s ) { s = trim( s ) || 'C:';
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
e, f, i, r = [];
if( fso.FolderExists( s ) ) {
f = fso.GetFolder( s );
e = new Enumerator(f.SubFolders);
for( ; !e.atEnd(); e.moveNext() ) {
if( ( i = e.item() ) ) { r.push( ' ' + i ); }
}
e = new Enumerator(f.files);
for( ; !e.atEnd(); e.moveNext() ) {
if( ( i = e.item() ) ) { r.push( '' + i ); }
}
}
return r;
}

And files at the end

function getfile( form ) {
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
forReading = 1, forWriting = 2, forAppending = 8,
dd = function( o, s ) {
   try {
    s = f[s] + '';
    o.value = s.replace( /^(\w{3}) (\w+) (\d\d?) ([\d:]+) ([\w+]+) (\d+)$/, '$3 $2 $6 $4' );
   } catch(e) {
    o.value = e.message;
   }
},

Very cool we have files by using f = fso.GetFile( name ); method, now we can do anything with it. For example get or set attributes f.attributes, or rename f.Name = s, or, even delete it f.Delete(); Isn’t it really evil?

We done. Now you can run Silverlight as full trust desktop application and, even host it wherever you want. Even inside calculator…

ProcessStartInfo calc = new ProcessStartInfo("calc");
using (Process p = Process.Start(calc))
{
    p.WaitForInputIdle();
    SetParent(ptr, p.MainWindowHandle);
    SendMessage(ptr, WM_SYSCOMMAND, SC_MAXIMIZE, 0);
    p.WaitForExit();
}

Happy programming and be good people.

SilverForms.zip [53.7 Kb]

FindResource replacement and how to change control style more then once in Silverlight 2.0 application

Tamir Khason — Wed, 26 Mar 2008 00:24:00 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/findresource-replacement-and-how-to-change-control-style-more-then-once-in-silverlight-20-application/]

As deeper we’re digging in Silverlight 2.0, we finding more and more WPF things and we’re really missing in Silverlight. One of such things is FindResources.

In WPF I had Visual and Logical tree, so I was able to travel the tree to find resource I need. Let’s see an example of the application. We have one resource defined in App level

<Application.Resources>
        <Style TargetType="Button" x:Key="green">
            <Setter Property="Background" Value="Green"/>
        </Style>
</Application.Resources>

Another resources are defined in different levels of Page

<UserControl.Resources>
        <Style TargetType="Button" x:Name="red">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Style TargetType="Button" x:Name="blue">
                <Setter Property="Background" Value="Blue"/>
            </Style>
        </Grid.Resources>
        <Button Content="Click me" Click="Button_Click">
            <Button.Resources>
                <Style TargetType="Button" x:Name="yellow">
                    <Setter Property="Background" Value="#FFFFFF00"/>
                </Style>
            </Button.Resources>
        </Button>
    </Grid>

Now I want to call FindResource(“red”) and have my style ready for apply. I should not thing a lot about where the resource exists. There is no such method in Silverlight. If so, let’s see what we have. Looking in debugger I can find all my resources as members of the page.

But how to get them out? In Silverlight FrameworkElement, we have handy method named FindName. That’s exactly what we need. But how to get Application resources? Simple. Just look into it’s collection. Now, I can write small method, that help me to find resources in any level of Silverlight application.

public static object FindResource(string name)
        {
            if (App.Current.Resources.Contains(name))
            {
                return App.Current.Resources[name];
            }
            else
            {
                FrameworkElement root = App.Current.RootVisual as FrameworkElement;
                return root.FindResource(name);
            }
        }
        internal static object FindResource(this FrameworkElement root, string name)
        {
            if (root != null && root.Resources.Contains(name))
            {
                return root.Resources[name];
            }
            else
            {
                try
                {
                    return root.FindName(name);
                }
                catch { }
            }

            return null;

Well now we can find all our resources. Let’s apply it to elements

Style s = (Style)Helper.FindResource("red");
b.Style=s;

It works perfect. Let’s take another one

Style s = (Style)Helper.FindResource("blue");
b.Style = s;

What is it? “Catastrophic failure (Exception from HRESULT: 0x8000FFFF (E_UNEXPECTED))”. Why this happens only after applying second style? Let’s look into MSDN: “Styles are write-once in Silverlight. You can set a style to override a built-in default style, but attempting to set the same style again will result in an exception.”

What to do? We just have to write our own multi-use styling engine. First of all, we should get all setters of the style

foreach (Setter setter in value.Setters)

Then check target type and set values of setters to appropriate properties.

Type targetType = parent.GetValue(setter.Property).GetType();
parent.SetValue(setter.Property, setter.Value);

Another exception. That’s the mess? All values are strings. I need real values and I have no parsers. Fortunately, we have handy .NET method Convert.ChangeType. Let’s use it. Exception. Let’s check if the type is IConvertible (such as int, double, etc)

if(targetType is IConvertible)
            {
                return Convert.ChangeType(source, targetType, CultureInfo.InvariantCulture);
            }

No exception, but also no result. We need SolidColorBrush and we have only Color name, which is string. How to convert such string into Color instance and then into SolidColorBrush? The answer is reflection. We should write our own FromString converter. First of all let’s capitalize the string

static string Capitalize(this string str)
        {
            if (str.Length > 0)
            {
                return string.Concat(str.Substring(0, 1).ToUpper(), str.Substring(1, str.Length - 1));
            }
            return str;
        }

Then check whether I have static member with the same name in Colors class (not by hand of cause)

MemberInfo[] infos = typeof(Colors).GetMember(color.Capitalize());

If I have, let’s invoke it

if (infos.Length > 0)
            {
                return (Color)typeof(Colors).InvokeMember(color.Capitalize(), BindingFlags.Static | BindingFlags.Public | BindingFlags.GetProperty, null, null, null);
            }

Well done. Now we can use strings which have names of colors and convert them into real color. But what to do with not “well known colors”? Parse it

else if (color.IndexOf('#') == 0)
            {
                return Color.FromArgb(
                    byte.Parse(color.Substring(1, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(3, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(5, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(7, 2), NumberStyles.HexNumber));
            }

We done. Just write another attached method and use in in our converter

internal static Color ParseKnownColor(string color)
        {
            MemberInfo[] infos = typeof(Colors).GetMember(color.Capitalize());
            if (infos.Length > 0)
            {
                return (Color)typeof(Colors).InvokeMember(color.Capitalize(), BindingFlags.Static | BindingFlags.Public | BindingFlags.GetProperty, null, null, null);
            }
            else if (color.IndexOf('#') == 0)
            {
                return Color.FromArgb(
                    byte.Parse(color.Substring(1, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(3, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(5, 2), NumberStyles.HexNumber),
                    byte.Parse(color.Substring(7, 2), NumberStyles.HexNumber));
            }
            return Colors.White;
        }
……

else if(targetType == typeof(SolidColorBrush))
            {
                return new SolidColorBrush(ParseKnownColor(source));
            }

Now you turn to continue with string to object convention for your own need. Starting today you know how to do it.

Here the result

&lt;noframes&gt;Here the working application and you're reading it from RSS reader. Visit the original article to see it&lt;/noframes&gt;

Have a nice day and be good people

Source code for this article>>

Networking and sockets in Silverlight 1.0 (mobile to?)

Tamir Khason — Mon, 24 Mar 2008 14:08:05 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/networking-and-sockets-in-silverlight-10-mobile-to/]

Well, well, well. Two days ago, we spoke about using sockets within Silverlight 2.0 and WPF. Today, we’ll make a step ahead and will use TCP or UDP client-server connection within Silverlight 1.0. Yes, 1.0 (the one with JavaScript only and no sockets). So, let’s start Rock ‘n Roll.

Oh, baby – it cannot be done! Just kidding :) Silverlight 1.0 itself cannot use sockets, however ASP.NET can. We’ll reuse our socket library (from the previous post) and reference it to the ASP.NET page, that hosts our Silverlight 1.0 application.

So, on page load we’ll create our client channel and fully reuse the way we worked within WPF and WinForms. The only difference is that we’ll have three static web methods within our ASP.NET C# code

[System.Web.Services.WebMethod]
    public static string GetHoursAngle()
    {
        return ((msg.Hours * 30) + (12 * msg.Minutes / 60)).ToString();
    }

    [System.Web.Services.WebMethod]
    public static string GetMinutesAngle()
    {
        return (msg.Minutes * 6).ToString();
    }

    [System.Web.Services.WebMethod]
    public static string GetSecondsAngle()
    {
        return (msg.Seconds * 6).ToString();
    }

Those methods can be used (almost) from client side. In order to do it we should register ScriptManager and enable PageMethods on the page

<form id="form1" runat="server">
<asp:ScriptManager ID="manager" EnablePageMethods="True" runat="server" />
</form>

Then, create simple Javascript to call to our web methods

<script type="text/javascript">
        function UpdateHoursHand(angle)
        {
            updateClockHand('hTransform',angle);
        }
        function UpdateMinutesHand(angle)
        {
            updateClockHand('mTransform',angle);
        }
        function UpdateSecondsHand(angle)
        {
            updateClockHand('sTransform',angle);
        }
    </script>

There is no problem to access Silverlight from the hosting webpage, so we’ll add following method to the Silverlight javascript

<script type="text/javascript">
if (!window.Silverlight1Client)
{
    Silverlight1Client = {}
}

Silverlight1Client.Page = function()
{
}
Silverlight1Client.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;
        canvas = rootElement;
    }
}

var canvas;     // the root canvas

function updateClockHand(element, value)
{
hand = canvas.findName(element);
hand.Angle = value;
}

if (!window.Silverlight)
{
    Silverlight = {};
}

Silverlight.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}

</script>

Now, we have prototype, that can access our Silverlight control, we have web methods, that can bring us information from the server side the only thing we should do is to enable server-side (where we actually receive update notification) to call client side javascript in order to update layout. And this cannot be done due to the nature of client-server web architecture.

But who told, that we cannot force client side to tickle server side upon the event? We can – not very nice solution, but it works – set timer.

function UpdateClockHands()
        {
           PageMethods.GetHoursAngle(UpdateHoursHand);
            PageMethods.GetMinutesAngle(UpdateMinutesHand);
            PageMethods.GetSecondsAngle(UpdateSecondsHand);
            setTimeout("UpdateClockHands()",1000);
        }

We add timer recursively to call client side javascript one a second and how it works.

At the end the small diamond for upcoming DEV335: Game Development Using Microsoft’s Latest Technologies…