午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

つまみが二つのトラックバーをユーザーコントロールでつくってみた

 
追記2019/10/17ここから
追記ここまで
 
 
つまみが二つのトラックバーが使いたかったのでユーザーコントロールっていう機能で作ってみた

イメージ 17
設定項目
Button1、Button2がつまみ(スライダー)で
BackColor:背景色
BG:背景画像
Font:つまみに表示する文字のフォント
Text:つまみに表示する文字
sonomono:無意味
RangeValue:二つのつまみがどれだけ離れているかの値、読み取り専用
Value1:つまみ1の値、初期値
Value2:つまみ2の値、初期値
ReverseMove:Trueでホイール上でつまみが上に移動、Falseだと下に移動
Size:つまみのサイズだけど無視される
 
普通のトラックバーと同じなのが
LargeChange:クリックでの移動量
SmallChange:ホイールでの移動量
Maximun:最大値
Minimun:最小値
 
 
不満なのは
区切り線がない
横表示ができない
キーボードでは動かせない、マウス専用
つまみのサイズはコントロール全体のサイズに依存していて
高さはコントロール全体の1/10
横幅はコントロール全体の幅と同じ
なので文字を表示しようとするとトラックバー自体をある程度大きくしないと見切れてしまう
つまみの形が四角だけ
こんなところ
 
 
 
以下はユーザーコントロールの初期設定の手順とか

f:id:gogowaten:20191017160345p:plain

新規作成でクラスライブラリを選択
 

f:id:gogowaten:20191017160356p:plain

ソリューションエクスプローラーを表示して
クラスライブラリを右クリック→追加→ユーザーコントロール
もしくは
クラスライブラリを右クリック→追加→新しい項目
 

f:id:gogowaten:20191017160407p:plain

ユーザーコントロールを選択して適当な名前を付けて
追加ボタン押す
 

f:id:gogowaten:20191017160418p:plain

これでユーザーコントロールが追加されてデザイン画面になる
 

f:id:gogowaten:20191017160429p:plain

試しにボタントラベルを追加したところ
ツールボックスからコントロールを追加できるのは
普通のアプリを作るのと同じみたい
 
ユーザーコントロールの動作確認用のフォームを追加する

f:id:gogowaten:20191017160443p:plain

ソリューションエクスプローラーを開いて
一番上の項目を右クリック→追加→新しいプロジェクト
 

f:id:gogowaten:20191017160453p:plain

Windows フォーム アプリケーションを選択してOK
 

f:id:gogowaten:20191017160504p:plain

ユーザーコントロールの動作確認用のフォームが追加される
ソリューションエクスプローラーにもそれっぽいものが追加されている
アプリを作るときのいつものForm1が表示されていて
ここにユーザーコントロールを追加して実際の動作を確認しながら作っていく
でもこのままだとクラスライブラリのユーザーコントロール自体が実行されて
確認できないのでForm1があるWindowsApplicationのを方を実行するように
変更する
 
実行される順番を入れ替える

f:id:gogowaten:20191017160516p:plain

実行したい方をソリューションエクスプローラーから選んで
右クリックからスタートアッププロジェクトに設定を選ぶ
今回はForm1があるWindowsApplication2を選んで
スタートアッププロジェクトに設定
 
ツールボックスにはまだユーザーコントロールは表示されていないのは
ビルドしていないからなのでビルドする

f:id:gogowaten:20191017160526p:plain

ユーザーコントロールのデザイン画面を表示して(しなくてもいい?)
メニューのビルド→ソリューションのビルド
これでツールボックスに表示される
 

f:id:gogowaten:20191017160539p:plain

Form1のデザイン画面を表示してツールボックスを表示すると
作ったUserControl1が表示されていて
Form1に追加したところ

f:id:gogowaten:20191017160549p:plain

作ったユーザーコントロールはプロジェクトの
binフォルダのDebugフォルダに保存される拡張子.dll
 
できあがった?ユーザーコントロール

f:id:gogowaten:20191017160600p:plain

ユーザーコントロールのMyTrackBarのデザイン画面と
ソリューションエクスプローラーでの中の様子
 

f:id:gogowaten:20191017160610p:plain

MyTrackBarの中のコードの様子
アプリの作成とほとんど同じ感じ
 

f:id:gogowaten:20191017160619p:plain

動作確認用のフォームのデザイン画面
 

f:id:gogowaten:20191017160630p:plain

動作確認用のフォームの中のコード
 
ユーザーコントロールっていう機能で初めて作ってみて、細かな不満はあるけど
目的のものはできたなあ
オリジナルのコントロール作成にはユーザーコントロールの他にカスタムコントロールとかコンポーネントとかもあったから調べたんだけどいまいちわかんなくて
まずは作ってみようってことで一覧表の上にあったユーザーコントロールになった
あちこち参考にしながら作ったけど、なんていうかこういうことができるようになっているのがすごいなあ、こういうのがあったらいいなあっていうものを自分で作れるのが面白い
普通のアプリの作成とほとんど同じ感じだけど
Imports System.Windows.Forms 
これがないとボタンの変数を作るときでもSystemからになる
Dim MyButton as Button
Dim MyButton as System.Windows.Forms.Button
最初にボタンの変数を作ろうとしたら候補にButtonが出てこなくて作れないのかと思ったw
 
プロパティの設定、説明の表示文字の設定、デフォルト値の設定

    Private Const defaultMaximun_ As Integer = 10 'デフォルト値の指定
    Private Maximun_ = defaultMaximun_
    <Description("最大値の指定")>
    <DefaultValue(10)>
    Public Property Maximun() As Integer 'デフォルト値属性でデフォルト値の指定
        Get
            Return Maximun_
        End Get
        Set(value As Integer)
            Maximun_ = value
        End Set
    End Property

プロパティには属性をつけることができる
<>が属性を付けるときに使うものみたい
属性をつけるときには
Imports System.ComponentModel
これを書いておかないとさっきのボタンみたいにめんどくさくなる
 
Description属性がプロパティの説明の表示のところに表示される文字で

f:id:gogowaten:20191017160655p:plain

こうやって項目を選択した時に表示される
 
プロパティのデフォルト値、初期値の設定

    Private Const dv1 As Integer = 5
    Private Value1_ As Integer = dv1
    <Description("つまみ1用の値の指定、取得。制限を超えた値は制限いっぱいの値に変更される")>
    <DefaultValue(dv1)>
    Public Property Value1 As Integer
        Get
            Return Value1_
        End Get
        Set(value As Integer)
            If value > Maximun Then

<DefaultValue(値)>のところ
上はValue1のデフォルト値を5に設定しているところ
こうしておくとコントロールを追加した時にValue1に5が設定される
デフォルト値を指定しないと0が指定される

f:id:gogowaten:20191017160708p:plain

MyTrackBarを追加したところ、Value1は5になっている
初期値を指定しておくと初期値以外になった場合に太字で表示されるのと
シリアライズでもなんか関係があるらしい
 
できあがったユーザーコントロールを他のアプリで使うには
.dllファイルを参照(指定)するだけ

f:id:gogowaten:20191017160720p:plain

作っているアプリのデザイン画面でツールボックスを表示して
その中で右クリック→アイテムの選択
 

f:id:gogowaten:20191017160733p:plain

この画面で参照をクリック
 

f:id:gogowaten:20191017160742p:plain

目的のユーザーコントロールを指定する
 

f:id:gogowaten:20191017160751p:plain

一覧に追加された
 
ツールボックスを見てみると

f:id:gogowaten:20191017160800p:plain

ツールボックスのコモンコントロールの一番下に表示されたので
Formに追加してプロパティ画面を表示したところ
できてるっぽい
イメージ 25
ダウンロード
ヤフーボックス
 
 
 
参照したところ