An introduction to developing Media Center add-ins, given to the UK Media Center and Windows Home Server user group meeting in Birmingham, April 2009.

1. Developing Media CenterPresentation Layer Applications Andrew Cherry Digital Living Solutions Ltd

2. A bit about me UK Media Center & WHS User Group 23-Apr-2009 2 Digital Living Solutions Ltd Hampshire based, specialising in digital home installation, integration, and software development (including Media Center) Microsoft MVP for Media Center since July 2007 “Community Dev Expert” for the Media Center Sandbox (Microsoft-run developer forum for Media Center)

3. Purpose of today's session Remove the mystery behind Media Center development Give you a taster of how straightforward it is to develop for Media Center Hopefully inspire you to take the next step and start developing your own add-ins! 23-Apr-2009 UK Media Center & WHS User Group 3

4. Why develop for Media Center? Potential reach Every Vista Home Premium/Ultimate system has Media Center on it already! Cost of entry All the tools you need are free – Visual C# Express, Media Center SDK You can develop some fun stuff! Limited only by your imagination and patience! 23-Apr-2009 UK Media Center & WHS User Group 4

5. Media Center Presentation Layer (MCPL) Core building block of Media Center The core UI for Vista Media Center is written in MCML XML based Markup Language Developed (and optimised) specifically for Media Center Used in conjunction with “backend” C# code Applications = code + markup Code = “application logic”, Markup = UI Model-View-Controller pattern 23-Apr-2009 UK Media Center & WHS User Group 5

7. Media Center Markup Language

8. Can read/write model properties

9. Can respond to model changes

10. Visual + UI logic

12. The Bad News “Windows 1.0 programmers had a straightforward life. They had almost no choices about how to do things; either there was an application programming interface (API), or there wasn’t, and most of the time there wasn’t. This meant that developers had to build almost everything by hand.” 23-Apr-2009 UK Media Center & WHS User Group 8 MCPL = Windows 1.0 Windows Forms 2.0 Programming, Chris Sells & Michael Weinhardt

13. Media Center Markup LanguageBasics “UI” encapsulates the definition of the user interface at a specific level All content appears within a Content element, within the UI element 23-Apr-2009 UK Media Center & WHS User Group 9 <Mcmlxmlns="http://schemas.microsoft.com/2006/mcml"> <UI Name="UI name"> <Content> ... </Content> </UI> </Mcml>

14. Media Center Markup LanguageVisual Primitives Three visual primitives <Text> <Graphic> <ColorFill> 23-Apr-2009 UK Media Center & WHS User Group 10 <Text Content="Hello World!" Color="White" Font="Arial,30" /> <Graphic Content="resx://addin/addin.resources/image" /> <ColorFill Content="Red" />

16. Scale

18. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 13 <Content> <Panel Name="Panel" Margins="10,0,10,0" MinimumSize="[Size]" MaximumSize="[Size]" Layout="Anchor"> <Children> <Clip Name="Fade" FadeSize="10" FadeAmount="1.0" FarOffset="-40" ShowFar="true" ShowNear="false" Visible="true"> <LayoutInput> <AnchorLayoutInput Left="Parent,0" Top="Parent,0" Right="Parent,1" Bottom="Parent,1"/> </LayoutInput> <Children> <Text Name="Text" Content="[Description]" Margins="10,8,10,8" Color=“White" Font=“Segoe Media Center,20”/> </Children> </Clip> <Graphic Name="Background" Content=“[NoFocusImage]" MinimumSize=“[Size]" MaximumSize=“[Size]"/> </Children> </Panel> </Content> Play

19. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 14 <Content> <Panel Name="Panel" Margins="10,0,10,0" MinimumSize="[Size]" MaximumSize="[Size]" Layout="Anchor"> <Children> <Clip Name="Fade" FadeSize="10" FadeAmount="1.0" FarOffset="-40" ShowFar="true" ShowNear="false" Visible="true"> <LayoutInput> <AnchorLayoutInput Left="Parent,0" Top="Parent,0" Right="Parent,1" Bottom="Parent,1"/> </LayoutInput> <Children> <Text Name="Text" Content="[Description]" Margins="10,8,10,8" Color=“White" Font=“Segoe Media Center,20”/> </Children> </Clip> <Graphic Name="Background" Content=“[NoFocusImage]" MinimumSize=“[Size]" MaximumSize=“[Size]"/> </Children> </Panel> </Content> Play

20. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 15 <Content> <Panel Name="Panel" Margins="10,0,10,0" MinimumSize="[Size]" MaximumSize="[Size]" Layout="Anchor"> <Children> <Clip Name="Fade" FadeSize="10" FadeAmount="1.0" FarOffset="-40" ShowFar="true" ShowNear="false" Visible="true"> <LayoutInput> <AnchorLayoutInput Left="Parent,0" Top="Parent,0" Right="Parent,1" Bottom="Parent,1"/> </LayoutInput> <Children> <Text Name="Text" Content="[Description]" Margins="10,8,10,8" Color=“White" Font=“Segoe Media Center,20”/> </Children> </Clip> <Graphic Name="Background" Content=“[NoFocusImage]" MinimumSize=“[Size]" MaximumSize=“[Size]"/> </Children> </Panel> </Content> Play

21. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 16 <Content> <Panel Name="Panel" Margins="10,0,10,0" MinimumSize="[Size]" MaximumSize="[Size]" Layout="Anchor"> <Children> <Clip Name="Fade" FadeSize="10" FadeAmount="1.0" FarOffset="-40" ShowFar="true" ShowNear="false" Visible="true"> <LayoutInput> <AnchorLayoutInput Left="Parent,0" Top="Parent,0" Right="Parent,1" Bottom="Parent,1"/> </LayoutInput> <Children> <Text Name="Text" Content="[Description]" Margins="10,8,10,8" Color=“White" Font=“Segoe Media Center,20”/> </Children> </Clip> <Graphic Name="Background" Content=“[NoFocusImage]" MinimumSize=“[Size]" MaximumSize=“[Size]"/> </Children> </Panel> </Content> Play

22. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 17 <Content> <Panel Name="Panel" Margins="10,0,10,0" MinimumSize="[Size]" MaximumSize="[Size]" Layout="Anchor"> <Children> <Clip Name="Fade" FadeSize="10" FadeAmount="1.0" FarOffset="-40" ShowFar="true" ShowNear="false" Visible="true"> <LayoutInput> <AnchorLayoutInput Left="Parent,0" Top="Parent,0" Right="Parent,1" Bottom="Parent,1"/> </LayoutInput> <Children> <Text Name="Text" Content="[Description]" Margins="10,8,10,8" Color=“White" Font=“Segoe Media Center,20”/> </Children> </Clip> <Graphic Name="Background" Content=“[NoFocusImage]" MinimumSize=“[Size]" MaximumSize=“[Size]"/> </Children> </Panel> </Content> Play

23. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 18 <Rules> <Rule> <Conditions> <Equality Source="[Input.KeyFocus]“ Value="true"/> </Conditions> <Actions> <Set Target="[Background.Content]" Value="[FocusImage]”/> </Actions> </Rule> <Condition Source="[Model.Dormant]" SourceValue="true"> <Actions> <Set Target="[Text.Color]" Value=“[DormantBlue]"/> </Actions> </Condition> <Rules> Play

24. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 19 <Rules> <Rule> <Conditions> <Equality Source="[Input.KeyFocus]“ Value="true"/> </Conditions> <Actions> <Set Target="[Background.Content]" Value="[FocusImage]”/> </Actions> </Rule> <Condition Source="[Model.Dormant]" SourceValue="true"> <Actions> <Set Target="[Text.Color]" Value=“[DormantBlue]"/> </Actions> </Condition> <Rules> Play

25. Media Center Markup LanguageAnatomy of a button Use a combination of visual primitives, layouts, and rules to generate effects 23-Apr-2009 UK Media Center & WHS User Group 20 <Rules> <Rule> <Conditions> <Equality Source="[Input.KeyFocus]“ Value="true"/> </Conditions> <Actions> <Set Target="[Background.Content]" Value="[FocusImage]”/> </Actions> </Rule> <Condition Source="[Model.Dormant]" SourceValue="true"> <Actions> <Set Target="[Text.Color]" Value=“[DormantBlue]"/> </Actions> </Condition> <Rules> Play

26. Media Center Markup LanguageModelItems Built-in objects “known” to MCML – can be inherited from Can be used safely to interact with View Items(Model Items are created on the application thread) Model Items can trigger actions in their associated View (using the FirePropertyChangedmethod) Have special functions in the Media Center environment (e.g. ArrayListDataSet) 23-Apr-2009 UK Media Center & WHS User Group 21

27. Media Center Markup LanguageBuilt-in ModelItem Examples ArrayListDataSet BooleanChoice ByteRangedValue Choice Command EditableText Image IntRangedValue ListDataSet ModelItem RangedValue VirtualList 23-Apr-2009 UK Media Center & WHS User Group 22

28. The Media Center API Access to non-visual elements of Media Center Transport and volume controls Launch applications and navigate to pages Play media Show dialogs Control DVD Changers Access scheduled and recorded TV metadata 23-Apr-2009 UK Media Center & WHS User Group 23

29. Examples of add-ins for Media Center 23-Apr-2009 UK Media Center & WHS User Group 24 GridSearch for Media CenterTM © JFDI Engineering

30. Examples of add-ins for Media Center 23-Apr-2009 UK Media Center & WHS User Group 25 Niveus Weather © Niveus Media, Inc.

31. Examples of add-ins for Media Center 23-Apr-2009 UK Media Center & WHS User Group 26 Life|Ware © Exceptional Innovation, LLC

32. Examples of add-ins for Media Center 23-Apr-2009 UK Media Center & WHS User Group 27 Niveus Movie Library © Niveus Media, Inc.

33. Where next? Read the SDK help file from start to finish! Play with the MCML Sampler in the SDK Install and play with the Q and Z applications Experiment with creating your own controls Experiment with creating layouts Get help from the community http://discuss.mediacentersandbox.com Start developing! 23-Apr-2009 UK Media Center & WHS User Group 28