2019年3月17日日曜日

表の境界線をイメージに置き換えてみた

前回のエントリでは、表のプロパティで境界線を"イメージ"にすると、画像がどのように境界線として表示されるのかを見てきました。

今回は、ずっと前から気になっていたアプリケーションライブラリ(dblib4.ntf)におけるデータベース名の表示の不具合(下図)を改善してみたいと思います。


「不具合」とはデータベースのタイトルが長い場合、タイトルの右側が本の外側にはみ出てしまうことです。

フォームの設計を見てみます。下図はフォームの一部です。

固定幅で1行1列(セルが1つだけ)の表に、セルのイメージとして本の画像 dblib.gif を指定しています。これではウィンドウサイズにあわせて本が縦や横に伸びたり縮んだりすることはありませんね。

これを表の境界線として指定し、かつ固定幅ではなくウィンドウの幅に合わせて表の幅も変わるようにしたいと思います。

このブログでは dblib.ntf を直接修正することはせずに(一時的に作成する)別のデータベースで検証していきます。

まずは、dblib4.ntf イメージリソースに登録されている dblib.gif を Export して画像を確認してみたいと思います。
Export したファイルをペイントアプリで開いてみると、画像のサイズは 436 x 49 px でした。

これを前回と同様に、縦と横に3等分して9つの枠に分けてみました。

この図を表の境界線として表示する場合、表が縦方向に膨らむと「左」と「右」が縦方向に繰り返し表示されます。「左」を拡大してみると、線に段差があることがわかります(下図)。

この画像をそのまま使う場合「左」が縦方向に繰り返し表示されると縦線に凸凹が生まれて見た目がよろしくありません。

そこで、3等分したときに段差がなくなるように高さを調節します。画像の縦のサイズを 11 増やして 60px に変更しました。そして画像の下半分をコピーして最下部に合うようにペーストした画像がこちらです。元の画像よりも本の厚みが若干増しました。

三等分してみると「左」の縦線にあった段差が無くなっています。

この画像をイメージリソースに Import して、表のプロパティから表の境界線のイメージとして画像を設定します。そして表の外側に表示する画像の厚みを「厚さ」から調整します(下図)。

このままでは表の内側が白抜きとなってしまいますので、表の内側を埋めるドットだけの画像を作成してイメージリソースに Import したものをセルのイメージとしてタイル状に繰り返し表示するよう設定します(下図)。

こうして表の中にある文字がいくら長くなっても本の外側にはみ出すことなく折り返して表示されるようになります。
ウィンドウの幅が広い場合

ウィンドウの幅が狭い場合
いかがでしたでしょうか。

境界線として使えそうな画像を「枠」や「フレーム」などでググると素材を扱うWebサイトがいくつかヒットしました。フォームのデザインに合う境界線があるといいですね。

0 件のコメント:

コメントを投稿