DockControl for WPF/Silverlight

Size: px

Start display at page:

Download "DockControl for WPF/Silverlight"

わんどちづ
5 years ago
Views:

1 更新グレープシティ株式会社

2 目次製品の概要 2 ComponentOne for WPF/Silverlight のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4-5 手順 2:C1DockTabItems を含む C1DockTabControl の追加 5-6 手順 3: アプリケーションの実行 6-7 クイックリファレンス 8-9 DockControl の使い方 10 ドッキングコントロールの要素 10 ドッキングオプションひし形のドッキングガイドとゾーンレイアウトおよび外観 14 テンプレート 14 テーマ ComponentOne ClearStyle 技術 17 ClearStyle の仕組み ClearStyle プロパティタスク別ヘルプ 20 ドッキングモードの設定ドッキング位置を無効にする方法条件付きドッキング 22 1 Copyright GrapeCity, Inc. All rights reserved.

3 製品の概要 DockControl for WPF/Sliverlight を使用すると WPF アプリケーションで複数のウィンドウを操作できます Microsoft Visual Studio のドッキングシステムと同様に C1DockControl はドッキング可能なウィンドウフローティングウィンドウおよびタブ付きウィンドウを提供しますまたセクションを自動的に非表示にしたり C1DockControl のスタイルを簡単に設定できます DockControl for WPF/Silverlight に含まれるコントロール : C1DockControl C1DockTabControl メモ : 説明内に含まれるクラスおよびメンバーに対するリファレンスへのリンクは原則としてWPF 版のリファレンスページを参照します Silverlight 版については目次から同名のメンバーを参照してください ComponentOne for WPF/Silverlight のヘルプはじめに ComponentOne for WPF/Silverlight のすべてのコンポーネントで共通の使用方法については ComponentOne for WPF/Silverlight ユーザーガイドを参照してください 2 Copyright GrapeCity, Inc. All rights reserved.

4 主な特長以下に C1DockControl の便利な機能をいくつか示しますひし形のドッキングガイドデフォルトでは DockControl は Microsoft の Visual Studio と同様のひし形のドッキングガイドを使用します詳細についてはひし形のドッキングガイドとゾーンを参照してくださいわかりやすいドッキング機能 DockControl をカスタマイズしてアプリケーション内で複数のウィンドウをドッキングしたり浮動化できるわかりやすいドッキング機能を提供できますドッキングゾーン上でウィンドウをドラッグするとドッキングインジケータが表示されドッキング先を示しますフローティングウィンドウアプリケーション内でウィンドウを独立したウィンドウとして浮動化できますタブ付きウィンドウエディタのインスタンス内で開かれるドキュメントは自動的にタブ付きペインに配置されます自動非表示押しピンによる自動非表示機能を使用すると一度により多くのコードを表示できますこの機能により使用していないツールウィンドウを IDE の端に最小化できます豊富な機能を持つプログラム API 高い柔軟性を保ちつつ動作を制限するためにドッキングウィンドウのドッキング状態は豊富な機能を持つプログラム API を使用してプログラムから制御できます 2 つのモニタのサポート (WPF のみ ) 1つのモニタから別のモニタにウィンドウをドラッグするだけでウィンドウを表示するモニタを選択できますこのオプションは WPF プラットフォームでのみ使用できます ClearStyle 技術のサポート DockControl for WPF/Silverlight はコントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる ComponentOne の新しい ClearStyle 技術をサポートします色のプロパティをいくつか設定するだけで C1DockControl 要素のスタイルを簡単に設定できます ComponentOne ClearStyle 技術の詳細については DockControl の ClearStyle プロパティを参照してください 3 Copyright GrapeCity, Inc. All rights reserved.

5 クイックスタートこのクイックスタートは DockControl for WPF/Silverlight を初めて使用するユーザーのために用意されていますこのクイックスタートでは最初に Visual Studio で新しいプロジェクトを作成し C1DockControl をアプリケーションに追加してから C1DockTabItem を含む C1DockTabControl を追加します手順 1: : アプリケーションの作成この手順では Visual Studio で DockControl for WPF/Silverlight を使用して WPF/Silverlight アプリケーションを作成しますプロジェクトをセットアップし C1DockControl コントロールをアプリケーションに追加するには次の手順に従います 1. Visual Studio で [ ファイル ] [[ 新規作成 ] [[ プロジェクト ] を選択します 2. [ 新しいプロジェクト ] ダイアログボックスで左ペインから言語を選択し ( この例では C# を使用 ) テンプレートリストから [WPF/Sliverlight アプリケーション ] を選択します 3. [.NET Framework] ドロップダウンリストで [.NET Framework 3.5] 以上を選択します 4. プロジェクトの名前名前を入力し [OK] をクリックします [ 新しい WPF/Sliverlight アプリケーション ] ダイアログボックスが表示されます 5. 必要に応じて [WPF/Sliverlight アプリケーションを新しい Web サイトでホストする ] ボックスをオフにし [OK] をクリックします MainPage.xaml ファイルが開きます 6. プロジェクトのウィンドウでカーソルを <Grid> タグと </Grid> タグの間に置き 1 回クリックします 7. ツールボックスに移動し [C1DockControl] アイコンを <Grid> タグの間にドラッグし Window.xaml に C1DockControl を追加しますマークアップは次のようになります. WPF <Window xmlns=" xmlns:x=" xmlns:d=" xmlns:c1=" xmlns:mc=" mc:ignorable="d" d:designwidth="640" d:designheight="480"> <Grid x:name="layoutroot"> <c1:c1dockcontrol></c1:c1dockcontrol> </Grid> </Window> Silverlight <UserControl xmlns:c1=" x:class="c1dockcontrolquickstart.mainpage" xmlns=" 4 Copyright GrapeCity, Inc. All rights reserved.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.

6 xmlns:x=" xmlns:d=" xmlns:mc=" mc:ignorable="d" d:designwidth="640" d:designheight="480"> <Grid x:name="layoutroot"> <c1:c1dockcontrol></c1:c1dockcontrol> </Grid> </UserControl> メモ :C1.WPF.Docking または C1.Silverlight.Docking 名前空間と <c1:c1dockcontrol></c1:c1dockcontrol> タグがプロジェクトに追加されています次の手順では C1DockTabItem を含む C1DockTabControl を追加します手順 2:C1DockTabItems を含む C1DockTabControl の追加ここでは C1DockTabItem を含む C1DockTabControl を追加します 1. マークアップで <c1:c1dockcontrol></c1:c1dockcontrol> タグの間にカーソルを置き [Enter] キーを押します 2. 次のマークアップを使用してこれらのタグ内に C1DockTabControl を追加します <c1:c1docktabcontrol Dock="Left"> <c1:c1docktabitem Header=" ツールボックス "> <TextBlock Text=" これはツールボックスです " /> このには Toolbox のラベルが付けられた C1DockTabItem も含まれていますここでアプリケーションを実行すると C1DockTabControl は次のように表示されますアプリケーションを実行したときにタブを選択したり C1DockTabControl をドッキングまたは浮動化できることを確認できるように C1DockTabItem と C1DockTabControl をもう 1 つ追加します 3. の終了タグの後に C1DockTabItem と C1DockTabControl のをもう 1 つ追加します C1DockControl の全体は次のようになります <c1:c1dockcontrol> <c1:c1docktabcontrol Dock="Left"> <c1:c1docktabitem Header=" ツールボックス "> 5 Copyright GrapeCity, Inc. All rights reserved.

<TextBlock Text=" これはツールボックスです " /> <c1:c1docktabitem Header=" プロジェクト "> <TextBlock Text=" ファイルツリー " /> <c1:c1docktabcontrol DockWidth="500" ShowHeader="False"> <c1:c1docktabitem Header="myfile.

ext のテキストです " /> </c1:c1dockcontrol> 次の手順ではアプリケーションを実行してウィンドウのドッキングモードを変更してみます手順 3: : アプリケーションの実行 C1DockControl とタブ項目を含む WPF/Silverlight アプリケーションを作成したので次にこのアプリケーションを実行します次の手順に従います 1.

7 <TextBlock Text=" これはツールボックスです " /> <c1:c1docktabitem Header=" プロジェクト "> <TextBlock Text=" ファイルツリー " /> <c1:c1docktabcontrol DockWidth="500" ShowHeader="False"> <c1:c1docktabitem Header="myfile.ext"> <TextBlock Text=" これは myfile.ext のテキストです " /> </c1:c1dockcontrol> 次の手順ではアプリケーションを実行してウィンドウのドッキングモードを変更してみます手順 3: : アプリケーションの実行 C1DockControl とタブ項目を含む WPF/Silverlight アプリケーションを作成したので次にこのアプリケーションを実行します次の手順に従います 1. [ デバッグ ] メニューから [ デバッグ開始 ] を選択し実行時にアプリケーションがどのように表示されるかを確認しますアプリケーションは次のように表示されます [ ツールボックス ] はで指定したように左側にドッキングされています 2. [ ツールボックス ] のヘッダーにあるドロップダウン矢印をクリックしオプションを選択して C1DockControl を浮動化スライドまたは非表示にしてみます C1DockControl のこれらのオプションは [ プロジェクト ] タブをクリックして選択することもできます押しピンをクリックすると C1DockTabItems が左側に表示されタブをクリックするとスライドして開きます 6 Copyright GrapeCity, Inc. All rights reserved.

ShowHeader を False に設定したので myfile.ext C1DockTabItem がある 2 番目の C1DockControl にはヘッダーがありませんおめでとうございます!

8 [ 非表示 ] ボタンをクリックすると C1DockControl は非表示になります 3. [ ツールボックス ] のヘッダーを選択し [myfile.ext] タブがある C1DockControl 上にドラッグしますドッキングインジケータがドッキングゾーン上に表示されますいずれかのインジケータ上にポインタを置くとドッキングゾーンが青で表示されます ShowHeader を False に設定したので myfile.ext C1DockTabItem がある 2 番目の C1DockControl にはヘッダーがありませんおめでとうございます! これで DockControl for WPF/Sliverlight クイックスタートは終了ですこのクイックスタートでは C1DockControl を使用して浮動化やドッキングが可能なウィンドウを作成しました 7 Copyright GrapeCity, Inc. All rights reserved.

クイックリファレンスこのトピックでは C1DockControl C1DockGroup C1DockTabControl および C1DockTabItem を作成するためのの概要を提供します開発を開始するにはルート要素タグに c1 名前空間宣言を追加します xmlns:c1="http://schemas.componentone.

9 クイックリファレンスこのトピックでは C1DockControl C1DockGroup C1DockTabControl および C1DockTabItem を作成するためのの概要を提供します開発を開始するにはルート要素タグに c1 名前空間宣言を追加します xmlns:c1=" 次はサンプルドッキングレイアウトですこのサンプルドッキングレイアウトのは次のようになります <c1:c1dockcontrol x:name="dockcontrol" Margin="-128,0,12,127"> <c1:c1dockgroup> <c1:c1docktabcontrol Dock="Top"> <c1:c1docktabitem Header=" タブ 1" TabShape="Sloped">  <c1:c1docktabitem Header=" タブ 2" TabShape="Sloped">  <c1:c1docktabcontrol> <c1:c1docktabitem Header=" タブ 3" TabShape="Sloped" >  </c1:c1dockgroup> <c1:c1dockgroup> <c1:c1docktabcontrol Dock="Top" DockWidth="500" DockHeight="500" TabItemShape="Rounded"> <c1:c1docktabitem Header=" タブ 4">  8 Copyright GrapeCity, Inc. All rights reserved.

10 <c1:c1docktabitem Header=" タブ 5">  <c1:c1docktabcontrol> <c1:c1docktabitem Header=" タブ 6">  </c1:c1dockgroup> <c1:c1docktabcontrol> <c1:c1docktabitem Header=" タブ 7" TabShape="Sloped">  <c1:c1docktabitem Header=" タブ 8" TabShape="Sloped">  </c1:c1dockcontrol> 9 Copyright GrapeCity, Inc. All rights reserved.

DockControl の使い方 DockControl for WPF/Sliverlight には C1DockControl コントロールが含まれていますこれはウィンドウをドッキング浮動化またはタブ付きにできる簡単なコントロールです以下のトピックでは C1DockControl とそれに追加できる要素ウィンドウをドッキングするためのオプションドッキングインジケータ

11 DockControl の使い方 DockControl for WPF/Sliverlight には C1DockControl コントロールが含まれていますこれはウィンドウをドッキング浮動化またはタブ付きにできる簡単なコントロールです以下のトピックでは C1DockControl とそれに追加できる要素ウィンドウをドッキングするためのオプションドッキングインジケータドッキングゾーンについて詳しく説明しますドッキングコントロールの要素 C1DockControl はコンテナとして機能しここにウィンドウの整理に役立つ他の DockControl for WPF/Silverlight 要素を追加できますページに C1DockControl を追加したら C1DockTabItem を含む C1DockTabControl を追加できます C1DockTabControl には次の 3 つのボタンがありますドロップダウンリスト押しピン非表示 DockMode オプション Floating Docked Sliding Hidden のオプションがあります自動非表示機能を有効にします C1DockTabItems は IDE の端に最小化されます C1DockTabControl を非表示にしますドッキングオプション DockControl for WPF/Silverlight にはフローティングドッキング自動的に隠す非表示の 4 つの DockMode オプションがあります以下の画像に C1DockTabControl のドロップダウンリストから選択できるドッキングオプションを示しますフローティング [ フローティング ] をクリックするとウィンドウがアンドックされ浮動化されて他のウィンドウの上に表示されます 10 Copyright GrapeCity, Inc. All rights reserved.

ドッキング [ ドッキング ] をクリックするとウィンドウが他のウィンドウにドッキングされます自動的に隠す [

非表示 ] をクリックすると C1DockTabControl が非表示になりますドッキングモードを設定するには

ドッキングモードを Floating に設定します <c1:c1docktabcontrol

12 ドッキング [ ドッキング ] をクリックするとウィンドウが他のウィンドウにドッキングされます自動的に隠す [ 自動的に隠す ] をクリックすると C1DockTabItem が IDE の端に最小化されます非表示 [ 非表示 ] をクリックすると C1DockTabControl が非表示になりますドッキングモードを設定するには設計時に DockMode プロパティを使用することによりドッキングモードを設定できます次のマークアップはドッキングモードを Floating に設定します <c1:c1docktabcontrol DockMode="Floating"> 11 Copyright GrapeCity, Inc. All rights reserved.

<c1:c1docktabitem Header=" ツールボックス "> <TextBlock Text=" これはツールボックスです " /> 詳細についてはドッキングモードの設定を参照してくださいひし形のドッキングガイドとゾーンひし形のドッキングガイドは C1DockControl

C1DockTabControl が複数ある場合はいずれかの C1DockTabControl のヘッダーを他の C1DockTabControls のヘッダー上にドラッグしてみてくださいひし形のドッキングガイドに上下左右および中央の合計 5 つのドッキングインジケータが表示されます中央のドッキングインジケータを使用すると

13 <c1:c1docktabitem Header=" ツールボックス "> <TextBlock Text=" これはツールボックスです " /> 詳細についてはドッキングモードの設定を参照してくださいひし形のドッキングガイドとゾーンひし形のドッキングガイドは C1DockControl 要素をドッキングできる場所を示すために使用されます C1DockControl では 4 つのドッキングインジケータが提供されておりコントロールの上下左右の 4 辺のいずれかでドッキングできます C1DockTabControl のヘッダーをドラッグすると青いドッキングゾーンが表示されてウィンドウをどこにドッキングできるかがわかります C1DockTabControl が複数ある場合はいずれかの C1DockTabControl のヘッダーを他の C1DockTabControls のヘッダー上にドラッグしてみてくださいひし形のドッキングガイドに上下左右および中央の合計 5 つのドッキングインジケータが表示されます中央のドッキングインジケータを使用すると C1DockTabItems を C1DockTabControl にマージできます上の画像例の状態で中央のインジケータ上でマウスのボタンを放すと myfile.ext C1DockTabItem と他の C1DockTabItems が最初の C1DockTabControl に表示されます 12 Copyright GrapeCity, Inc. All rights reserved.

15 レイアウトおよび外観以下のトピックでは C1DockControl のレイアウトと外観をカスタマイズする方法について詳しく説明しますテンプレートを使用してコントロールを書式設定およびレイアウトしたりコントロールの動作をカスタマイズできますテンプレート WPF/Silverlight コントロールを使用する主な利点の 1 つはこれが自由にカスタマイズできるユーザーインターフェイスを持つ外観のないコントロールであることです WPF/Silverlight アプリケーションのユーザーインターフェイスであるルックアンドフィールを独自に設計するのと同様に DockControl for WPF/Sliverlight で管理されるデータに関して独自の UI を提供できます Extensible Application Markup Language(; ザムルと発音する ) はコードを記述することなく独自の UI を設計するための簡単な方法を提供する XML ベースの宣言型言語ですテンプレートへのアクセステンプレートにアクセスするには Microsoft Expression Blend で C1DockControl コントロールを選択しメニューから [ テンプレートの編集 ] を選択します [ コピーの編集 ] を選択して現在のテンプレートのコピーを作成して編集するか [ 空のテンプレートの作成 ] を選択して新しい空のテンプレートを作成しますメモ : メニューから新しいテンプレートを作成する場合テンプレートはそのテンプレートのプロパティに自動的にリンクされます手作業でテンプレートのを作成する場合は作成したテンプレートに適切な Template プロパティをリンクする必要があります Template プロパティを使ってテンプレートをカスタマイズできますテーマ DockControl for WPF/Silverlight にはグリッドの外観をカスタマイズできるいくつかのテーマが組み込まれています C1DockTabControl と C1DockTabItem を含む C1DockControl コントロールを初めてページに追加すると次の図のように表示されますこれはこのコントロールのデフォルトの外観ですこの外観は組み込みテーマの 1 つを使用したり独自のカスタムテーマを作成することで変更できます WPF のすべての組み込みテーマは WPF Toolkit テーマに基づいています以下に組み込みテーマの説明と図を示します以下の図では選択状態のスタイルを示すために 1 つの行が選択されていますテーマ名テーマのプレビュー C1ThemeBureauBlack 14 Copyright GrapeCity, Inc. All rights reserved.

C1ThemeOffice2007Black C1ThemeOffice2007Silver

16 C1ThemeExpressionDark C1ThemeExpressionLight C1Blue (WPF のみ ) C1ThemeOffice2007Blue C1ThemeOffice2007Black C1ThemeOffice2007Silver C1ThemeOffice2010Blue 15 Copyright GrapeCity, Inc. All rights reserved.

C1ThemeOffice2010Black C1ThemeOffice2010Silver C1ThemeRainierOrange (Silverlight のみ ) C1ThemeShinyBlue C1ThemeWhistlerBlue 要素のテーマを設定するには ApplyTheme メソッドを使用します最初にテーマアセンブリへの参照をプロジェクトに追加し

17 C1ThemeOffice2010Black C1ThemeOffice2010Silver C1ThemeRainierOrange (Silverlight のみ ) C1ThemeShinyBlue C1ThemeWhistlerBlue 要素のテーマを設定するには ApplyTheme メソッドを使用します最初にテーマアセンブリへの参照をプロジェクトに追加し次のようにコードでテーマを設定します VisualBasic Private Sub Window_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Dim theme As New C1ThemeExpressionDark ' ApplyTheme の使用 C1Theme.ApplyTheme(LayoutRoot, theme) C# private void Window_Loaded(object sender, RoutedEventArgs e) { 16 Copyright GrapeCity, Inc. All rights reserved.

18 } C1ThemeExpressionDark theme = new C1ThemeExpressionDark(); //ApplyTheme の使用 C1Theme.ApplyTheme(LayoutRoot, theme); アプリケーション全体にテーマを適用するには System.Windows.ResourceDictionary.MergedDictionaries プロパティを使用します最初にテーマアセンブリへの参照をプロジェクトに追加し次のようにコードでテーマを設定します VisualBasic Private Sub Window_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Dim theme As New C1ThemeExpressionDark ' MergedDictionaries の使用 Application.Current.Resources.MergedDictionaries.Add(C1Theme.GetCurrentThemeResources(theme)) End Sub C# private void Window_Loaded(object sender, RoutedEventArgs e) { C1ThemeExpressionDark theme = new C1ThemeExpressionDark(); //MergedDictionaries の使用 Application.Current.Resources.MergedDictionaries.Add(C1Theme.GetCurrentThemeResources(theme)); } この方法は初めてテーマを適用する場合にのみ使用できることに注意してください別の ComponentOne テーマに切り替える場合は最初に Application.Current.Resources.MergedDictionaries から前のテーマを削除しますメモ :Silverlightの場合は BureauBlack ExpressionDark ExpressionLight RainierOrange ShinyBlue WhistlerBlue の6つのテーマが提供されています ComponentOne ClearStyle 技術 ComponentOne ClearStyle は WPF/Silverlight コントロールのスタイル設定をすばやく簡単に実行できる新技術です ClearStyle を使用すると面倒なテンプレートやスタイルリソースを操作しなくてもコントロールのカスタムスタイルを作成できます現在のところすべての標準 WPF/Silverlight コントロールにテーマを追加するにはスタイルリソーステンプレートを作成する必要があります Microsoft Visual Studio ではこの処理は困難であるため Microsoft はこのタスクを簡単に実行できるように Expression Blend を導入しましたただし Blend に不慣れであったり十分な学習時間を取れない開発者にとってはこの 2 つの環境を行き来することはかなり困難な作業ですデザイナに作業を任せることも考えられますがデザイナと開発者がファイルを共有するとかえって煩雑になる可能性がありますこのような場合に ClearStyle を使用します ClearStyle は Visual Studio を使用して直感的な方法でスタイル設定を実行できるようにしますほとんどの場合はアプリケーション内のコントロールに対して単純なスタイル変更を行うだけなのでこの処理は簡単に行えるべきですたとえばデータグリッドの行の色を変更するだけであれば 1 つのプロパティを設定するだけで簡単に行えるようにする必要があります一部の色を変更するためだけに完全で複雑なテンプレートを作成する必要はありません ClearStyle の仕組み 17 Copyright GrapeCity, Inc. All rights reserved.

19 コントロールのスタイルの主な要素はそれぞれ単純な色プロパティとして表されますこれが集まってコントロール固有のスタイルプロパティセットを形成しますたとえば Gauge には PointerFill プロパティや PointerStroke プロパティがあり DataGrid の行には SelectedBrush や MouseOverBrush がありますたとえばフォーム上に ClearStyle をサポートしていないコントロールがあるとしますその場合は ClearStyle によって作成されたリソースを使用してフォーム上の他のコントロールを調整して合わせることができます ( 正確な色合わせなど ) またスタイルセットの一部を ClearStyle( カスタムスクロールバーなど ) で上書きしたいとします ClearStyle は拡張可能なのでこれも可能です必要な場所でスタイルを上書きできます ClearStyle はすばやく簡単にスタイルを変更することを意図したソリューションですが ComponentOne のコントロールには引き続き従来の方法を使用して必要なスタイルを細かく指定して作成できます完全なカスタム設計が必要になる特別な状況で ClearStyle が邪魔になることはありません ClearStyle プロパティ ClearStyle プロパティ DockControl for WPF/Sliverlight はコントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる ComponentOne の新しい ClearStyle 技術をサポートします色のプロパティをいくつか設定するだけで C1DockControl 要素のスタイルを簡単に設定できます次の表に C1DockControl でサポートされているプロパティを一覧しますプロパティ Background MouseOverBrush 説明 C1DockControl の塗りつぶしに使用される背景を取得または設定しますマウスポインタが置かれたコントロールを強調表示するために使用されるブラシを取得または設定します TabControlBackground C1DockTabControl の背景色を取得または設定します TabControlForeground TabStripBackground TabStripForeground C1DockTabControl の前景色またはテキストの色を取得または設定します C1DockTabItem の背景色を取得または設定します C1DockTabItem の前景色またはテキストの色を取得または設定しますこれらのプロパティを設定することで C1DockControl の外観を完全に変更できますたとえば Background プロパティを Red に設定する場合のマークアップは次のようになります <c1:c1dockcontrol Height="100" Background="Red" HorizontalAlignment="Left" Margin="176,100,0,0" Name="c1DockControl1" VerticalAlignment="Top" Width="200"> <c1:c1docktabcontrol Height="100" HorizontalAlignment="Left" Name="c1DockTabControl1" VerticalAlignment="Top" Width="200"> <c1:c1docktabitem Header=" ツールボックス " HorizontalAlignment="Left" Name="c1DockTabItem1" VerticalAlignment="Top" > <TextBlock Text=" これはツールボックスです " /> </c1:c1dockcontrol> C1DockControl は次のようになります 18 Copyright GrapeCity, Inc. All rights reserved.

その他のプロパティも試して C1DockControl 要素の外観をすばやく変更してみてくださいたとえば次のは Background TabStripForeground TabControlBackground の各プロパティを設定します <c1:c1dockcontrol Height="100" Background="Red" TabStripForeground="Red"

20 その他のプロパティも試して C1DockControl 要素の外観をすばやく変更してみてくださいたとえば次のは Background TabStripForeground TabControlBackground の各プロパティを設定します <c1:c1dockcontrol Height="100" Background="Red" TabStripForeground="Red" TabControlBackground="LightYellow" HorizontalAlignment="Left" Margin="176,100,0,0" Name="c1DockControl1" VerticalAlignment="Top" Width="200"> <c1:c1docktabcontrol Height="100" HorizontalAlignment="Left" Name="c1DockTabControl1" VerticalAlignment="Top" Width="200"> <c1:c1docktabitem Header=" ツールボックス " HorizontalAlignment="Left" Name="c1DockTabItem1" VerticalAlignment="Top" /> <TextBlock Text=" これはツールボックスです " /> </c1:c1dockcontrol> C1DockControl は次のようになります 19 Copyright GrapeCity, Inc. All rights reserved.

21 タスク別ヘルプタスク別ヘルプはユーザーの皆様が Visual Studio でのプログラミングに精通しており C1DockControl の一般的な使用方法を理解していることを前提としています DockControl for WPF/Sliverlight 製品を初めて使用される場合はまずクイックスタートを参照してくださいこのセクションの各トピックは DockControl for WPF/Sliverlight 製品を使用して特定のタスクを行うための方法を提供しますまたタスク別ヘルプトピックは新しい WPF/Silverlight プロジェクトが既に作成されていることを前提としていますドッキングモードの設定設計時に DockMode プロパティを使用することによりドッキングモードを設定できますドッキングモードを設定するには次の手順に従います 1. Visual Studio で.xaml ページを開きます 2. <Grid></Grid> タグの間にカーソルを置きます 3. ツールボックスで [C1DockControl] アイコンをダブルクリックしてこのコントロールをプロジェクトに追加します 4. <c1:c1dockcontrol> タグと </c1:c1dockcontrol> タグの間にカーソルを置きます 5. ツールボックスで [C1DockTabControl] アイコンをダブルクリックしてこのコントロールをプロジェクトに追加します 6. DockMode プロパティを Sliding に設定しますマークアップは次のようになります <c1:c1dockcontrol> <c1:c1docktabcontrol DockMode="Sliding"> </c1:c1dockcontrol> 7. <c1:c1docktabcontrol> タグとタグの間にカーソルを置きます 8. ツールボックスで [C1DockTabItem] アイコンをダブルクリックしてコントロールをプロジェクトに追加し C1DockTabItem.Header プロパティをツールボックスに設定しますは次のようになります <c1:c1dockcontrol> <c1:c1docktabcontrol DockMode="Sliding"> <c1:c1docktabitem Header=" ツールボックス "> </c1:c1dockcontrol> 9. プロジェクトを実行します C1DockControl は次の図のようになります 20 Copyright GrapeCity, Inc. All rights reserved.

10. [ ツールボックス ] タブをクリックしてウィンドウをスライドして表示させますドッキング位置を無効にする方法 PickerLoading イベント内でユーザーが特定の方向にドッキングできないようにすることができますたとえば C1DockControl の左外側へのドッキングを無効にするには次の手順に従います 1.

C1DockControl の PickerLoading イベントをサブスクライブします <c1:c1dockcontrol Name="dockControl1" PickerLoading="dockControl1_PickerLoading" /> 3.

22 10. [ ツールボックス ] タブをクリックしてウィンドウをスライドして表示させますドッキング位置を無効にする方法 PickerLoading イベント内でユーザーが特定の方向にドッキングできないようにすることができますたとえば C1DockControl の左外側へのドッキングを無効にするには次の手順に従います 1. C1DockControl といくつかの子 C1DockTabControl をページに追加します 2. C1DockControl の PickerLoading イベントをサブスクライブします <c1:c1dockcontrol Name="dockControl1" PickerLoading="dockControl1_PickerLoading" /> 3. コードでドッキングピッカーのいくつかの部分が表示されないように任意の数の PickerLoadingEventArgs プロパティを設定しますたとえば左外側のドッキングを無効にするには e.showleftouterpart プロパティを False に設定します C# private void dockcontrol1_pickerloading(object sender, PickerLoadingEventArgs e) { // 左外側のドッキングを無効にします e.showleftouterpart = false; } 21 Copyright GrapeCity, Inc. All rights reserved.

23 条件付きドッキング特定の C1DockTabControl または C1DockTabItem に対して条件付きのドッキングを行うには Source プロパティと Target プロパティを使用しますたとえば c1docktabcontrol2 の内側に c1docktabitem1 をドッキングできないようにするには次のコードを記述します private void dockcontrol1_pickerloading(object sender, PickerLoadingEventArgs e) { if (e.source == c1docktabitem1 && e.target == c1docktabcontrol2) { // ドッキングをすべて無効にします e.showbottominnerpart = false; e.showleftinnerpart = false; e.showrightinnerpart = false; e.showtopinnerpart = false; e.showoverinnerpart = false; } } 22 Copyright GrapeCity, Inc. All rights reserved.

OutlookBar for WPF/Silverlight

OutlookBar for WPF/Silverlight 2018.04.11 更新グレープシティ株式会社目次製品の概要 2 ComponentOne for WPF/Silverlight のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4-5 手順 2:C1OutlookItem の追加 5-6 手順 3: アプリケーションの実行 6 クイックリファレンス 7-8 C1OutlookBarの操作 9 OutlookBar