Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern XAML Development - Matt Lacey

284 views

Published on

A slightly modified version of the slides used in a talk given first at #SWETUGG

More details at https://www.mrlacey.com/2020/02/modern-xaml-development-slides-and.html

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Modern XAML Development - Matt Lacey

  1. 1. Modern XAML Development Matt Lacey @MRLacey
  2. 2. Plan Of Action 1. Quick history lesson 2. Look at tools 1. Now 2. Coming soon
  3. 3. WinForms •Binary formats hard to manage •Hard to style (owner-drawn controls) •Hard to decouple presentation from logic •Hard to compose and WPF •Text based formats •Flexible styling •MVVM & Binding •Composition fundamental
  4. 4. Windows Forms WPF ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ +Win7
  5. 5. <Image Source="cat.png" />
  6. 6. <Ellipse Width="360" Height="360" Margin="218.108,62.5,216.891,0" Fill="Black" /> <Ellipse Width="60" Height="60" Margin="184.346,184.684,550.653,177.815" Fill="Black" /> <Ellipse Width="60" Height="60" Margin="551.145,184.684,183.854,177.815" Fill="Black" /> <Ellipse Width="80" Height="80" Margin="489.673,-0.281,225.326,342.78" Fill="Black" /> <Ellipse Width="80" Height="80" Margin="218.108,-0.281,496.891,342.78" Fill="Black" /> <Rectangle Margin="218.108,48.371,224.892,185.024" Fill="Black" /> <Rectangle Margin="297.21,-10.721,472.86,336.325" Fill="Black" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="-60.283" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle Margin="457.217,-2.696,306.225,330.044" Fill="Black" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="60" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle Margin="212.313,214.246,550.968,94.789" Fill="Black" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="153.124" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle Margin="553.955,210.798,209.326,97.882" Fill="Black" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="207" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Ellipse Height="290" Margin="247.5,104.626,248.82,27.874" Fill="Gold" /> <Rectangle Height="200" Margin="247.5,79.719,253.168,142.78" Fill="Gold" /> <Rectangle Height="100" Margin="212.955,41.896,450.737,280.603" Fill="Gold" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="30.927" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Margin="443.738,44.574,219.954,277.925" Fill="Gold" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform>
  7. 7. <Canvas Name="svg34" Width="64" Height="64"> <Canvas.RenderTransform> <TranslateTransform X="0" Y="0"/> </Canvas.RenderTransform> <Canvas.Resources/> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path2" Fill="#FF4C5359"> <Path.Data> <PathGeometry Figures="m4.5 2.2c-3.5 2.2-3.4 25.5.8 33l26.1-16c-4-7.1-23.6- 19-26.9-17" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4" Fill="#FFF7A4A4"> <Path.Data> <PathGeometry Figures="m9.5 11.3c-1.5.9-2.2 16.2.4 21l16.7-10.2c-2.4-4.6- 15.7-11.6-17.1-10.8" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path6" Fill="#FF4C5359"> <Path.Data> <PathGeometry Figures="m59.5 2.2c3.5 2.2 3.4 25.5-.7 33l-26.1-16c3.9-7.1 23.5-19 26.8-17" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path8" Fill="#FFF7A4A4"> <Path.Data> <PathGeometry Figures="m54.5 11.3c1.5.9 2.2 16.2-.4 21l-16.8-10.2c2.5-4.6 15.8-11.6 17.2-10.8" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path10" Fill="#FF4C5359"> <Path.Data> <PathGeometry Figures="m31.8 13.1c-27.1 0-29.6 19.4-29.6 30.4 0 4.5 13.2 18.5 29.6 18.5 16.4 0 29.6-14 29.6-18.5 0-11-2.5-30.4-29.6-30.4" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path12" Fill="#FFBFFFAB"> <Path.Data> <PathGeometry Figures="m24.2 38.7c0 0-3.1 4.8-8.8 3.3-5.7-1.5-6-7.2-6- 7.2s3.1-4.8 8.8-3.3c5.8 1.5 6 7.2 6 7.2" FillRule="NonZero"/> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path14" Fill="#FF93E67F"> <Path.Data> <PathGeometry Figures="m23.6 36.2c0 0-2.7 3-6.5 3-4.1 0-6.5-5.9-6.5-5.9s2.7- 3.1 7.6-1.9c4.5 1.2 5.4 4.8 5.4 4.8" FillRule="NonZero"/>
  8. 8. <Grid> <TextBlock Foreground="LimeGreen" Background="Black" FontFamily="Courier New"> <Run xml:space="preserve"> __ _,-;''';`'-,. _/', `; `; ` , _..,-'' ' ` ` ` | ;._.,,-' .| |,_ ,, ` | `;' ;' ;, `, ; | ' ' . `; __` ,'__ ` , ` ; | ; ; (6_); (6_) ; | , ' | / ;; _,' ,. ` `, ' `-._ | __//_________ ,;.=..`_..=.,' -' ,'' _,--''------'''' _pb__,`"=,,,=="',___,,,-----'''----'_'_'_''-;'' -----------------------'''''' ''''' ) /' ``,,,___/__/'_____, `--,,,--,-,''' __,,-' /' ` /'_,,--'' | ( `' </Run> </TextBlock> </Grid>
  9. 9. <TextBlock Text="🐈" /> <TextBlock Text="🐈" />
  10. 10. <controls:AnimatedVisualPlayer> <lottie:LottieVisualSource UriSource="ms-appx:///kitten.json"/> </controls:AnimatedVisualPlayer>
  11. 11. What is XAML?
  12. 12. CODE!
  13. 13. XAML is code
  14. 14. XAML is code like C# is code
  15. 15. XAML is code like VB is code
  16. 16. XAML is code like C++ is code
  17. 17. XAML is code like F# is code
  18. 18. XAML is code like HTML is code
  19. 19. XAML is code like CSS is code
  20. 20. XAML is code like JS is code
  21. 21. XAML is code like C# is code
  22. 22. XAML is code • Human and machine readable • Tries to make life easier for developers • Has some assumptions, restrictions, and constraints • Highly structured (yet flexible) • Offers multiple ways of doing things • Different versions can be used in different places • Supported by specific tooling
  23. 23. Expectations C# & XAML
  24. 24. “Opportunities for improvement”
  25. 25. XAML Styler
  26. 26. Creation
  27. 27. Analysis+
  28. 28. Designer extensibility
  29. 29. Design Time Data <TextBlock Text="Hello" d:Text="Hi" dt:DesignTime.Text="Hej" />
  30. 30. 3 ways to bind Text="{Binding Item}" Text="{x:Bind Item}" [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
  31. 31. Binding Error Window
  32. 32. In app Toolbar & Live Windows
  33. 33. + => + =>
  34. 34. Compile time XAML Analysis
  35. 35. What did we cover today? • XAML is not dead • Microsoft are investing in tooling • 3rd parties & the community are making improvements • There’s lots to help you (think C#)
  36. 36. https://www.mrlacey.com/swetugg- talk
  37. 37. Questions? What about Blend?
  38. 38. Questions? What about XAML Standard?
  39. 39. Questions? Why not just do it all in C#?

×