Road to UI Library

Road toUI Library
2014/11/29 Room metro #28Manato KAMEYA (@Grabacr07)

Subject
•UI Library 作ってました
−MetroRadiance(最近弄ってない…)
−UserControl/ CustomControlの使いどころ共有デモ& ライブコーディング中心
•UI Library によって
−コントロール/ UI 資産の再利用性を高める
−アプリのブランド化
あたりに興味を持って頂けると！

Agenda
デスクトップアプリがこの先生きのこるには
Introduction
CustomControl
UserControl
Conclusion
Road to UI Library

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

Self Introduction
•Work
−株式会社グラニ
−Unity + C# でゲーム開発、まれにWPF
•Private activity
−Web: http://grabacr.net/
−Twitter: @Grabacr07(ぐらばく)
−めとべや東京勉強会スタッフ
−Microsoft MVP for Visual C#(2014/04 ～)

KanColleViewer
•Windows Desktop app
−.NET Framework 4.5
−Visual C# + WPF
•艦これプレイングツール Internet Explorer Shell + FiddlerCore
•2013/12 公開(約11 ヶ月)
−1,650,000 downloads
−Azure の料金がやうﾞぁい！

KanColleViewer
•常にエゴサーチ(twitter)
−メンタル鍛えられます
•ユーザーの反応
−機能に対する反応･要望
−UI に対する反応･要望
•デベロッパーの反応
−｢この見た目どうやって作んの｣
UI ライブラリ自作しました

UI Libraries
•最近のリッチなデスクトップアプリ

MetroRadiance
•WPF カスタムコントロールライブラリ
−カスタムコントロール＆スタイル群
−別アプリでも同じ外観を再現できるライブラリ(アセンブリ) を参照し、App.xamlのResourceDictionaryでマージするだけ
−自分で作ってるアプリのブランド化社内向けツールとかも <ResourceDictionary.MergedDictionaries> <ResourceDictionarySource="pack://application:,,,/MyControlLibrary;component/Styles/Controls.xaml" /> <ResourceDictionarySource="pack://application:,,,/MyControlLibrary;component/Styles/Icons.xaml" /> <ResourceDictionarySource="pack://application:,,,/MyControlLibrary;component/Themes/Dark.xaml" /> <ResourceDictionarySource="pack://application:,,,/MyControlLibrary;component/Themes/Accents/Purple.xaml" /> </ResourceDictionary.MergedDictionaries>

UI Libraries
•最近のリッチなデスクトップアプリ
JetBrains社のインストーラー
•独自Style のコントロール群
•標準Chrome なし
•Dark っぽいテーマ
•進行状況不定バー(WinRTのアレ) <ProgressBarIsIndeterminate="True">
•ウィンドウの枠が光る
•ウィンドウの枠が光る

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

Elysium
−http://elysium.codeplex.com/
−Zune 風コントロール･スタイル群再現度はあまり高くない…
−インストーラーに弾かれる VS2010 or 2012 が必要って言われる
−独自のトースト通知システム Windows 7 でも通知できるが…

MahApps.Metro
−http://mahapps.com/MahApps.Metro/
−Windows ストアアプリ風コントロール･スタイル群
−割とおすすめ

のちょっとした話？
Template

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

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

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

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

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

Original Control
•NumericUpDown
−WPF にない鉄板コントロールということでひとつ
−ボタンが押しにくく、使い勝手悪くなりがち
…を、今ここで実際に作ってみましょう(！)
要件
•ユーザーによるテキスト入力
•ボタン(値+1)
•ボタン(値-1)

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

•NumericUpDown.xaml
<DockPanel>
<StackPanelDockPanel.Dock="Right">
<ButtonContent="▲"
Click="CountUp" />
<ButtonContent="▼"
Click="CountDown" />
</StackPanel>
<TextBoxText="{BindingElementName=Root,Path=Value,Mode=TwoWay}" />
</DockPanel>

•NumericUpDown.xaml.cs(UserControlからの派生)
publicintValue
{
get{return(int)GetValue(ValueProperty);}
set{SetValue(ValueProperty,value);}
}
publicstaticreadonlyDependencyPropertyValueProperty=
DependencyProperty.Register("Value",typeof(int),typeof(NumericUpDown),newPropertyMetadata(0));
privatevoidCountUp(objectsender,RoutedEventArgse)
{
this.Value++;
}
Case1: UserControl
依存関係プロパティ

•完成！… と、思うじゃろ？
−そのときしか使わない場合は、それで完成。
−他のプロジェクトでも使い回したい場合は…？そして、他のプロジェクトでは外観を変更したい場合は…？
次のアプリでも使うよ
ただしボタンをデカくしてくれ
大変申し訳ございません早急に影響調査し対応致しますので今暫くお待ち頂きますよう宜しｋ

Feature of User Control
•UserControl型からの派生
−アプリケーション構築と同じ方法で作れる
▫Window / Page を作成するのと同じ要領で、ポトペタ開発
▫既存のコンポーネントだけで構成されている
−複雑なカスタマイズをサポートしない Background やBorderBrushを外部から指定する、程度の簡単なカスタマイズはでちるしかし、DataTemplateやControlTemplateによる外部からのカスタマイズはできない

外観をカスタマイズできるコントロールの作成
Custom Control

Case 2: Custom Control
•csproj> 追加> 新しい項目> WPF> カスタムコントロール (Universal apps の場合は「テンプレートコントロール」)
−NumericUpDown2.cs
−Themes/Generic.xaml
<StyleTargetType="{x:Typelocal:NumericUpDown2}">
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:Typelocal:NumericUpDown2}">
<BorderBackground="{TemplateBindingBackground}"
BorderBrush="{TemplateBindingBorderBrush}"
BorderThickness="{TemplateBindingBorderThickness}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
操作ロジック(コントロールの機能の実装)
視覚的表現(コントロールの外観の実装)
NumericUpDown2 は
どうやって外観の定義まで
辿り着くか？

Feature of Custom Control
•Control 型からの派生
−ロジックと外観の完全な分離
▫コントロールの振る舞いを、ロジック(.cs) に
▫コントロールの外観を、Style/Template(Generic.xaml) に
−.NET Framework が提供するコントロールと同じ実装
−コントロールの外観をカスタマイズ可能 ControlTemplateにより、あらゆる外観に設定可能

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

•視覚的な構造と動作はControlTemplateで定義
−外観を直接ロジックで書くのはダメゼッタイ
負の値のときは
文字を赤くしたい…
TextBoxのForeground を
SolidColorBrushのRed に…
ValueStates
•Positive
•Negative
正負をVisualStateで保持
負の値でどうなるか、は
ControlTemplateで自由に実装

•ControlTemplateとロジックの接点
−コントロールの要件(命題) を満たすうえで必要なパーツ
▫Click イベントを購読するため、ロジックから参照しなければならない
Value を増減させるためのButton が必ず必要
名前付きパーツとOnApplyTemplateメソッド

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

•名前付きパーツ
−例えば、System.Windows.Controls.ComboBoxの場合 http://msdn.microsoft.com/ja-jp/library/ms752094.aspx
<Gridx:Name="templateRoot"
SnapsToDevicePixels="true">

<Popupx:Name="PART_Popup"
AllowsTransparency="true"
Grid.ColumnSpan="2"
IsOpen="{BindingIsDropDownOpen,RelativeSource={RelativeSourceTemplatedParent}}"
PopupAnimation="{DynamicResource{x:StaticSystemParameters.ComboBoxPopupAnimationKey}}"
Placement="Bottom">

<Borderx:Name="border"
Background="{StaticResourceTextBox.Static.Background}"
Margin="{TemplateBindingBorderThickness}">
<TextBoxx:Name="PART_EditableTextBox"
HorizontalContentAlignment="{TemplateBindingHorizontalContentAlignment}"
IsReadOnly="{BindingIsReadOnly,RelativeSource={RelativeSourceTemplatedParent}}"
Margin="{TemplateBindingPadding}"
Style="{StaticResourceComboBoxEditableTextBox}"
VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}" />
</Border>
</Grid>
ComboBoxのControlTemplate(default)

•OnApplyTemplateメソッド
−ControlTemplateのVisual Tree が構築されたとき実行されるロジックからControlTemplateの実装にアクセスできる最も早いタイミング
•GetTemplateChildメソッド
−ControlTemplate内の名前付き要素を返す ControlTemplate内にある名前付きパーツのインスタンスを取得できる！

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

•コントロールコントラクト
−ロジックが使用する視覚的要素名前付きパーツ
−視覚的に作用するpublic PropertyNumericUpDownでいうValue プロパティなど
−コントロールの状態とグループ VisualStates/ VisualStatesGroup
[TemplatePart(Name = "PART_UpButton", Type = typeof(Button))]
[TemplatePart(Name = "PART_DownButton", Type = typeof(Button))]
publicclassCustomControl1: Control
{
privateButtonupButton;
privateButtondownButton;
publicoverridevoidOnApplyTemplate()
{
base.OnApplyTemplate();
this.upButton= this.GetTemplateChild("PART_UpButton") asButton;
if(this.upButton!= null)
{
this.upButton.Click+= (sender, e) => this.Value++;
}
// 以下略

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

Custom Control
<UserControl>
<Grid>
<StackPanel>
<Border>
<local:NumericUpDown/>
</Border>
</StackPanel>
</Grid>
</UserControl>
NumericUpDown.Resources、
Border.Resources、StackPanel.Resources、
Grid.Resources、… の順に検索

Custom Control
<Applicaton>
<Appliction.Resources>

</Appliction.Resources>
</Applicaton>
※ただしアプリケーションのみライブラリ(.dll) はApplication を
持たないので

DependentUpon-Generic.xaml
•Generic.xaml、だいたい溢れるカスタムコントロールが増えてくると、保守たいへん
−なので、Generic.<CustomControlName>.xamlに分離して DependentUponすると良さげ
.csproj手動編集はつらすぎるので、拡張機能「VSCommands」とかとか

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

Without creating a new control
•新しいコントロールを自作しないための方法作らないで済むならそれに越したことはなく。
CircleButton、とか作りたくなってくるが…
マウスオーバーと
クリック時に
全体の色を変える…
円と矢印、
押しやすいように
Margin 広めで…
<Button>
<Grid>
<Ellipse/>
<PathData=""/>
</Grid>
</Button>
Button + リッチコンテンツ+ Style で実現可能カスタムコントロールを作る必要は、ない
Dark テーマに
対応…

Find the best possible choice
•コントロールの価値命題
−こそが重要
−外観ではなく、コントロールの原理/ 振る舞い XAML Platform では、外観はいくらでも作り込めるので、一切関係ない
TabControl
ListBox
ItemsControl
見た目は同じでも、要件が異なるので、それぞれ違うコントロールをベースにしている

Road to UI Library
•作ったコントロールの再利用性を高めるために
−UserControlはワンオフの実装、その時だけに使える
−CustomControlは、WPF などと同じコントロールの実装
−再利用性を見込んで、の実装となると断然カスタムコントロール(テンプレートコントロール)

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

Road to UI Library

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Road to UI Library

Similar to Road to UI Library (20)

Recently uploaded

Recently uploaded (10)

Road to UI Library