XAML＆Application Platform ～これまでとこれから～
- 2. 本日の内容
- 4. XAML eXtensible Application Markup Language
- 6. XAMLの役割 こう書くためのものｗ class MainWindow : Window { private Button helloWorldButton; private void InitializeComponent() { this.Title = "MainWindow"; this.Height = 350; this.Width = 525; this.helloWorldButton = new Button { Content = "Hello world", HorizontalAlignment = HorizontalAlignment.Left, VerticalAlignment = VerticalAlignment.Top, Margin = new Thickness(10, 10, 0, 0), Width = 100 }; this.helloWorldButton.Click += helloWorldButton_Click; var grid = new Grid(); grid.Children.Add(this.helloWorldButton); this.Content = grid; } : } <Window x:Class=“HelloWorld.MainWindow“ xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Title=”MainWindow” Height=“350” Width=“525”> <Grid> <Button x:Name=“helloWorldButton“ Content=”Hello world“ HorizontalAlignment=”Left“ Margin=”10,10,0,0“ VerticalAlignment=”Top“ Width=”100“ Click=”helloWorldButton_Click”/> </Grid> </Window>
- 7. オブジェクトのインスタンス化 public class Person { public string name { get; set; } public bool bMan { get; set; } public int nCats { get; set; } } <Person name=“Shinobu" bMan=“True“ nCats="4"/> Person shinobu = new Person { name =“Shinobu”, bMan = True; nCats = 4 };
- 10. XAML XML要素でのオブジェクト要素表現 Elements = CLR オブジェクトのインスタンス Attribute＝CLR オブジェクトのプロパティ / イベント Content＝ CLR オブジェクトのプロパティ <Button Click="showUpdatesButton-Click"> Show updates </Button>
- 11. XAML化の副産物 Collections コレクション要素の匿名化 Ilist, Idictionary, and Arrays Collection + Conetnt <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <StackPanel> <Button> Button 1</Button> <Button> Button 2</Button> <Button> Button 3</Button> <StackPanel>
- 12. XAML化の副産物 TypeConverters Color Thickness Enumerators Uri Point <Grid Background="White" Margin="200,100"> <Border Background="LightBlue" BorderThickness="2" Padding="15"> <Image Source=“cats.jpg” Stretch="UniformToFill"/> </Border> </Grid>
- 14. Converter を使った型変換 <TextBlock Text="Sample Text" Visibility="{Binding ElementName=check1, Path=IsChecked, Converter={StaticResource BoolVisibilityConverter}}" /> public class BoolVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, …. { return ((bool?)value == true) ? Visibility.Visible : Visibility.Hidden; } public object ConvertBack(object value, Type targetType, …. { throw new NotImplementedException(); } }
- 15. VisualStateで動的な切り替え <VisualState.Setters> <Setter Target="splitView.DisplayMode" Value="Inline" /> </VisualState.Setters> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="splitView.DisplayMode" Value="Overlay" /> </VisualState.Setters> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth= "0" /> </VisualState.StateTriggers>
- 20. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 Windows の変遷 GDI から Direct Xへ WDDM マルチデバイス化 UXの多様化
- 21. Windows Vista ディスプレイドライバーモデルの変更 XPDM（Windows XP display Driver Model）から WDDM （Windows Display Driver Model) へ デスクトップウィンドウマネージャー (DWM) GDI アプリのエミュレーションと合成 Emulation By DWM
- 23. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 Windows Application Platform
- 24. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 Windows Application Platform XAML コード分離 Rich Web Multi Device
- 25. XAML を使ったアプリの系譜 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
- 26. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 新たなる刺客 Xamarin.Forms Xamarin Rich Web Multi DeviceXAML コード分離
- 27. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 生き残った3つのテクノロジ Windows Form Xamarin
- 28. XAML ベースアプリの対応OSと問題 WPF Windows 7 / Windows 8.x / Windows 10 Desktop UWP Windows 10 Desktop / Desktop / Mobile / Team / XBOX / IoT / Holographic Xamarin Forms iOS / Android / Windows Phone 8.x Windows 10 Desktop / Desktop / Mobile / Team / XBOX / IoT / Holographic
- 29. XAML の標準化 XAML Standard による標準化
- 30. XAML Standard で統一される XAML <!– Xamarin.Forms --> <ContentView> <StackLayout StackOrientation=“Vertical” Spacing=“5”> <Label Text=“Hello World!” HorizontalOptions=“Center” /> <Button Text=“Click me!” Command=“{Binding ClickCommand}” /> <Entry Placeholder=“Enter some text” PlaceholderColor=“Blue” /> </StackLayout> </ContentView> <!-- UWP XAML --> <UserControl> <StackPanel Orientation=“Vertical”> <TextBlock Text=“Hello World!” HorizontalAlignment=“Center” /> <Button Content=“Click me!” Command=“{Binding ClickCommand}” /> <TextBox PlaceholderText=“Enter some text” /> </StackPanel> </UserControl>
- 31. XAML Standard で統一される XAML <!– Xamarin.Forms --> <ContentView> <StackLayout StackOrientation=“Vertical” Spacing=“5”> <Label Text=“Hello World!” HorizontalOptions=“Center” /> <Button Text=“Click me!” Command=“{Binding ClickCommand}” /> <Entry Placeholder=“Enter some text” PlaceholderColor=“Blue” /> </StackLayout> </ContentView> <!-- UWP XAML --> <UserControl> <StackPanel Orientation=“Vertical”> <TextBlock Text=“Hello World!” HorizontalAlignment=“Center” /> <Button Content=“Click me!” Command=“{Binding ClickCommand}” /> <TextBox PlaceholderText=“Enter some text” /> </StackPanel> </UserControl> <!-- XAML Standard --> <UserControl> <StackPanel Orientation=“Vertical” Spacing=“5” > <TextBlock Text=“Hello World!” HorizontalAlignment=“Center” /> <Button Content=“Click me!” Command=“{Binding ClickCommand}” /> <TextBox PlaceholderText=“Enter some text” PlaceholderBrush=“Blue”/> </StackPanel> </UserControl>
- 32. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 XAML の標準化はUWPとXamarin.Formsだけ XAML Standard による標準化
- 33. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 新しい技術はUWPに投資 Fluent Design System New Devices Full Support (Ink Canvas, Surface Dial etc)
- 34. ? ? ? XAML を使ったアプリの将来予測 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020
- 35. 現実的な観点で見た将来への推移推測 Application with UI Mobile : Xamarin Mixed Reality :UWP Web : HTML5 Windows UI : WPF, WinForm Application with non-UI UWP(IoT) Linux
- 36. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 おまけ：Windows Application Platform Windows Form Xamarin
- 39. ホログラム式 (透過型) 没入型 (非透過型) 今日の VR今日の AR 物理現実 デジタル現実複合現実 (MR)
- 42. Windows Mixed Reality Devices Immersive headsets Powered by Windows Mixed Reality
- 49. Introduction to Microsoft Fluent Design System
- 50. Depth Motion Material ScaleLight Fluent Design System
- 51. Reveal Highlight <!-- For opt-in control scenarios, simply apply the appropriate Reveal style --> <Button Width="200“ Height="60“ Style="{ThemeResource ButtonRevealStyle}“ Content="Reveal Button“ Margin="5“ />
- 52. Acrylic <Rectangle Fill="{ThemeResource SystemControlAcrylicWindowBrush}"/> <Rectangle Fill="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}"/> <Rectangle Fill="{ThemeResource SystemControlAcrylicElementAccentMediumHighBrush}"/>
- 53. ParallaxView <WinUI:ParallaxView Source="{x:Bind TrackListView}” VerticalShift="100"> <Image x:Name="BackgroundImage" Source="Assets/background.png“ Stretch="UniformToFill"/> </WinUI:ParallaxView> <ListView x:Name=“TrackListview”> ... </ListView>
- 54. や、やっと終わりか…
- 55. まとめ 現在のMicrosoft の中で 2DアプリのUIはXAMLとHTMLへ XAMLは次の世代にむけて マルチプラットフォーム・マルチデバイスのための アプリのための言語として 進化を続けます
- 56. © 2017 Microsoft Corporation. All rights reserved. 本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。