Expression Encoder: Encoding Video with Audio Overlay


Last week, I delivered an internal session to Microsoft employees on Cloud Computing, where I highlighted that we’re all in the cloud.  This is not the subject of this post, but in case you want to know more of what Microsoft is doing for the cloud and cloud computing, you can visit the following site:  http://www.microsoft.com/cloud

We were recoding the session via Live Meeting, and after we were done, I wanted to come up with one file of the recording that simply reruns the session with 1) video showing the presentation, and 2) audio of what we were saying.  Simple and straight forward. 

The live meeting recording generated a lot of files that I simply didn’t want to have, so I just picked up two files from the recoding folder:

  1. \Apr 06 16.05 [So What the Heck is Cloud Comput...]\Sharing\8b019d7f-aa09-4a6b-8edad9ae.wmv
  2. \Apr 06 16.05 [So What the Heck is Cloud Comput...]\Audio\Audio1.wmv

Since I’m a big fan of Microsoft Expression, I turned to my favorite: Expression Encoder 3.  I searched for the option to combine (or merge) the audio (Audio1.wmv) with the video (8b019d7f-aa09-4a6b-8edad9ae.wmv) and found it called Audio Overlay.  You may be wonder why I didn’t use Windows Live Movie Maker, which provides the same mechanism of overlaying audio and video.  The reason is that Expression Encoder provides me with more control on the details of quality and encoding more than what Movie Maker can give, besides that it’s much faster as well.

Here are the steps on how to overlay an audio file to a video file in Expression Encoder:

Step 1: Import your video file in Expression Encoder

You can choose to import your video file from either the File menu or in the  Media Content panel. 

image
Choose your file, happened to be 8b019d7f-aa09-4a6b-8edad9ae.wmv in my case.  Encoder will start analyzing your file and will make it ready for editing.  As you can see in the Encode panel on the right, there are no audio information for this imported file:

image
Check the mark besides the Audio above, to enable the overlaying of audio in the next step.

Step 2: Choose to overlay you audio file to the imported video

Go to Enhance panel on the right, and choose “Audio Overlay” at the bottom.

 image
Check the mark of “Add Audio Overlay”, and navigate to the audio file “Audio1.wmv”.  You need to switch the file type from Audio files to All Files (*.*") in order to see your *.wmv audio file.

Now, if you test out and play the video file, you’ll see the audio is played as well.  No need to move or shift the audio as the Live Meeting took good care of that when recording and both audio and video files are matching in size.

Step 3: Choose the quality of your output

Go back to the Encode panel, to be able to control the output quality by expanding both Video and Audio options:

image
The options that suits me is to change the bitrate to 164 Kbps, which matches the original recording, since I don’t want to get a bigger file!  On the size mode, I reverted that back to “Source” to keep the original dimensions.  Video options will look like this in my case:

image
For the audio, I can gear it more to the source, but I opted to keep it as is:

image  
If you’re lazy, or don’t want to get into the details of bitrates and sizes and stuff, then you can choose one of the presets from the “Presets” panel.  This will allow you to choose something that suits your publishing requirements for devices (iPhone/iPod, Zune, Windows Mobile…), online services (YouTube, Vimeo, Facebook, …), or for Silverlight with IIS streaming. 

image

Keep in mind that you can generate your output embedded in Silverlight with different templates that are all beautiful.

image
All you need to do is to choose one preset, and click button “Apply”.  Also, you need to watch out for the size of your encoded file and that’s easy via the “Summary” panel:

image

Step 4: Start encoding

All you need to do now is to click the Encode button, get your cup of coffee and relax.  It took me 40 minutes to encode a 1:10:00 video file with overlay.

image

Summary

In this post, I wanted to show how easy it’s to work with Expression Encoder, and the details that you can get for decoding and encoding video and audio files.  I was emphasizing the overlaying, but you can see that you get a lot of good options in generating suitable output with optional templates for Silverlight.  Enjoy!

Exploring “Dallas” – Building a WPF Application MarsGallery3D


تصميم وتطوير المواقع باستخدام الإكسبرشن ويب 3


اليوم انتهيت من تقديم برنامج تدريب لمدة يومين في موضوع "الاكسبرشن ويب 3" والذي يرمي إلى تعليم مجموعة من المدربات والمدربين الذين سيقومون بدورهم بتدريب مجموعة من الجيل الناشئ في السعودية على تقنيات تصميم مواقع الويب. استمتعت كثيرا بهذا التدريب وخصوصاً أنه ممكني من تغطية نواحي في تصميم وتطوير مواقع الويب بالاكسبرشن كنت قد بعدت عنها مأخراً. وفيما يلي مختصر لأعمال اليومين التدريبية وما قدمته من مواضيع:

اليوم الأول

مقدمة عن الاكسبرشن ويب 3

بداية، قمت باستعراض سريع على منتجات الاكسبرشن ستوديو 3 وما تقدمه من وسائل فريدة ومتكاملة مع بعضها لبناء مواقع انترنت تفاعلية وغنية بالمحتوى. تطرقت إلى الاكسبرشن بلند وكيف أنه يقدم أدوات التفاعل والحركة في مواقع الويب (وكذلك برامج الويندوز) باستخدام تقنيات مثل السيلفرلايت. تحدثت عن الاكسبرشن ويب وما يقدمه من أدوات تصميم وتطوير لتقنيات أساسية مثل الاتش تي إم إل، سي إس إس، الجافاسكريبت، وغيرها وكيف أنه يقدم بيئة تصميم وتطوير جميلة لتقنيات مثل البي إتش بي والأي إس بي.نت. بعد ذلك تطرقت لبرنامجين مبدعين وهما "ديزاين" و "انكودر". يقوم الاكسبرشن ديزاين بعمل الصور والرسومات التي يحتاجها أي موقع ويركز على الخطوط والرسوم التي تحافظ على شكلها وألوانها مهما كبرت أو صغرت، وكذلك كيف أنه يتعامل مع ملفات الفوتوشوب. برنامج الاكسبرشن انكودر يتعامل مع ملفات الفيديو بمختلف أشكالها لتحريرها وتحويلها من صيغة لأخرى مع استخدام الكودكس المختلفة والتي تحدد أنواع الضغط ومعاييرها.

الكسبرشن ويب أداة تهتم بثلاث نواحي رئيسية:

  1. إنشاء مواقع تتماشى مع المعايير العالمية بسهولة
  2. إنشاء مواقع غنية وفعالة وتواكب ما تحويه الانترنت حاليا من ميزات وسائط وحركة
  3. دعم للتقنيات المختلفة والتي لايخلو منها أي موقع مثل لغات برمجة الويب المختلفة

قمت بعد ذلك بالتعريف ببيئة عمل الاكسبرشن ويب كما توضحه الصورة التالية:

clip_image002

قمت بعد ذلك باستعراض الكود إديتور والذي يمكن من استعراض كود الصفحات وتليونها حسب التقنية المستخدمة، وكيف ان الإكمال التلقائي حسب السياق "الإنتيلي سينس" يساعد المبرمج على الحصول على قوائم الوظائف والخصائص في مكانه الحالي في الكود. ويقدم الإكسبرشن ويب عرض للموقع وقت التصميم بما يساعد المصمم على اختيار الأفضل والتعديل حسب الحاجة.

قمت بعد ذلك باستعراض لوائح ونوافذ التصميم المختلفة التي تساعد المصمم في عمله دون الحاجة للرجوع للكود ما أمكن:

clip_image004 clip_image006 clip_image008

قام المتدربون بعدها باتباع تطبيق عملي أو مايسمى باللاب بحيث تمكنوا من استعراض ماسبق خلال ساعة من الوقت. أدركت من خلال هذه الساعة أن البعض واجهو صعوبات لفهم بعض التقنيات المستخدمة، ولكن كانت بداية جيدة لمعرفة المزيد وتطوير المعلومات. أحببت من خلال هذا اللاب أن أعطيهم بعض الخلفية في بعض المواضيع، ولمعرفة المزيد يمكنهم زيارة مواقع مثل www.w3schools.com والتي تفصل مبادئ تقنيات الانترنت المختلفة.

معاينة الموقع وتحليله

لاتخلو أي عملية تصميم من الأخطاء، ولذلك قمت باستعراض أدوات التحليل المختلفة في الاكسبرشن ويب والتي تساعد على إنشاء مواقع خالية من المشاكل. مثلاً:

1. تحليل معايير سهولة الوصول: والتي تقدم وسائل تحلل صفحات الموقع للتأكد من خلوه من مشاكل تعيق الوصول له والتفاعل معه من قبل الزوار ذوي الاحتياجات الخاصة. مثال على ذلك: استخدام الألت تاق مع الصور حتى تتمكن برامج قراءة المواقع للمكفوفين من التعرف على الصور الموجودة. أشكر احدى الأخوات لتنبيهي لهذه الميزة.

2. تحليل التوافقية مع المعايير: ينتشر بالإنترنت متصفحات متعددة وتدعم تقنيات مختلفة. ولتسهيل عمل المصمم، يجب عليه تحديد المعايير المختلفة التي سيقوم باتباعها في تصميم حتى يتم استعراض موقعه بشكل صحيح في جميع المتصفحات المتوفرة (مثل الانترنت إكسبلورر، الفايرفوكس، الكروم، وغيرها).

3. تحليل سمات الموقع والتأكد من خلوها من الأخطاء (السي إس إس) وكذلك إنشاء تقارير بالسمات المستخدمة في الموقع.

استعرضت كذلك طرق معاينة الموقع للتأكد من التصميم النهائي والتي تتشكل في التالي:

1. المعاينة العادية: وذلك بالضغط على إف12، حيث يقوم الإكسبرشن ويب باستعراض الموقع في المتصفح المفضل لديك (حيث يمكنك من الإختيار بين عدة إختيارات).

clip_image010

2. المعاينة الفورية: وذلك بأن يقوم الإكسبرشن ويب باسعراض الصفحة الحالية داخل نافذة البرنامج متى ماتم تغييرها وحفظها.

clip_image012

3. المعاينة السريعة: والتي تفتح نافذة خاصة لتمكن من معاينة موقعك (أو حتى مواقع أخرى) ومقارنة متصفحين مختلفين في آن واحد.

clip_image014

قام بعد ذلك المتدربون بتطبيق عملي على ماسبق خلال ساعة من الزمن.

إنشاء موقعك الأول

قمت في هذا القسم باستعراض التقنيات الأساسية لإنشاء المواقع والتي تتضمن الطبقات، السي إس إس، القوالب، الروابط التشعبية، وغيرها. ركزت على مايسمى بقوالب الويب الديناميكية وبيان استخدامها وميزاتها. كذلك قمت بمقارنتها مع تقنيات القوالب المختلفة مثل الماستر بيجز والتي تستخدم في الأي إس بي.نت.

كان من المهم أن يقوم المتدربون بتطبيق عملي مطول على انشاء موقع من الصفر، وكان ذلك عن طريق اللاب الثاني الذي استخدمته من موقع مايكروسوفت إكسبرشن للمعلمين كما في الراط التالي: Microsoft Expression for Educators

كان هذا التطبيق العملي أساسي للإكسبرشن ويب ومن خلاله تمكن المتدربون من تطبيق خطوة بخطوة ماتعلموه خلال اليوم. لاشك أن البعض واجه بعض الصعوبات، ولكن الصعوبات والأخطاء هب الوسيلة للتعلم!

يجدر بي ذكر أن هذا التطبيق العملي يتكون من ثلاث أجزاء:

1. تصميم صور الموقع بالإكسبرشن ديزاين: وكان هذا اختياري لمن أراد أن يتعمل تصميم الصور

2. إنشاء الموقع: وهذا الجزء ضروري لكي يتكمن المتدرب من بناء موقع من الصفر ومعرفة سهولة ذلك والأدوات المتوفرة

3. إنشاء موقع متقدم: وهذا أيضاً اختياري ويتطرق لمواضيع أكثر، وكان واجب منزلي لمن أحب القيام به

انتهى اليوم الأول واستطاع الجميع تكوين صورة جيدة عن الإكسبرشن ويب واستخدامه. كان مليئ بالأسئلة النقاش وقد أحببت ذلك.

اليوم الثاني

بدأت اليوم الثاني بما يقارب النصف الساعة من المراجعة لليوم الأول واجابة الأسئلة والاستفسارات. وقد أعجبني مشاركة الأخت دينا في تفصيل الفروقات بين سمات وضع الطباقات والاختلافات والتي سأقوم بإرسالها للجميع ان شاءالله.

قمت بعد ذلك باستعراض أجندة اليوم الثاني والهدف منه وهوالتطرق لمواضيع متقدمة وذات أهمية عالية في عالم الإنترنت اليوم. وفيما يلي تفصيل ذلك.

التعامل مع محتوى الوسائط

لايخلو أي موقع إنترنت الآن بشكل أو آخر من الوسائط المتعددة، وكان هذا هو الهدف من التعامل مع محتوى الوسائط. قمت أولا بالتحدث عن كيفية إدراج الصور في الصفحات وكيفية التعامل معها من التأثير على مصدرها الأساسي. عمليات مثل تغير صيغة ملف الصورة، أو تعديل ألوانها، التباين والسطوع، وغيرها مما يمكن عمله عن طريق شريط أدوات الصور. كذلك قمت بشرح إنشاء الروابط على أجزاء من الصورة أو مايسمى بالهوت سبوت. كذلك قمت باستعراض كيفية إدراج صور من ملفات الفوتوشوب مع التحكم في اختيار الطبقات والشفافية. المحافظة على صيغة ملف الفوتوشب مهمه حيث يمكن الإكسبرشن من إعادة إدراج الصورة وذلك عن تغيير الأصل في الفوتوشوب.

clip_image016

تطرقت بعد ذلك إلى تقنية "الدييب زووم" والتي تمكن انشاء مكون تفاعلى مبني على السيلفرلايت والذي يجمع مجموعة هائلة من الصور بدقات عالية، ثم تمكين المستخدم من التكبير والتصغير بسرعات عالية وتفاعلية.

clip_image018

بعد ذلك انتقلت الى التعامل مع ملفات الفيديو ومايمكن إدراجه في صفحات الويب من ملفات مع مشغلاتها. استعرضت ادراج فيديو باستخدام مشغل سيلفرلايت وكيفية أن إكس
برشن ويب يتكامل مع الإكسبرشن إنكودر لضغط الملف حسب الكودك المطلوب:

clip_image019

بعد ذلك قام الجميع بتطبيق عملي على التعامل مع الصور، الفوتوشوب، الفيديو، السيلفرلايت، الدييب زووم، والفلاش. واجهنا بعض الصعوبات من ناحية جاهزية الأجهزة للتعامل مع الكودكس المختلفة واستطعنا حلها مع البعض. البقية الذين لم يستطيعو حلها سيقومون بتطبيقها في أجهزة الخاصة والتواصل معي لطلب المساعدة.

تطوير مواقع البي إتش بي

برمجة البي إتش بي انتشرت كثيرا وأصبحت من التقنيات المعتمدة والمدعومة في منصات مايكروسوفت ويندوز. الغرض من هذا الجزء هو معرفة واستخدام الإكسبرشن ويب لإنشاء صفحات البي إتش بي وكيف أن الكود إديتور يمكن من سهولة البرمجة بها (التلوين والإكمال التلقائي). لم يكن الغرض تعلم البي إتش بي أكثر من مجرد التعرف على كيفية التعامل مع كود البي إتش بي.

clip_image021

تمكن المتدربون بعدها من التطبيق العملي والذي تضمن تحميل وتركيب مشغل البي إتش بي، وعمل صفحات بسيطة لاستخداماتها. بعض المتدربين واجهوا صعوبات لعدم وجود خلفية برمجية لديهم، ولكن طرق التعلم كثيرة ومتوفرة لمن أراد الخوض في هذا المجال مثل: www.w3schools.com و www.php.net

تجدر الإشارة بأن الإكسبرشن ويب يحتوي على خادم ويب مدمج يساعد المطور من معاينة تصميمه وبرمجته من غير الحاجة لنشر الموقع.

clip_image023

التطوير باستخدام الأي إس بي.نت

لغة الأي إس بي.نت من مايكروسوفت هي لغت برمجة ويب قوية، منتشرة، وغنية عن التعريف. الغرض من هذا القسم هو التعرف على قدرات الإكسبرشن ويب في برمجة صفحات الأي إس بي.نت من غير الحاجة للكود وذلك عن طريق الأدوات المتوفرة لذلك والتي تشابه تلك في الفيجوال ستوديو.

clip_image026

قام المتدربون بتطبيق عملي على استخدام تقنية الأي إس بي.نت وإنشاء صفحة تقرأ من ملف إكس إم إل وتعرض محتواه بشكل منسق وجميل. لتعلم الأي إس بي.نت يمكن للمتدرب البدء بوقع www.asp.net

clip_image028

نشر الموقع على الويب

في آخر قسم من التدريب تطرقت إلى طرق نشر الموقع كخطوة أخيرة للانتهاء من عمل الموقع يقوم المصمم بنشر الموقع وهي عملية نقله على خادم الإنترنت لكي يتمكن الزوار من زيارة الموقع في أي مكان. استعرضت طرق نشر الموقع مثل الإف تي بي والويب داف، وقمت بتمثيل ذلك على مجلد في نفس الكمبيوتر لعدم توفر خادم إنترنت حقيقي يمكن تجربته في تلك اللحظة.

clip_image030

تعرف بعد ذلك المتدربون على طرق النشر المختلفة من خلال تطبيق عملي. بينت لهم كيف أن الإكسبرشن ويب يغني عن استخدام برامج الإف تي بي الأخرى.

انتهى اليوم الثاني بعدة أسئلة واستفسارات ونقاشات حول التصميم والتطوير. وتم التدريب بحمد من الله ومنة.

أرجو من جميع الذين حضروا التدريب ترك ملاحظاتهم هنا وعدم الحرج بذكر أي اقتراحاتهم يرونها في صالح التدريب في المستقبل.

TechEd Middle East 2010


By taking part in Tech·Ed 2010, technology professionals can meet their individual challenges head-on by engaging directly with their peers and Microsoft to find the technology resources necessary to help build state-of-the-art software solutions or to help plan, architect, deploy, manage, and secure a connected IT infrastructure.

  • Tech-Ed is Microsoft’s premier technical education and networking event
  • Tech-Ed is a global, year-long series of events. Microsoft is investing in the IT Professionals and Developers in the region by bringing this international event to the region.
  • The event is focused on technical education, product evaluation and community development delivered by renowned technology experts, distinguished speakers and community influencers
  • Delegates attending Tech-Ed can expect access to the same level of technical content and international and local expertise as would be delivered at any other Tech-Ed event around the world.

I’m going to TechEd Middle East this March 1-3, 2010, and will have a session on Microsoft Expression Blend, SketchFlow:

Prototyping the UX: Expression Blend + SketchFlow (WEB201)
Track: Web and User Experience | Timeslot: Wed, Mar 03, 2010 (09:30 – 10:30) | Session Type: Breakout Session

Session Summary: As the on-screen behaviour of software applications becomes more and more sophisticated, it gets harder and harder to envision, validate and document your user interface. New features in Expression Blend 3, including Sketchflow, make user experience design an integral part of the software development lifecycle, and free up the UX bottleneck. Come see Expression Blend 3 and Sketchflow in action, and learn how to integrate conceptual design into your next project, regardless of platform.

Level: 200 – Intermediate | Speaker/s: Abdurrahman Al-Qahtani | Room: Dubai B | Audience: Developers, Web Developers, Designers, Development Managers

More sessions can be found here: http://www.teched.ae/sessions.aspx

Hope to see there and please don’t hesitate to ping me twitter

Behaviors – Busy State Indicator


Hi again in the second part of discovering Behaviors in WPF/Silverlight with Expression Blend.  In the previous part, we have seen how to build simple behaviors in code using Visual Studio 2010.  In this post, I’m going to extend that and see how to use a “busy state indicator” as a behavior to signal the state of business in your application.

The other day, I was trying to include a busy indicator in my application.  I didn’t want to build this from scratch, and instead wanted to use one of the behaviors available online.  I found one in the Expression Community Gallery that is called Busy State Indicator Behavior by Pedro Pombeiro.  This one is great since it is built as a reusable behavior, customizable, and makes use of a great indicator built by Sasha Barber, a Circular Progress Bar.  Both form a perfect match of what I want.  Details of how to use that in an application follow in this post.

Setting the stage:

In order for us to be on the same page, make sure you have the following in place:

  1. Visual Studio 2010 Beta, you can download it from here.  VS 2008 should be fine as well.
  2. Download Busy State Indicator Behavior from here.

Building an application that uses Busy State Indicator Behavior:

1. Create a project in Visual Studio:

Give the project a name, I have named my project Behaviors101

2. Build the busy state context:

I mean by that the logic needed to indicate when you’re application is busy.  I will build that as a custom class in my project, which will provide two properties (IsBusy and BusyText) designating flag for business and an optional text for elaboration on what your application is busy on.  Below is the initial code for this class that I have named BusyState.cs.

   1: namespace Behaviors101

   2: {

   3:     class BusyState

   4:     {

   5:         private bool isBusy;

   6:         private string text;

   7:  

   8:         public bool IsBusy 

   9:         {

  10:             get { return isBusy; }

  11:             set { isBusy = value; }

  12:         }

  13:  

  14:         public string BusyText 

  15:         {

  16:             get { return text; } 

  17:             set { text = value; }

  18:         }

  19:     }

  20: }

 

3. Use the busy state context in your application:

This step is more of just a reference and instantiation of the BusyState class outlined above.  You can do that either in code or XAML.  I have chosen to do that in XAML and made that possible by referencing the namespace of my application to get access to the BusyState class:

   1: <Window

   2:         ...

   3:         xmlns:local="clr-namespace:Behaviors101"

   4:     

   5:         Title="MainWindow" Height="350" Width="525">

   6:  

   7:     <Window.Resources>

   8:         <!-- Instantiates the BusyState class -->

   9:         <!-- Giving it an x:Key so it's available as a resource -->

  10:         <local:BusyState x:Key="BusyStateObject" IsBusy="False" Text="None"/>

  11:     </Window.Resources>

  12:  

  13:     <Grid>

  14:         ...

  15:     </Grid>

  16: </Window>

 

4. Build the functionality to use the busy state context:

Since I don’t have a functionality for this application, I’m gonna resemble its state of being busy by a timer.  The timer will signal the application from busy to free upon the ticks of the clock.  You may change that with your own logic such as asynchronous internet connections, database queries, or any other long running processes.  Below is the code snippet that declares the timer, initializes it, and wires the event of ticking. 

   1: DispatcherTimer tmr;    

   2:     

   3: public MainWindow()

   4: {

   5:     InitializeComponent();

   6:  

   7:     // create the timer

   8:     tmr = new DispatcherTimer();

   9:     // set the interval to 5 seconds

  10:     tmr.Interval = TimeSpan.FromSeconds(5);

  11:     // wire the event of the timer tick

  12:     tmr.Tick += new EventHandler(tmr_Tick);

  13:     // start the timer

  14:     tmr.Start();

  15: }

  16:  

  17: // timer tick event which simply switched the application from busy to free to busy, ...

  18: void tmr_Tick(object sender, EventArgs e)

  19: {

  20:     // get a reference to the busy state object decalred in XAML as a resource

  21:     BusyState bstate = (BusyState)this.FindResource("BusyStateObject");

  22:  

  23:     // toggle the IsBusy

  24:     bstate.IsBusy = !bstate.IsBusy;

  25:     

  26:     // set the busy text to Busy or Free according to the busy flag

  27:     if (bstate.IsBusy)

  28:     {

  29:         bstate.BusyText = "Busy!";

  30:     }

  31:     else

  32:     {

  33:         bstate.BusyText = "Free...";

  34:     }

  35: }

Notice how I have obtained a reference to the static resource BusyStateObject in line 21, which enables me then to change the busy flag and text.

5. Test out your application busy state by binding to UI

Before we go ahead with the behavior, let’s do a quick test on the above.  I’m gonna bind the BusyStateObject with two elements in the UI in XAML: a textblock and a checkbox.  This will enable us to do a quick check on whether the above is working.

   1: <Grid>

   2:    <TextBlock Height="30" Margin="72,68,218,213" 

   3:         Text="{Binding Source={StaticResource BusyStateObject}, Path=BusyText}" />

   4:    <CheckBox Content="Is Busy?" Height="16" Margin="72,34,0,0" Name="checkBox1" Width="120" 

   5:         IsChecked="{Binding Source={StaticResource BusyStateObject}, Path=IsBusy}" />

   6: </Grid>

The binding as you can see (in line 3 and 5) is simple:  Text property (target property) of the TextBlock (target object) gets its value from the static resource defined above as BusyStateObject (source object) with a path to BusyText (source property).  Same goes for IsChecked of the CheckBox. 

Once you do this in XAML, you’ll see that design time immediately reflects on the BusyStateObject properties by setting IsChecked to false and Text to “None”.  Now, if you run the application (F5) you will expect that the binding will do the job once the timer kicks in.  Unfortunately that is not the case!

Although the timer does its job, you’ll find that changes to your BusyStateObject properties (IsBusy and Text) doesn’t have an effect on the UI and the bound properties, and that is caused by the fact that your application has no clue at all of the changes on those properties.  Looking around for a solution will guide you to this article (WPF Basic Data Binding FAQ).  In this article, you’ll see a solution to this problem which is all about implementing a notification (with events) when property values change by letting your class implement the interface INotifyPropertyChanged.  The code changes to BusyState.cs conclude it as follows:

   1: namespace Behaviors101

   2: {

   3:     class BusyState : INotifyPropertyChanged

   4:     {

   5:         private bool isBusy;

   6:         private string text;

   7:  

   8:         // Declare the event

   9:         public event PropertyChangedEventHandler PropertyChanged;

  10:  

  11:         public bool IsBusy 

  12:         {

  13:             get { return isBusy; }

  14:             set {

  15:                 isBusy = value;

  16:                 // Call OnPropertyChanged whenever the property IsBusy is updated

  17:                 OnPropertyChanged("IsBusy");

  18:             }

  19:         }

  20:       

  21:         public string BusyText 

  22:         {

  23:             get { return text; } 

  24:             set {

  25:                 text = value;

  26:                 // Call OnPropertyChanged whenever the property Text is updated

  27:                 OnPropertyChanged("BusyText");

  28:             }

  29:         }

  30:  

  31:         // Create the OnPropertyChanged method to raise the event

  32:         private void OnPropertyChanged(string p)

  33:         {

  34:             PropertyChangedEventHandler handler = PropertyChanged;

  35:             if (handler != null)

  36:             {

  37:                 handler(this, new PropertyChangedEventArgs(p));

  38:             }

  39:         }

  40:     }

  41: }

 

with that, go ahead and run your application and see how that the textblock and checkbox change values every 5 seconds.

image

6. Importing the Busy State Indicator Behavior:

The previous step enabled us to test out the application busy state and making sure everything is working fine.  Of course the goal is to use a better busy state indicator UI instead of the the checkbox and textblock, so we’ll now use the BusyStateIndicator Behavior.

If you have successfully downloaded the behavior from the gallery, you’ll see that you have two components (3 files in total):

  • CircularProgressBar (XAML and CS files):  this is the artistic work which shows a bar of circles moving in a circular fashion.  This is built by Sasha Barber and more information can be obtained here.

image

  • BusyIndicatorBehavior (CS file): which is the behavior that uses the progress bar (notice the using Progress statement in the code).  It implements a number of dependency properties that enable you to bind to.  It also gives you control of the behavior such as dimming the application, the target visual, …  This work is by Pedro Pombeiro and more information can be obtained from here.

With that, all you need to do is to include those files into your project, and reference the BusyStateIndicator behavior namespace in XAML.  I have renamed the namespace in the imported files to Behaviors101 to make it simpler for me to reuse the previously used xmlns:local reference.

7. Using the BusyStateIndicator Behavior:

Now all files are imported to your project and referenced properly, you only need to look for the grid you want to target for the busy state behavior and attach the behavior.  Also, you need to bind the BusyState property of the behavior to the whatever tells it to go busy (BusyStateObject.IsBusy is the one in our case).

   1: <Grid

   2:    DataContext="{Binding Source={StaticResource BusyStateObject}}"

   3:    local:BusyIndicatorBehavior.BusyState="{Binding IsBusy}"

   4:    local:BusyIndicatorBehavior.TargetVisual="{Binding RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type Grid}}}">

Notice how that I have set the DataContext for data binding to the static resource BusyStateObject in line 2.  Then I have used simple binding in line 3 to bind BusyState of the behavior (the target property) to IsBusy (the source property).  In line 4, TargetVisual is bound to a relative source which is the Grid in this case.

Run the application now, and you’ll see that the circular bar fades in whenever the timer ticks, and gradually fades out on the next tick.

image

In Summary:

We have learned in this post how to use the BusyStateIndicator behavior and the attached Circular Progress Bar.  The idea was to reuse an existing behavior available from the Expression Community Gallery, and setting the stage for using it with a busy state object/flag.  A future post will utilize this behavior in a more practical way, but I wanted to detail the steps for you to use in your projects leveraging WPF and behaviors.

Behaviors in Expression Blend


This post aims at working with behaviors in Windows Presentation Foundation (WPF) via Visual Studio 2010 and Expression Blend Preview for .NET 4. I will start with the basics and follow up with posts to work on some of the details.

Behaviors are basically objects that encapsulate triggers (usually caused by external events) and actions that represent the operations to purpose the behavior. Behaviors have been introduced in Expression Blend 3 and are supported in both WPF and Silverlight to provide interactivity without code. They can be designed in Blend or coded in Visual Studio. To start off, we’re going to build a simple behavior and will code it in Visual Studio 2010 (yeah, the hard way gets you learning!). The behavior is going to be attached to a button and will have simple actions like displaying a message or changing the background.

Here are the steps to do build your first behavior:

1. Create a new Project in VS2010 – Choose WPF Application and give it a name:

I have named my project Behaviors101. One important thing to note here is to make sure you target the appropriate .NET framework based on the tools you use. For example, choose .NET Framework 3.5 with Visual Studio 2008 and Expression Blend 3. If you’re a beta savvy, then get your hands on the beta version of Visual Studio 2010, and Expression Blend Preview .NET 4. With the latter ones, make sure you target .NET 4.0 so you can open the project in both VS and Blend.

2. Add a new class file to your project ButtonBehaviors101.cs with following code:

 

   1: public class ButtonBehaviors101 : Behavior<Button>

   2: {

   3:     public ButtonBehaviors101()

   4:     {

   5:     }

   6:  

   7:     protected override void OnAttached()

   8:     {

   9:         this.AssociatedObject.Click += new RoutedEventHandler(AssociatedObject_Click);

  10:     }

  11:  

  12:     protected override void OnDetaching()

  13:     {

  14:         this.AssociatedObject.Click -= this.AssociatedObject_Click;

  15:     }

  16:  

  17:     void AssociatedObject_Click(object sender, RoutedEventArgs e)

  18:     {

  19:         MessageBox.Show("Hello from Behaviors!");

  20:     }

  21: }

 

3. Make sure of proper assembly references are in place for your new Behavior:

If you’re working against .NET 3.5, then use Microsoft.Expression.Interactions. If in .NET 4.0 then use System.Windows.Interactivity as this functionality will move to the core platform in .NET 4.0. After that, use proper using statement according to your reference.

   1: using System.Windows.Interactivity; // referenced assembly System.Windows.Interactivity 

   2: using System.Windows; 

   3: using System.Windows.Controls; 


4. Make proper references In XAML:

In order for us to wire up our simple behavior and attach it to a button, we need to reference the proper assemblies in XAML as well. Also, you need to reference your current namespace to get access to the custom class ButtonBehavior101.

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

xmlns:local="clr-namespace:Behaviors101"

5. Wire up your XAML control to the newly created behavior:

   1: <Grid> 

   2:    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="80,71,0,0" Name="button1" VerticalAlignment="Top" Width="75"> 

   3:       <i:Interaction.Behaviors> 

   4:          <local:ButtonBehaviors101/> 

   5:       </i:Interaction.Behaviors> 

   6:    </Button> 

   7: </Grid> 


Now, when you run your application and click the button, and you’ll see your behavior in action which basically displays a message box saying: Hello from Behaviors.

You may ask now why to behaviors? And the rational is that you can package it and make reusable (attache-able) to different objects (Buttons in our example). Also, when you decide to change the behavior then your client (the attached object) doesn’t need to change anything from his side.

So, let’s change the behavior action and proof that we don’t need to touch our main application. We’ll do that by changing the behavior to change a property of the button, instead of showing a message box. We will change the background this time.

6. Change the code of the associated click event to be the following:

   1: void AssociatedObject_Click(object sender, RoutedEventArgs e)

   2: {

   3:     //MessageBox.Show("Hello from Behaviors!");

   4:     this.AssociatedObject.Content = "Clicked!";

   5:     SolidColorBrush newBruch = new SolidColorBrush(Color.FromRgb(255,0,0));

   6:     this.AssociatedObject.Background = newBruch;

   7: }


Run the application and you’ll find that the button changing behavior based on the changes you have made to the ButtonBehavior101 class.

One interesting thing will happen as well. The button will not only change the background, but will start fading the background color in and out instead of turning it to the value assigned. This is caused by a default action triggered upon keyboard focus. To check what’s behind the scenes, we can open the project in Expression Blend, and discover that default trigger in design mode.

Behind the scenes in Blend:

1. Open the project in Expression Blend:

Make sure you use the right tools together. Blend 3 works with Visual Studio 2008 and Blend Preview for .NET 4 works with Visual Studio 2010.

2. Edit the button template to access the internals of button components:

Right-click on the button in Blend, and choose Edit Template -> Edit a Copy.

You’ll be presented with a Create Style Resource dialog, accept the defaults and click OK.

3. Access the triggers to find out that focus is behind the fading behavior:

While in the palette of the button, click on "Triggers" tab and you’ll be presented with a number of triggers. One of them is conditioned on IsKeboardFocused and the action is setting Chrome.RenderDefaulted to true. This action enables or disables the fading behavior. The question now is why it’s fading, and my guess for now is that it relates to the Windows theme in use. A subject of research in the futureJ !

In Summary

We have seen how to create a simple behavior from scratch in code, and how changing that behavior simply doesn’t require us recoding on the client that uses this behavior. Of course coding is not the optimal way, and in the future we’ll discover how to design complex behaviors in Blend without writing code.

Stay tuned for more posts.

Blog at WordPress.com.
Theme: Esquire by Matthew Buchanan.

Follow

Get every new post delivered to your Inbox.