データ グリッド コンポーネントをスクロールする

作成するデータ グリッド内に 12 個を超えるテキスト フィールド コンポーネントが含まれていると、データ グリッドの幅が狭すぎて内容が表示されません。このチュートリアルでは、データ グリッドをスクロールする方法を説明します。

チュートリアル

データ グリッド コンポーネントをスクロールするには、以下の手順を実行します。

1. 2 つのクラスを含む CSS ファイルを作成します。1 つはデータ グリッドをスクロールするためのクラスで、もう 1 つはテキスト フィールド コンポーネントの幅を広げるためのクラスです。overflow-x: scroll プロパティを設定すると、データ グリッドをスクロールできます。min-width: 300px プロパティを設定すると、テキスト フィールドを拡大してその内容を表示できます。

   次のコードをコピーして CSS ファイルに貼り付けます。

   .my-data-grid
   {
      overflow-x: scroll;
   }
    
    
   .my-data-grid input 
   {
      min-width: 300px;
   }

2. [フォームを作成] アクティビティの [ローカル CSS ファイル パス] プロパティに、作成した CSS ファイルのパスを入力します (例: "/file://C:/User/theCssFile.css")。

ローカル CSS ファイルへのパスを変数として保存し、[ローカル CSS ファイル パス] フィールドにその変数名を入力することもできます。

3. データ グリッド コンポーネントの [表示] タブに移動します。4. [カスタム CSS クラス] フィールドに、ファイルで設定したカスタム CSS クラスの名前を入力します (例: my-data-grid)。これにより、CSS ファイル内のデータがフォームにバインドされます。

5. コンポーネントとフォームを保存します。

サンプル ワークフロー

ワークフローの完成品を確認するため、または今後の参考資料として、サンプル XAML をダウンロードできます。