Project SilverLight 1.1 – Prototype – Part 9 – View + Search Controls

Sub Heading 4

In the previous post i created the media control, it was fun because it was a center piece component with a cool GUI. In this post i’ll be tackling two less glamorous controls but none-the-less just as important.

Below is what the view & search controls currently look like in iTunes. Our goal is to get the same control’s created using silverlight technology.

iTunes “View” Control:     view control - itunes

iTunes “Search” Control:  search control - itunes

The video of the entire process of me creating the two controls can be found at the bottom of this post.

Here is the result of my blending effort, silverlight “view” and “search” control.

5 and 6

The “view control” was very difficult to create mainly because of the  lack in tools available to me in the current beta blend. Unfortunately i couldn’t get the result i wanted, i had to improvise on the style of the button. If someone can show me how to get the exact same result as the one in iTunes i would be so grateful, until then the version i came up with has to suffice. Sorry. So here is my version of the view control…

view 2

The “search control” was very simple. Blend also proved again to be an awesome GUI tool to create in. It makes me want to switch hats and stay as a designer! Below is the resulting “search control”. I got it looking exactly the way i wanted.

search 2

After copying the xAML into the wireframe project this was the result. It’s looking more and more like the iTunes application. And to think that every single component in the silverlight controls is fully scriptable in javascript, wow … i still can’t get over that.

 control 5 6

The code can be found in the zipped up package ( and the entry point is JF000007.aspx

If you want to check out the working version of the wireframe, it can be found here Wireframe Sample 7!

The next post will cover controls 11 and 13 (at the bottom of the page). We’re slowly but surely getting to the end goal of an online iTunes application. Comments are always appreciated!

6 responses to “Project SilverLight 1.1 – Prototype – Part 9 – View + Search Controls

  1. Hey,

    In case you haven’t figured this out yet… The trouble you had with the button shapes is fairly easily solved. Click a rounded rectangle, then choose Object | Path | Convert To Path. There are points at either end of the curved part of the rectangle. Delete one, drag the other to the corner, and you’ll have a funny curve shape. Now drag the little curve-bar control (no idea what to call it, it’s a dim line that sticks out at the corner) and rotate it around until the corner is square again. Repeat as needed.

    Enjoying the series, learning a lot!

  2. Orang yang bisa mengendalikan emosinya adalah pemenang hidup sejati.

  3. Kebahagiaan besar adalah kumpulan perjuangan yang panjang

  4. If some one needs to be updated with most recent technologies therefore he must be pay
    a quick visit this web site and be up to date every day.

  5. Banyak pasien dengan keputihan dan gejala lainnya . Kerusakan dimanifestasikan sebagai papiler coronavirus ayam atau integrasi ke kembang kol mulai dari ukuran sebagian diintegrasikan ke film atau kinerja tambal sulam . Wanita umumnya melalui pemeriksaan diri ditemukan vulva atau kerusakan perianal tetapi bila terjadi di vagina dan leher rahim infeksi HPV lebih halus dan sulit untuk ditemukan jadi sering diabaikan terjadinya penyakit kutil kelamin ini

  6. Jangan terlalu memikirkan masa lalumu kini mereka hanya kenangan Tatap masa depanmu karena disanalah impian

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s