コントロールを使用して他のコントロールのプロパティを変更する
コントロールを使用するときは、特定のコントロールの関数を別のコントロールのプロパティに基づいて変更することができます。 この機能により、ユーザーは入力に基づいてエクスペリエンスの変更を確認できます。
たとえば、ユーザーが小、中、大のフォント サイズを選択できるように、アプリにドロップダウン メニューを追加できます。 この設定に基づき、アプリではアプリ全体のフォント サイズを動的に変更できます。
フォントの色、塗りつぶしの色、コントロールの場所、コントロールの表示/非表示に対して、ユーザーの選択に基づく同じロジックを適用できます。 たとえば、ユーザーが [Are you a new client?] のチェック ボックスをオンにすると、新しいクライアントを入力するためのフィールドが画面に表示されます。
入力を使用したコントロールの位置の調整
例を使用して、キャンバスでのコントロールの配置、およびユーザーの入力を使用してコントロールの配置を変更する方法を理解しましょう。 まず、キャンバス上のコントロールの位置は、X と Y の 2 つのプロパティの組み合わせに基づきます。
X - コントロールの左端と画面の左端の間の距離。
Y - コントロールの上端と画面の上端の間の距離。
X および Y プロパティは、画面を除くすべてのコントロールに適用される点に留意してください。 次に、アプリに移動し、練習しながら学習しましょう。
まず、ツリー ビュー パネルから + 新しい画面を選択してアプリの新しい画面を作成し、空白を選択します。
次に、ドロップダウン コントロールを挿入します。 + 挿入ボタンを選択し、検索フィールドに dropと入力して、ドロップダウン を選択します。
dropdown の Items プロパティを DropDownSample から次のように変更します。
Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})これにより、位置という単一の列と、上・下・中央という 3 つのレコードを含むレコードのテーブルが作成されます。 Alt キーを押しながらドロップダウン コントロールを選択した場合、これらの値が表示されるのがわかります。
次に、画面の位置を動的に変更できるコントロールを追加します。 もう一度リボンから + 挿入を選択し、検索フィールドに航空機と入力して、航空機アイコンを選択します。 航空機アイコンを画面の中央にドラッグします。
次に、ドロップダウン コントロールに基づいて画面にさまざまな高さで航空機アイコンを表示してみましょう。 これを行うには、航空機のアイコンを選択し、Y プロパティを検索します。 今のところ静的な数値が設定されている点に注目してください。 Y プロパティの値を次のように変更します。
Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)メモ
ドロップダウン コントロールの名前が Dropdown1 ではないことがあります。その場合、Dropdown1 を自身のコントロールの特定の名前に置き換えてください。
アプリをプレビュー モードにして、楽しみながら式をテストしてみましょう。 次に、ドロップダウン メニューから各位置を選択します。 dropdown の値を変更すると、航空機アイコンの "高度" (つまり、Y 座標) が調整される点に注目してください。
説明
航空機アイコンを移動できたのは、Y プロパティの値が数値であるからです。 どの数値でもよいわけではなく、アイコンを画面に表示できる数値を指定する必要がありました。
ドロップダウン コントロールの位置を表す値に基づいて Switch 関数を使用し、ユーザーの入力に基づいてさまざまな値を Y に割り当てました。 ゼロを指定すると一番上に配置され、画面の高さを指定すると一番下に配置されます。 このアプリのすべてのプラットフォームに対応させるために、画面コントロールの Height プロパティを使用しました。
また、航空機アイコンの Height プロパティ (Self.Height) も "Bottom" の値に使用することで、画面の一番下に航空機アイコンを表示させましたが、そうしなければ画面から外れたところに配置されていました。
コントロールのプロパティを変更すると、他のコントロールの動作を変更できます。 これにより、ユーザー エクスペリエンスを形成するための優れた手段が得られます。 練習用アプリは開いたままにしてください。次のモジュールでは、条件付き書式を適用してアプリを強化する方法を説明します。