Quantcast
Channel: 午後わてんのブログ
Viewing all articles
Browse latest Browse all 420

WPFとVB.NET、ControlTemplateをコードで作成

$
0
0
ControlTemplateをコードで作成

イメージ 1


デザイン画面とXAML
イメージ 2


VBコード
イメージ 3

'ControlTemplateをコードで作成

Imports System.Windows.Controls.Primitives

Class MainWindow

    'Canvasを入れたTemplateを持ったThumbを返す
    Private Function GetThumbWithTemplate() As Thumb
        'Canvasを入れたControlTemplate作成
        Dim ct As New ControlTemplate
        'Canvasを入れる、Canvasの名前はccにした
        ct.VisualTree = New FrameworkElementFactory(GetType(Canvas), "cc")

        'Thumb作成してControlTemplateを指定する
        Dim t As New Thumb
        Call SetLocate(t, 0, 0) '配置する座標指定
        canvas1.Children.Add(t) 'MainWindowのcanvas1にThumbを追加
        t.Template = ct 'ControlTemplateを指定
        'Templateを再構成、これで実際にThumbの中にCanvasが構成される
        t.ApplyTemplate()

        Return t
    End Function


    'Thumbを配置する座標指定
    Private Sub SetLocate(t As Thumb, x As Double, y As Double)
        Canvas.SetLeft(t, x)
        Canvas.SetTop(t, y)
    End Sub


    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        'Canvasを入れたTemplateを持ったThumbを取得
        Dim t As Thumb = GetThumbWithTemplate()
        'Rectangleを作成してTemplateの中のCanvasに配置
        Dim r As New Rectangle With {.Fill = Brushes.Cyan, .Width = 100, .Height = 100}
        Dim tb As New TextBlock With {.Text = "コードでTemplate"}
        '名前を指定して中のCanvas取得
        Dim c As Canvas = t.Template.FindName("cc", t)
        c.Children.Add(r)
        c.Children.Add(tb)

        'マウスドラッグ移動用
        AddHandler t.DragDelta, AddressOf tt_DragDelta
    End Sub


    'マウスドラッグ移動用
    Private Sub tt_DragDelta(sender As Object, e As DragDeltaEventArgs)
        Dim t As Thumb = DirectCast(sender, Thumb)
        Dim x As Double = e.HorizontalChange + Canvas.GetLeft(t)
        Dim y As Double = e.VerticalChange + Canvas.GetTop(t)
        Call SetLocate(t, x, y)
    End Sub

End Class


WPFとVBでアプリ作る準備その1、マウスドラッグでコントロールの移動 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/13900213.html

WPFとVBでアプリ作る準備その2、ControlTemplateの中のControlを取得する ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/13906217.html?type=folderlist
この辺りからの続きになるかな

Imageコントロールは枠線がないけどマウスドラッグ移動が手間
マウスドラッグ移動がラクなのはThumbコントロールだけど枠線が要らない
思いついたのが
見た目がImageコントロールなThumbコントロールがあればいい
それにはControlTemplateを使えば良さそう
Imageコントロールを入れたControlTemplateを持ったThumbを作ればいい
ってことで今まではググッて見つけた方法でControlTemplateを作っていたのが
イメージ 4
これ、XAMLで書いていく方法
Window.ResourcesにControlTemplateを作っておいて(10から17行目)
これを適用したいコントロールのTemplateプロパティで指定(21行目)する方法
今回はこれをVBコードで同じことができたのでメモ
コードで書くと得するのが動的作成ができることと
XAMLのほうは書かなくていいので
イメージ 5
こうなる
そのかわりVBのコードは増えるけどねw
動的作成ができるのが大きい

ControlTemplateの作成
イメージ 6

Dim ct As New ControlTemplate
ControlTemplateを作って、VisualTreeプロパティに中に入れたいコントロールを指定する
イメージ 7
指定するにはFrameworkElementFactoryってのが必要みたいで
中に入れたいコントロールのタイプと目印用の名前をつければいいみたい
ct.VisualTree = New FrameworkElementFactory(GetType(Canvas), "cc")
Canvasコントロールを「cc」って名前をつけていれたところ
Canvasなら後からいくつでもImageでもButtonでも入れられるから便利
あとはこのControlTemplateを使いたいコントロールのTemplateプロパティに指定するだけ

今回はThumbを作って、そのTemplateプロパティにControlTemplateを指定する
        Dim t As New Thumb
        t.Template = ct 'ControlTemplateを指定
これでできあがりな感じなんだけど動的作成には
↓が必要
        'Templateを再構成、これで実際にThumbの中にCanvasが構成される
        t.ApplyTemplate()
Templateの再構成を実行ておくと中のCanvasを取得できるようになる

中のCanvasを取得してCanvasにいろいろコントロールを追加
イメージ 8

Templateの中のコントロールを取得するには目印用の名前が必要
さっきccって名前を付けておいたのでこれをTemplate.FindNameメソッドで使って
Dim c As Canvas = t.Template.FindName("cc", t)
これで中のCanvasを取得しているけどこれはキャストした方がいいのかな
Dim c As Canvas = DirectCast(t.Template.FindName("cc", t), Canvas)
こう?
Dim c As Canvas = CType(t.Template.FindName("cc", t), Canvas)
こう?
どれでもできるんだけど、さっきの再構成をしていないと取得できなくてNothingになる

中のCanvasが取得できればなんでも好きなのを入れられるのでここではRectangleとtextBlockを入れている


意味ないけどボタンやテキストボックスも入れたところ
イメージ 9
イメージ 10
左の緑線のところが書き加えたところ
コードで書くことができるといろいろ融通がきく


今回のコード全部


2016年5月22日追記
関連記事
WPFとVB.NET、ControlTemplateを使ったThumbを回転表示する時に回転させるのはどれがいいのか ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14157487.html










Viewing all articles
Browse latest Browse all 420

Latest Images

Trending Articles