Using Silverlight in XNA: Part II

In the previous article I have talked about how to show Silverlight pages inside XNA Window.

Now we're going deeper.

We will be integrating Silverlight & XNA.

And there will be methods of exchanging datas between 2 technologies:

ClipBoard & WCF

WCF will be explained in the next article. But we will be using ClipBoard and show how you can send and receive datas.

As Silverlight only accepts Text Messages stored on ClipBoard we will limit only sending datas between Silverlight and XNA.

Ok then lets start building our application.We will continue developing from our previous article's project.

First of all update your Silverlight Page as seen below:



Add 2 Buttons and 2 Textboxes.

1st Button(Set ClipBoard) will help us send ClipBoard and 2nd Button(Get ClipBoard) will help us to read it.

Ok.now lets write these codes on our MainPage.xaml.cs

//Button1 -> Set ClipBoard
private void button1_Click(object sender, RoutedEventArgs e)
{
  Clipboard.SetText(textBox1.Text);
}

//Button2 -> Get ClipBoard
private void button2_Click(object sender, RoutedEventArgs e)
{
  textBox2.Text=Clipboard.GetText();
}

Ok now build your application.And lets see on Web Browser(IE8):



After Clicking Set ClipBoard,we click Get ClipBoard and get our data.



Ok we have tested in Silverlight.It worked as its meant to be.Now lets copy the .xap and .html files of the Silverlight Part into XNAPart's bin->Debug folder.

After that open XNAPart Project(Game.cs)


First of all add reference to System.Drawing and then add it on reference region.

using System.Drawing;

Add some variables there:

Button btn = new Button();
TextBox text1 = new TextBox();
Label lbl = new Label();
int ct = 0;
string var_text1;

Button will send ClipBoard text by the help of Textbox control,Label will store the ClipBoard value sent from Silverlight,int ct and string var_text1 are being used for entering keys to textbox.

Update Initialize() Function as seen below:

protected override void Initialize()
{
   base.Initialize();
   browser.Width = graphics.PreferredBackBufferWidth/2;
   browser.Height = graphics.PreferredBackBufferHeight;
   browser.AllowWebBrowserDrop = true;
   browser.ScriptErrorsSuppressed = true;           
   browser.Navigate(Application.StartupPath + "/SilverlightPartTestPage.html");
   btn.Click += new EventHandler(Button1_Click);
   btn.Text = "Send Data";
   btn.Location = new System.Drawing.Point(700, 65);
   text1.Location = new System.Drawing.Point(545, 67);
   text1.Size = new Size(148, 20);
   lbl.Location = new System.Drawing.Point(650, 125);
   Control.FromHandle(Window.Handle).Controls.Add(btn);
   Control.FromHandle(Window.Handle).Controls.Add(text1);
   Control.FromHandle(Window.Handle).Controls.Add(lbl);
   Control.FromHandle(Window.Handle).Controls.Add(browser);
}

We have updated browser.width because we wanted to split it to look like 2 regions.Left side of the XNA Window will be Silverlight animation,and Right side will be XNA.

We are settings their location values.and then add to the XNA Window.

Now add a Button Click Function to send data to the Silverlight

protected void Button1_Click(Object sender, EventArgs e)
{
  Clipboard.SetText(text1.Text);
}

And then Update your "Update" function as seen below:

protected override void Update(GameTime gameTime)
{
  base.Update(gameTime);
  lbl.Text = Clipboard.GetText();
  if (text1.Focused)
  {
    ct = ct - 1;
    if (ct < 0)
    {
      ct = 5;
    }

    if (ct == 0)
    {
      KeyboardState ns = Keyboard.GetState();
      foreach (Microsoft.Xna.Framework.Input.Keys a in ns.GetPressedKeys())
      {
        var_text1 = a.ToString();
        text1.Text += var_text1;
      }
    }
   }
}

This function helps us to write keys from keyboard.Technically you cant press keys and view it on windows forms control Textbox inside XNA.Thats why we are getting all the pressed keys and add it on a string variable.There we are assigning it to our Textbox control

Plus label control updates its value -which takes it from ClipBoard.GetText()- inside Update function.

Ok thats it for now.Lets run it try to send between XNA & Silverlight.



This is how our application looks like.

Lets send values from Silverlight to XNA!



Lets click "Set ClipBoard" and see what happens!



Allright we got our data from Silverlight!

Now lets make it send data from XNA to Silverlight

Lets write something on XNA Textbox.



then click "Send Data"



OK we got it!

Using ClipBoard we have successfully sent datas from Silverlight to XNA and XNA to Silverlight.

This was just a basic sample how you can integrate XNA & Silverlight together in a project.Although ClipBoard was not a good idea to send data but it was the easiest way to do so.

So it wasnt really hard to integrate these technologies,wasnt it?

In this article we have proved that XNA and Silverlight can have the oppurtinity to work together in a single project.Although its not adviced to do so. But I will tell you in the following articles why we would want to use Silverlight in XNA?

Next article we will be using WCF to send and get datas.

So I would advice keep following me.

Have a nice day.

Cheers