Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Road to UI Library

Da5ad051bd594c29c3ddd5ba80327779?s=47 Grabacr07
December 01, 2014

Road to UI Library

Room metro #28 XAML Day で使用した資料です。
コントロール自作、そしてライブラリ化するための方法や注意点など。

Da5ad051bd594c29c3ddd5ba80327779?s=128

Grabacr07

December 01, 2014
Tweet

Transcript

  1. Road to UI Library 2014/11/29 Room metro #28 Manato KAMEYA

    (@Grabacr07)
  2. Subject • UI Library 作ってました − MetroRadiance (最近弄ってない…) − UserControl

    / CustomControl の使いどころ共有 デモ & ライブコーディング中心 • UI Library によって − コントロール / UI 資産の再利用性を高める − アプリのブランド化 あたりに興味を持って頂けると!
  3. Agenda デスクトップ アプリがこの先 生きのこるには Introduction CustomControl UserControl Conclusion Road to

    UI Library
  4. • 内容は個人に帰属します 所属する組織を代表するものではありません

  5. Introduction

  6. Self Introduction • Work − 株式会社グラニ − Unity + C#

    でゲーム開発、まれに WPF • Private activity − Web: http://grabacr.net/ − Twitter: @Grabacr07 (ぐらばく) − めとべや東京勉強会スタッフ − Microsoft MVP for Visual C# (2014/04 ~)
  7. KanColleViewer • Windows Desktop app − .NET Framework 4.5 −

    Visual C# + WPF • 艦これ プレイングツール Internet Explorer Shell + FiddlerCore • 2013/12 公開 (約 11 ヶ月) − 1,650,000 downloads − Azure の料金がやゔぁい!
  8. KanColleViewer • 常にエゴサーチ (twitter) − メンタル鍛えられます • ユーザーの反応 − 機能に対する反応・要望

    − UI に対する反応・要望 • デベロッパーの反応 − 「この見た目どうやって作んの」 UI ライブラリ自作しました
  9. UI Libraries • 最近のリッチなデスクトップ アプリ

  10. MetroRadiance • WPF カスタム コントロール ライブラリ − カスタム コントロール&スタイル群 −

    別アプリでも同じ外観を再現できる ライブラリ (アセンブリ) を参照し、App.xaml の ResourceDictionary でマージするだけ − 自分で作ってるアプリのブランド化 社内向けツールとかも <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Icons.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Dark.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Accents/Purple.xaml" /> </ResourceDictionary.MergedDictionaries>
  11. UI Libraries • 最近のリッチなデスクトップ アプリ JetBrains 社のインストーラー • 独自 Style

    のコントロール群 • 標準 Chrome なし • Dark っぽいテーマ • 進行状況不定バー (WinRT のアレ) <ProgressBar IsIndeterminate="True"> • ウィンドウの枠が光る • ウィンドウの枠が光る
  12. Elysium • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://elysium.codeplex.com/ − Zune

    風コントロール・スタイル群 再現度はあまり高くない… − Visual Studio 2010 or 2012 が必要
  13. Elysium • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://elysium.codeplex.com/ − Zune

    風コントロール・スタイル群 再現度はあまり高くない… − インストーラーに弾かれる VS2010 or 2012 が必要って言われる − 独自のトースト通知システム Windows 7 でも通知できるが…
  14. MahApps.Metro • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://mahapps.com/MahApps.Metro/ − Windows

    ストアアプリ風 コントロール・スタイル群 − 割とおすすめ
  15. のちょっとした話? Template

  16. Visual Structure (default Controls) • 既存コントロールの構造を知るには − 既定のテンプレートを生成

  17. Another Controls ここにあるコントロールがすべて… なわけはない

  18. Another Controls 右クリック > アイテムの選択 …で、表示するコントロールを選べる

  19. Another Controls System.Windows.Controls.Primitives 名前空間 RepeatButton, Popup, …

  20. まずはオリジナルのコントロールの作成 User Control

  21. Original Control • NumericUpDown − WPF にない鉄板コントロールということでひとつ − ボタンが押しにくく、 使い勝手悪くなりがち

    … を、今ここで実際に作ってみましょう (!) 要件 • ユーザーによるテキスト入力 • ボタン (値 +1) • ボタン (値 - 1)
  22. Case 1: User Control

  23. Case 1: User Control • csproj > 追加 > ユーザー

    コントロール • NumericUpDown.xaml
  24. Case 1: User Control • csproj > 追加 > ユーザー

    コントロール • NumericUpDown.xaml <DockPanel> <StackPanel DockPanel.Dock="Right"> <Button Content="▲" Click="CountUp" /> <Button Content="▼" Click="CountDown" /> </StackPanel> <TextBox Text="{Binding ElementName=Root, Path=Value, Mode=TwoWay}" /> </DockPanel>
  25. • csproj > 追加 > ユーザー コントロール • NumericUpDown.xaml.cs (UserControl

    からの派生) public int Value { get { return (int)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(NumericUpDown), new PropertyMetadata(0)); private void CountUp(object sender, RoutedEventArgs e) { this.Value++; } Case 1: User Control 依存関係プロパティ
  26. Case 1: User Control • 完成! … と、思うじゃろ? − そのときしか使わない場合は、それで完成。

    − 他のプロジェクトでも使い回したい場合は…? そして、他のプロジェクトでは外観を変更したい場合は…? 次のアプリでも使うよ ただしボタンをデカくしてくれ 大変申し訳ございません早急に 影響調査し対応致しますので今 暫くお待ち頂きますよう宜しk
  27. Feature of User Control • UserControl 型からの派生 − アプリケーション構築と同じ方法で作れる ▫

    Window / Page を作成するのと同じ要領で、ポトペタ開発 ▫ 既存のコンポーネントだけで構成されている − 複雑なカスタマイズをサポートしない Background や BorderBrush を外部から指定する、程度の簡単なカスタマイズはでちる しかし、DataTemplate や ControlTemplate による外部からのカスタマイズはできない
  28. 外観をカスタマイズできるコントロールの作成 Custom Control

  29. Case 2: Custom Control

  30. Case 2: Custom Control • csproj > 追加 > 新しい項目

    > WPF > カスタム コントロール (Universal apps の場合は「テンプレート コントロール」) − NumericUpDown2.cs − Themes/Generic.xaml <Style TargetType="{x:Type local:NumericUpDown2}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:NumericUpDown2}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> 操作ロジック (コントロールの機能の実装) 視覚的表現 (コントロールの外観の実装) NumericUpDown2 は どうやって外観の定義まで 辿り着くか?
  31. Feature of Custom Control • Control 型からの派生 − ロジックと外観の完全な分離 ▫

    コントロールの振る舞いを、ロジック (.cs) に ▫ コントロールの外観を、Style/Template (Generic.xaml) に − .NET Framework が提供するコントロールと同じ実装 − コントロールの外観をカスタマイズ可能 ControlTemplate により、あらゆる外観に設定可能
  32. Parts and States Model • 視覚的な構造と動作は ControlTemplate で定義 − 外観を直接ロジックで書くのはダメゼッタイ

    − NumericUpDown の場合 負の値のときは 文字を赤くしたい… TextBox の Foreground を SolidColorBrush の Red に…
  33. Parts and States Model • 視覚的な構造と動作は ControlTemplate で定義 − 外観を直接ロジックで書くのはダメゼッタイ

    − NumericUpDown の場合 負の値のときは 文字を赤くしたい… TextBox の Foreground を SolidColorBrush の Red に… ValueStates • Positive • Negative 正負を VisualState で保持 負の値でどうなるか、は ControlTemplate で自由に実装
  34. Parts and States Model • ControlTemplate とロジックの接点 − コントロールの要件 (命題)

    を満たすうえで必要なパーツ − NumericUpDown の場合 ▫ Click イベントを購読するため、ロジックから参照しなければならない Value を増減させるための Button が必ず必要 名前付きパーツと OnApplyTemplate メソッド
  35. Parts and States Model • 名前付きパーツ − 例えば、System.Windows.Controls.ComboBox の場合 http://msdn.microsoft.com/ja-jp/library/ms752094.aspx

  36. Parts and States Model • 名前付きパーツ − 例えば、System.Windows.Controls.ComboBox の場合 http://msdn.microsoft.com/ja-jp/library/ms752094.aspx

    <Grid x:Name="templateRoot" SnapsToDevicePixels="true"> <!-- 中略 --> <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> <!-- 中略 --> <Border x:Name="border" Background="{StaticResource TextBox.Static.Background}" Margin="{TemplateBinding BorderThickness}"> <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> </Grid> ComboBox の ControlTemplate (default)
  37. Parts and States Model • OnApplyTemplate メソッド − ControlTemplate の

    Visual Tree が構築されたとき実行される ロジックから ControlTemplate の実装にアクセスできる最も早いタイミング • GetTemplateChild メソッド − ControlTemplate 内の名前付き要素を返す ControlTemplate 内にある名前付きパーツのインスタンスを取得できる!
  38. Parts and States Model • コントロール コントラクト − ロジックが使用する視覚的要素 名前付きパーツ

    − 視覚的に作用する public Property NumericUpDown でいう Value プロパティなど − コントロールの状態とグループ VisualStates / VisualStatesGroup
  39. Parts and States Model • コントロール コントラクト − ロジックが使用する視覚的要素 名前付きパーツ

    − 視覚的に作用する public Property NumericUpDown でいう Value プロパティなど − コントロールの状態とグループ VisualStates / VisualStatesGroup [TemplatePart(Name = "PART_UpButton", Type = typeof(Button))] [TemplatePart(Name = "PART_DownButton", Type = typeof(Button))] public class CustomControl1 : Control { private Button upButton; private Button downButton; public override void OnApplyTemplate() { base.OnApplyTemplate(); this.upButton = this.GetTemplateChild("PART_UpButton") as Button; if (this.upButton != null) { this.upButton.Click += (sender, e) => this.Value++; } // 以下略
  40. Custom Control • リソースを検索する順序 1. 要素レベル 参照する要素からルート要素まで辿って検索 2. アプリケーション レベル

    Application (App.xaml) 内で定義されたリソース 3. テーマ レベル Themes フォルダー内。つまり Generic.xaml Luna.NormalColor.xaml とか使わんし…
  41. Custom Control • リソースを検索する順序 1. 要素レベル 参照する要素からルート要素まで辿って検索 2. アプリケーション レベル

    Application (App.xaml) 内で定義されたリソース 3. テーマ レベル Themes フォルダー内。つまり Generic.xaml Luna.NormalColor.xaml とか使わんし… <UserControl> <Grid> <StackPanel> <Border> <local:NumericUpDown /> </Border> </StackPanel> </Grid> </UserControl> NumericUpDown.Resources、 Border.Resources、StackPanel.Resources、 Grid.Resources、… の順に検索
  42. Custom Control • リソースを検索する順序 1. 要素レベル 参照する要素からルート要素まで辿って検索 2. アプリケーション レベル

    Application (App.xaml) 内で定義されたリソース 3. テーマ レベル Themes フォルダー内。つまり Generic.xaml Luna.NormalColor.xaml とか使わんし… <Applicaton> <Appliction.Resources> <!-- ここにあるやつ --> </Appliction.Resources> </Applicaton> ※ ただしアプリケーションのみ ライブラリ (.dll) は Application を 持たないので
  43. Custom Control • リソースを検索する順序 1. 要素レベル 参照する要素からルート要素まで辿って検索 2. アプリケーション レベル

    Application (App.xaml) 内で定義されたリソース 3. テーマ レベル Themes フォルダー内。つまり Generic.xaml Luna.NormalColor.xaml とか使わんし…
  44. DependentUpon - Generic.xaml • Generic.xaml、だいたい溢れる カスタム コントロールが増えてくると、保守たいへん − なので、Generic.<CustomControlName>.xaml に分離して

    DependentUpon すると良さげ .csproj 手動編集はつらすぎるので、拡張機能「VSCommands」とかとか
  45. Without creating a new control • 新しいコントロールを自作しないための方法 作らないで済むならそれに越したことはなく。 CircleButton、とか作りたくなってくるが… マウス

    オーバーと クリック時に 全体の色を変える… 円と矢印、 押しやすいように Margin 広めで… Dark テーマに 対応…
  46. Without creating a new control • 新しいコントロールを自作しないための方法 作らないで済むならそれに越したことはなく。 CircleButton、とか作りたくなってくるが… マウス

    オーバーと クリック時に 全体の色を変える… 円と矢印、 押しやすいように Margin 広めで… <Button> <Grid> <Ellipse /> <Path Data="" /> </Grid> </Button> Button + リッチ コンテンツ + Style で実現可能 カスタム コントロールを作る必要は、ない Dark テーマに 対応…
  47. Find the best possible choice • コントロールの価値命題 − こそが重要 −

    外観ではなく、コントロールの原理 / 振る舞い XAML Platform では、外観はいくらでも作り込めるので、一切関係ない TabControl ListBox ItemsControl 見た目は同じでも、要件が異なるので、それぞれ違うコントロールをベースにしている
  48. Road to UI Library • 作ったコントロールの再利用性を高めるために − UserControl はワンオフの実装、その時だけに使える −

    CustomControl は、WPF などと同じコントロールの実装 − 再利用性を見込んで、の実装となると 断然カスタム コントロール (テンプレート コントロール)
  49. Conclusion

  50. Advent Calendar • XAML Advent Calendar 2014 http://qiita.com/advent-calendar/2014/xaml • ご参加頂きたく。