(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

10 Laps around Silverlight 5 (Part 3 of 10)

(14 votes)
Michael Crump
>
Michael Crump
Joined Nov 12, 2010
Articles:   18
Comments:   17
More Articles
17 comments   /   posted on Oct 25, 2011
This article is sponsored by Telerik RadControls for Silverlight. For similarly awesome content check out Telerik XAMLflix, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code!

Tweet This!This article is Part 3 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

  • We created a sample project for Ancestor Relative Source Binding and Implicit Data Templates.
  • We took a look at other binding features that are included with Silverlight 5 and provided a definition and relevant links.

In this article, we are going to take a look at the new XNA 3D API and Improved Graphics Stack. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding - Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics [This Post] –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

What exactly is XNA?

Before we get started diving into XNA, it’s important to understand what it is first:

Microsoft XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management. XNA attempts to free game developers from writing "repetitive boilerplate code"[1] and to bring different aspects of game production into a single system.[2] 

Source: WikiPedia

As you can see XNA got it’s roots for video game development. So you may be asking, “What is it doing in Silverlight 5?” Developers have realized for a long time that things like 3D Graphics inside of a web browser would be beneficial for many applications including : medical, transportation, government and of course gaming. They requested the feature using Microsoft’s UserVoice and Microsoft added it as part of Silverlight 5. Silverlight 5 implementation of 3D is the most powerful yet running inside of a web browser.

Now that we know a little more about XNA, let’s get started…

Let’s Begin with XNA Visual Studio Templates

Creating 3D application with Silverlight 5 requires some familiarity with concepts such as vertex shaders, sprites, DrawingSurface and others. If you are like me and have a majority of your experience developing Line of Business Applications then the road to XNA will be somewhat challenging. There is good news though as the latest Silverlight 5 Toolkit provides XNA Templates. Since I assume that most readers of this series is LOB developers, we will begin with a template. You may customize the template as needed later.

Let’s get Started…

Install the Silverlight 5 Toolkit and open Visual Studio 2010 and create a new Silverlight project. You should see the following new templates.

1

Select “Silverlight 3D Application” and give it any name that you want.

You will notice when the project loads up, we will have 4 projects inside our solution.

2

Here is a breakdown of the projects:

  • Silverlight3dApp – Our main Silverlight project. (Did you notice that using this template that you did not have to select which version of Silverlight to target?)
  • Silverlight3dAppContent – The content project attached with the main Silverlight Project. It contains Microsoft.Xna.Framework.Content.Pipeline references as well as CustomEffect.slfx. This extension stands for Silverlight Effect.
  • Silverlight3dWeb – Our standard website that host the 3D Application.
  • Silverlight3dWebContent – The content project attached with the web application. It also contains Microsoft.Xna.Framework.Content.Pipeline references.

Let’s run it.

Now that we have a brief understanding of what makes up the application, let’s go ahead and run it by hitting F5. We should see the following cube rotating inside of our browser. 

3

But how exactly does this work?

Part 1: The Silverlight Application

References

The first thing that you may notice is the new references to XNA as shown below:

4

The files highlighted are not found in the standard Silverlight 5 application template. They are only added to a 3D Silverlight 5 application that uses XNA. They are necessary to perform complex calculations that things like 3D requires.

Cube.cs

If you open this class then you will see several regions such as Fields, Properties, Creation and Methods. The one that you want to pay special attention to is the “Creation” region.

Go ahead and double click on Cube.cs and expand it and you will see that it uses ContentManager to retrieve a slfx file from the content project. You can create your own silverlight effect files and add them to the ContentManager this way.

5

We won’t dive deep into these classes as we are just looking for a overview. I encourage you to review the other regions inside the Cube/Scene/VertexPositionColorNormal classes.

Scene.cs

The scene actually creates the ContentManager and registers for a size changed event to update the aspect ratio.

MainPage.xaml

The MainPage.xaml contains a new control called DrawingSurface. You can see that they only added a name and gave it an event named myDrawingSurface_Draw which we will look at in a moment.

 1: <Grid x:Name="LayoutRoot" Background="White">
 2:        <!--3D drawing surface-->
 3:        <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw"/>
 4:        <TextBlock Text="My Silverlight 3D Application" VerticalAlignment="Top" 
 5:                   HorizontalAlignment="Center" Margin="0,30" Foreground="White" 
 6:                   FontSize="40"/>
 7: </Grid>

MainPage.xaml.cs

A fairly simple class as it checks to see if the GPU is on, then creates the scene which will render in the users web browser.

 1: public partial class MainPage
 2:     {
 3:         Scene scene;
 4:  
 5:         public MainPage()
 6:         {
 7:             InitializeComponent();
 8:         }
 9:  
 10:         private void myDrawingSurface_Draw(object sender, DrawEventArgs e)
 11:         {
 12:             // Render scene
 13:             scene.Draw();
 14:  
 15:             // Let's go for another turn!
 16:             e.InvalidateSurface();
 17:         }
 18:  
 19:         private void UserControl_Loaded(object sender, RoutedEventArgs e)
 20:         {
 21:             // Check if GPU is on
 22:             if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)
 23:             {
 24:                 MessageBox.Show("Please activate enableGPUAcceleration=true on your Silverlight plugin page.", "Warning", MessageBoxButton.OK);
 25:             }
 26:  
 27:             // Create the scene
 28:             scene = new Scene(myDrawingSurface);
 29:         }
 30:     }

Part 2: The Web Application

The main thing to notice here is that the following line has been added to both the .html and .aspx pages inside of the Silverlight object data.

 

 1: <param name="enableGPUAcceleration" value="true" />

 

If this tag is missing, then Silverlight will display the following error message.

6

Also as stated earlier, we have a Silverlight3dWebContent project that includes the following references:

7

At this point, we have taken a quick look at XNA in Silverlight 5. But our journey doesn’t have to end here. Microsoft included a ton of sample projects that will get you up to speed quickly.

Sample Source Code for XNA projects.

You can find sample source code for many XNA projects located in your C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\Sep11\Source directory. Simply extract the zip file and navigate to XNA.

Conclusion

At this point, we have seen how you would use the XNA 3D API in your Silverlight 5 Applications. We have also discussed a few other features included with the improved graphic stack engine in Silverlight 5. In the next part of the series, I am going to take a look at the new media features in Silverlight 5 including: Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support and much more. Again, thanks for reading and please come back for the next part.


Subscribe

Comments

  • -_-

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by on Oct 25, 2011 21:35

    Very interesting! Te use is in any context OOB, Web, Windows Phone 7?

    If the end user has not a discrete card. Is the performance best compared with a storyboard?

  • davidjjon

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by davidjjon on Oct 26, 2011 15:11

    Awesome!

    Thank you for sharing your hard work.

    David

     

     

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 19, 2011 08:46

    i set

    <param name="enableGPUAcceleration" value="true" />

    but i am still getting Warning message,

    is my graphics card not supporting 3D?

  • mbcrump

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by mbcrump on Dec 19, 2011 16:16
    faisal3096

     What kind of Video Card do you have? You shouldn't be getting this message if you set that properly. Can you download the SL5 Toolkit and select The 3D template and hit F5 and let me know what it says?

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 19, 2011 21:12

    Dear Sir,

     It says "Please activate  enableGPUAcceleration=true on your Silverlight plugin page"

    Thanks for your kind reply, one thing more i have built in graphics card 128mb on my system, do i need to increase my graphic card memory?

     

  • mbcrump

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by mbcrump on Dec 20, 2011 21:57
     faisal3096

    What kind of browser are you using? The default template already comes with the GPU parem in the .html/.aspx page. No, you should not need to increase graphic card memory. It should work out the box on just about any GPU. 

  • faisal3096

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by faisal3096 on Dec 20, 2011 22:12

    I am using firefox 5.0, 

  • TomaszKowalczyk

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by TomaszKowalczyk on Jan 04, 2012 13:24
  • QuentinLangeveldt

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by QuentinLangeveldt on Feb 03, 2012 19:54

    When the Message appears to enableGPUAcceleration, click on OK. Then in the browser window right click and click on the Silverlight button. Go to permissions and make sure everything is enabled.

    Hope it helps someone.

  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 03:29
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 04:59
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 14:14
    The last post here is several months old, so I hope it isn't too late to make a comment. I am kind of new to Silverlight, and I don't use Windows very often, so I apologize if my question seems novice. I am also having the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error mentioned by faisal3096. Does anyone know were to find these .html and .aspx files or the object folder that mbcrump was talking about? I've looked around but I am not seeing them.
  • newbie

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by newbie on Nov 26, 2012 19:06

    OK, I found the testpage.html and the testpage.aspx, and they both have the line

    param name="enableGPUAcceleration" value="true" in them, but I am still getting the "Please activate enableGPUAcceleration=true on your Silverlight plugin page" error when I compile the project.

  • BeeOShop

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by BeeOShop on Apr 29, 2015 14:21

    Mau info toko tas online di Bandung yang menjual berbagai macam tas untuk keperluan wanita dan anak-anak seperti tas-tas wanita yang branded dari berbagai merek terkenal seperti Louis Vuitton, PradaBrussels, Furla, Chanel, Hermes, dan banyak lagi tas branded wanita lainnya dengan bermacam model seperti dompetslingbaghandbag dan tote bag, yang trendy dengan harga yang terjangkau? Silahkan cek di Bee Bagshop grosir tas online di Bandung yang menjual tas-tas dengan moel dan warna yang bervariasi dengan harga yang murah. Selain tas wanita, kami juga menjual tas sekolah anak model selempang dan ransel yang juga branded tiruan seperti jansport dan kipling dengan banyak variasi model dan warna, dijamin putra-putri anda menyukainya.

    Bagi yang ingin merawat kulit wajah tanpa harus repot dan mahal, simak tips kecantikan berikut yang mudah dan murah. Coba Sabun Amoorea. Manfaat sabun ajaib amoorea ini diantaranya untuk berbagai permasalahan kulit anda, seperti jerawat, scars (bekas jerawat), mengencangkan kulit, membuat kulit tampak lebih cerah dan segar, mengatasi lingkar hitam di bawah mata (mata panda), dll. Untuk melihat review sabun amoorea ini klik di sini. Simak juga testimoni yang sudah menggunakan sabun ini, simak selengkapnya. Meski harga sabun amoorea ini cukup terjangkau, produk ini aman, karena terbuat dari 100% bahan alami dan sudah ada ijin dari BPOM sehingga anda tidak perlu khawatir dan ragu memakainya. Jika aman (tidak berbahaya) apakah memakai sabun amoorea ada efek sampingnya? Reaksi apa yang timbul saat pertama menggunakannya? Simak info lengkapnya di sini.

    How To Get Rid Of Acne and Scars site generally tell about  tips for beauty and health skin, and especially tell anything about acne, myths, acne and scars treatments , not only on your face (including acne and scars on your body such as chest and back)which may help you to war against acne and the scars to leaves on your face and body (back and chest), through naturally, home remedies, and medical treatment. Some people believe that natural treatment is most safe. But its seems would take time longer then medical treatment. In my oppinion, using medical treatment is more effective and you'll see the result faster. To find what the best treatment for your acne, better you understand what causes of acne. The following are some factors which can cause acne: Hormones, diet, stress, medication, clothing, environment factors, genes, and cosmetics. For back or chest acne cases, it may caused by your tight clothes. To get rid of acne on back or chest, it's good to wear synthetic loose clothing, such as cotton linen, to prevent excessive rubbing and irritation on the skin. Another treatment that can help you to get rid of back or chest acne is keep your body always clean, with take a bath regularly, preferably with an anti-bacterial soap or a salicylic acid-based cleanser is highly recommended. When acne goes, it will leaves behind the red on skin, and seems impossible to heal it fast overnight. So, it would be better to do something which may offer some remarkable effects on the redness from acne. If you choose naturally treatment,  just take a cube of ice, garlic, or lemon juice mixed with rose water, choose one of them, then apply to your reddish part of your face for a while. Do this continously and measured, then see the result. Below this, some good habits which may help you to get rid of acne scars naturally and fast are: first, drinking lots of water to makes your skin well hydrated, and finally make you skin regenerate faster.  Second, eat the food that containing much the essential vitamins and mineral to help repairing scars skin from the inside. Third, naturally treatment to get rid of acne scar, by applying aloe vera on scars, may help to avoid more scarring, soothe inflamation, and make your skin keep smooth. Fourth, treat your acne scars with natural ingredient, tomato. Its containing much vitamin A, which very efficient in repairing scars skin.  If you want to get rid of acne scars ons faster than naturally or home remedies treatments, using the latest product of technology, such as laser treatment and chemical peeling, or even you can choose microdermabration that guaranteed more effective than other treatments.

    Ada banyak bermacam permasalahan kulit di wajah, salah satu yang paling menggangu adalah jerawat, apalagi jika yang muncul adalah jerawat batu yang ukurannya besar dan menyebabkan rasa sakit. Solusi mengenai berbagai cara menghilangkan jerawat batu ini banyak sekali ditemukan, mulai dari pengobatan alami, maupun secara medis. Untuk kasus jerawat batu ini, sebaiknya anda bisa mengambil tindakan pengobatan yang tepat, untuk kasus jerawat batu disarankan langsung saja ambil perawatan medis, karena beresiko tinggi meninggalkan bekas berupa bopeng di wajah, jika salah menangani. Dengan langsung mengambil tindakan medis, setidaknya akan meminimalisasi resiko timbulnya scars bopeng di wajah yang mana scars jenis ini relatif sulit dihilangkan. Tidak seperti scars berupa noda/ flek hitam. meski tidak mudah juga, namun berkali-kali lipat jauh lebih mudah dan murah dibandingkan dengan mengatasi bopeng bekas jerawat. Perawatan alami yang dapat anda tempuh untuk mengobati jerawat ataupun scars yang berupa noda hitam/ flek bekas jerawat, anda dapat mencoba dengan menggunakan bahan alami misalnya jeruk nipis atau madu yang sudah sangat terkenal khasiatnya yang untuk kesehatan dan kecantikan kulit. Dengan perawatan alami, cenderung lebih aman, hanya saja untuk perawatan ini biasanya dibutuhkan waktu yang lebih lama serta ketelatenan untuk mengatasinya. FYI, Jeruk nipis ini yang tidak hanya dapat memudarkan flek hitam di wajah, tetapi juga dapat memutihkan dan mencerahkan kulit anda. Namun jika anda tidak memiliki cukup kesabaran, sebaiknya langsung saja konsultasi dengan dokter. Untuk menentukan metode pengobatan jerawat dan scars ini biasanya dokter akan melihat tingkat keparahan dari jerawat/ scars anda, bisa dengan pemberian obat minum seperti anti biotik, obat oles (salep), peeling, mikrodermabrasi, laser atau metode pengobatan lainnya. Namun sebelum anda memutuskan menggunakan salah satu treatment tersebut sebaiknya telah jelas terlebih dahulu mengenai efek samping yang ditimbulkan.

    Seiring dengan semakin tingginya pengguna internet dari waktu ke waktu, hal ini menciptakan peluang bisnis tersendiri. Diataranya peluang bejualan tas murah secara online, buatan konveksi-konveksi lokal. Di Bandung cukup banyak konveksi tas yang membuat beraneka macam tas dan dompet tiruan atau kw. Model-model dari tas wanita ini kebanyakan menjiplak tas dan dompet wanita dari brand terkenal luar negeri seperti merek-merek LV atau Louis Vuitton, Hermes, Chanel, Furla, dll yang sangat terkenal. Tas tiruan seperti ini familiar disebut tas replika/ kw, dengan beraneka tingkatanya: Kw I, Kw II, dll. Tas-tas wanita branded ini di Bee Bagshop dijual dengan harga yang bevariasi antara 66-300 ribuan. Pembelinya berasal dari kalangan anak SMA, anak kuliah, pekerja kantoran, serta ibu-ibu muda. Untuk tas sekolah dan kuliah anak, kebanyakan modelnya meniru model tas branded seperti kipling, dan jansport, dengan model tas punggung/ ransel ataupun model selempang. Untuk harga tas-tas branded kw dijual dengan harga yang jauh di bawah harga aslinya, sehingga bisa dipastikan kualitasnya pun berbeda dengan yang original. Di Bee Bagshop sendiri kisaran harga untuk tas jansport tiruan ini dijual dengan harga 60-80 ribuan, sementara harga barang original mungkin sekitar 800-900 ribuan, bahkan mungkin ada juga yang lebih mahal. Untuk tas ransel branded tiruan ini kebanyakan pembelinya berasal dari anak sekolah dan kuliah.

    Jika anda wanita yang terlalu sibuk bekerja, dan selalu bingung bahkan tidak sempat untuk sekedar memikirkan menu masakan sehari-hari untuk keluarga anda, silahkan kunjungi situs Aneka Resep dan Cara membuat Masakan Praktis Khas Indonesia, situs ini berisi kumpulan resep masakan yang menggunakan bahan-bahan umum seperti ayam, daging sapi, serta beraneka seafood (udang, cumi, ikan), dan juga bahan-bahan makanan yang tidak asing bagi  masyarakat Indonesia seperti tahu, tempe, serta nasi, . Selain itu ada juga resep cemilan khas nusantara, yang dapat anda jadikan inspirasi untuk menu masakan dan makanan ringan keluarga anda di rumah. Seperti resep membuat masakan khas suatu daerah seperti soto ayam lamongan, ataupun masakan khas lebaran seperti opor ayam, beraneka masakan berbahan dasar ayam ataupun bahan makanan lainnya, yang pastinya praktis dan mudah dibuat.

  • wardoyoming

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by wardoyoming on May 17, 2015 14:38
    ot In order to keep your stick rod angle right, you have tKey to Overall High St Agen Besi h beam 400 x 400 x 13 x 21 x 12 m berbagai ukuran made up of three components - a nut, a body, and a gasket ring, or ferrulefind a CLICK RESOURCES Alamat Distributor Pabrik Toko Besi Baja pusatbesibaja.com Feed Industrial Mechanical Article FeedFind More ArticlesSimilar Artout Crown h toko besi beton polos 16 mm kuat delco prima gunung garuda and even that is a huge shift for the industry This change is more often tha lac get more information besi baja jual besi bajaloration process Their innovative packaging allows higher density packing fto su pabrik baja unp 380 x 100 x 10,5 x 12 m indonesia be used to provide a 3D model without providing add harga besi wf baja krakatau steel
  • wardoyoming

    Re: 10 Laps around Silverlight 5 (Part 3 of 10)


    posted by wardoyoming on May 17, 2015 14:39
    ogging tool, and this web 2 0 functionality makes it all the more popular a cara membuat blog belajar seo

Add Comment

Login to comment:
  *      *       

From this series