動的レイアウトDynamic Layout

Visual Studio 2015 の MFC では、ユーザーがサイズ変更できるダイアログを作成できます。また、レイアウトがサイズの変更に合わせてどのように調整されるかを制御できます。With MFC in Visual Studio 2015, you can create dialogs that the user can resize, and you can control the way the layout adjusts to the change in size. たとえば、ボタンをダイアログの下の端に付けて、常にダイアログ ボックスの下部に配置されるようにすることができます。For example, you can attach buttons at the bottom of a dialog to the bottom edge so they always stay at the bottom. ユーザーがダイアログを展開するときに、リスト ボックス、エディット ボックス、テキスト フィールドなどの特定のコントロールを展開するように設定することもできます。You can also set up certain controls such as listboxes, editboxes, and text fields to expand as the user expands the dialog.

MFC ダイアログ ボックスのレイアウトの動的な設定を指定するSpecifying dynamic layout settings for an MFC dialog box

ユーザーがダイアログ ボックスをサイズ変更するときに、ダイアログのコントロールのサイズを変更したり、X と Y の方向に移動したりできます。When the user resizes a dialog, the controls in the dialog can resize or move in the X and Y directions. ユーザーがダイアログ ボックスのサイズを変更するときのコントロールのサイズや位置の変更は、動的レイアウトと呼ばれます。The change in size or position of a control when the user resizes a dialog is called dynamic layout. たとえば、次に示すのはサイズを変更する前のダイアログです。For example, the following is a dialog before being resized:

サイズ変更する前のダイアログ。Dialog before being resized.

サイズを変更した後で、リスト ボックス領域がより多くの項目を表示するよう増え、ボタンは右下隅に沿って移動します。After being resized, the listbox area is increased to show more items, and the buttons are moved along with the bottom right corner:

サイズ変更した後のダイアログ。Dialog after being resized.

IDE のリソースエディターで各コントロールの詳細を指定することによって動的レイアウトを制御できます。また、特定のコントロールのオブジェクトにアクセスしてプロパティを設定することによって、プログラムによってレイアウトを制御することもできます CMFCDynamicLayoutYou can control dynamic layout by specifying the details for each control in the Resource Editor in the IDE, or you can do so programmatically by accessing the CMFCDynamicLayout object for a particular control and setting the properties.

リソース エディターで動的レイアウト プロパティを設定するSetting dynamic layout properties in the resource editor

リソース エディターを使用すると、コードを記述しなくても、ダイアログ ボックス動的のレイアウトの動作を設定できます。You can set the dynamic layout behavior for a dialog box without having to write any code, by using the resource editor.

動的レイアウトのプロパティをリソース エディターで設定するにはTo set dynamic layout properties in the resource editor

  1. MFC プロジェクトを開いた状態にして、ダイアログ エディターで作業するダイアログ ボックスを開きます。With an MFC project open, open the dialog you want to work with in the dialog editor.

    リソース エディターのダイアログを開きます。Open the dialog in the resource editor.

  2. コントロールを選択し、[ プロパティ ] ウィンドウ ( クラスビュー) で、動的レイアウトプロパティを設定します。Select a control and in the Properties window (in Class View), set its dynamic layout properties. [プロパティ] ウィンドウの [動的レイアウト] セクションには、[移動の種類]、[サイズ変更の 種類]、および [プロパティ] で選択した値に応じて、サイズを移動または変更するコントロールの量を定義する特定のプロパティが表示されます。The Dynamic Layout section in the Properties window contains the properties Moving Type, Sizing Type, and, depending on the values selected for those properties, specific properties that define how much controls move or change size. 移動型 は、ダイアログのサイズが変更されたときにコントロールを移動する方法を決定します。サイズ変更の 種類 によって、ダイアログのサイズが変更されたときにコントロールのサイズがどのように変更されるかが決まります。Moving Type determines how a control is moved as the size of the dialog is changed; Sizing Type determines how a control is resized as the size of the dialog is changed. 動的に変更するディメンションに応じ て、 移動の 種類サイズ変更の種類****は、 水平方向垂直方向、またはいずれかになります。Moving Type and Sizing Type may be Horizontal, Vertical, Both, or None depending on the dimensions that you want to change dynamically. [水平] は X 方向、[垂直] はY 方向です。Horizontal is the X dimension; Vertical is the Y direction.

  3. ボタンなどのコントロールを固定サイズにして、右下に配置しておく必要がある場合は ( [OK] または [キャンセル ] ボタンに共通)、 [サイズ変更の種類 ] を [なし] に設定し、[ 移動の種類 ] を [ 両方] に設定します。If you want a control such as a button to be at a fixed size and stay in place at the bottom right, as is common for the OK or Cancel buttons, set the Sizing Type to None, and set the Moving Type to Both. [移動の種類] で X を移動して Y 値を 移動 する場合は、[100%] を設定して、コントロールが右下隅から固定された距離になるようにします。For the Moving X and Moving Y values under Moving Type, set 100% to cause the control to stay a fixed distance from the bottom right corner.

    動的レイアウトDynamic Layout

  4. ダイアログ ボックスの拡張と共に拡張させたいコントロールがあるとします。Suppose you also have a control that you want to expand as the dialog expands. 通常、複数行の編集ボックスを拡張して、テキスト領域のサイズを増やすために、ダイアログを拡張するか、より多くのデータを表示するために、リスト コントロールを拡張します。Typically, a user might expand a dialog in order to expand a multiline editbox to increase the size of the text area, or they might expand a list control to see more data. この場合は、[ サイズ変更の種類 ] を [両方] に設定し、[ 移動の種類 ] を [なし] に設定します。For this case, set the Sizing Type to Both, and set the Moving Type to none. 次に、 サイズ変更 Xサイズ変更の Y 値を100に設定します。Then, set the Sizing X and Sizing Y values to 100.

    動的レイアウト設定Dynamic Layout Settings

  5. コントロールにとって意味がある可能性のあるその他の値をテストします。Experiment with other values that might make sense for your controls. たとえば、1行のテキストボックスがあるダイアログでは、 サイズ変更の種類 が [ 水平方向 のみ] に設定されている場合があります。A dialog with a one-line textbox might have the Sizing Type set to Horizontal only, for example.

プログラムによる動的レイアウト プロパティの設定Setting dynamic layout properties programmatically

前の手順は、デザイン時にダイアログの動的レイアウト プロパティを指定するには便利ですが、動的レイアウト プロパティを実行時に制御したい場合は、動的レイアウト プロパティをプログラムで設定できます。The previous procedure is useful for specifying dynamic layout properties for a dialog at design time, but if you want to control the dynamic layout at runtime, you can set dynamic layout properties programmatically.

動的レイアウト プロパティをプログラムによって設定するにはTo set dynamic layout properties programmatically

  1. ダイアログの動的レイアウトを指定する、ダイアログ クラスの実装コードの場所を検索または作成します。Find or create a place in your dialog class's implementation code where you want to specify the dynamic layout for the dialog. たとえば、ダイアログに AdjustLayout などのメソッドを追加して、レイアウトを変更する必要がある場所から呼び出すことができます。For example, you might want to add a method such as AdjustLayout in your dialog, and call it from places where the layout needs to be changed. 最初にこれをコンストラクターから呼び出すか、ダイアログに変更を加えた後で呼び出すことができます。You might first call this from the constructor, or after making changes to the dialog.

  2. ダイアログの場合は、クラスのメソッドである Getdynamiclayoutを呼び出し CWnd ます。For the dialog, call GetDynamicLayout, a method of the CWnd class. GetDynamicLayoutCMFCDynamicLayout オブジェクトへのポインターを返します。GetDynamicLayout returns a pointer to a CMFCDynamicLayout object.

    CMFCDynamicLayout* dynamicLayout = pDialog->GetDynamicLayout();
    
  3. 動的な動作を追加する最初のコントロールについては、動的レイアウトクラスの静的メソッドを使用して、コントロールの調整方法をエンコードする Movesettings 構造体を作成します。For the first control to which you want to add dynamic behavior, use the static methods on the dynamic layout class to create the MoveSettings structure that encodes the way the control should be adjusted. これを行うには、まず、適切な静的メソッドである Cmfcdynamiclayout:: MoveHorizontalcmfcdynamiclayout:: movehorizontalCmfcdynamiclayout:: mo/One、または Cmfcdynamiclayout:: movehorizontal andverticalを選択します。You do this by first choosing the appropriate static method: CMFCDynamicLayout::MoveHorizontal, CMFCDynamicLayout::MoveVertical, CMFCDynamicLayout::MoveNone, or CMFCDynamicLayout::MoveHorizontalAndVertical. 移動の水平/垂直方向のアスペクト比率を渡します。You pass in a percentage for the horizontal and/or vertical aspects of the move. これらすべての静的メソッドは、コントロールの移動の動作を指定する時に使用できる、新しく作成された MoveSettings オブジェクトを返します。These static methods all return a newly created MoveSettings object that you can use to specify a control's move behavior.

    100 にするとダイアログのサイズ変更とまったく同じサイズの移動を行い、これによりコントロールのエッジが新しい境界からの固定距離を維持します。Keep in mind that 100 means move exactly as much as the dialog changes size, which causes a control's edge to stay a fixed distance from the new border.

    MoveSettings moveSettings = CMFCDynamicLayout::MoveHorizontal(100);
    
  4. サイズの動作についても、 Sizesettings 型を使用して同じ処理を行います。Do the same thing for the size behavior, which uses the SizeSettings type. たとえば、ダイアログ ボックスのサイズを変更するときにコントロールがサイズを変更しないよう指定するには、次のコードを使用します。For example, to specify that a control does not change size when the dialog resizes, use the following code:

    SizeSettings sizeSettings = CMFCDynamicLayout::SizeNone();
    
  5. Cmfcdynamiclayout:: AddItemメソッドを使用して、コントロールを動的レイアウトマネージャーに追加します。Add the control to the dynamic layout manager using the CMFCDynamicLayout::AddItem method. 目的のコントロールを指定するさまざまな方法に対して、2 つのオーバーロードがあります。There are two overloads for different ways of specifying the desired control. 1 つはコントロールのウィンドウ ハンドル (HWND) を取得し、もう 1 つは、コントロールの ID を取得します。One takes the control's window handle (HWND), and the other takes the control ID.

    dynamicLayout->AddItem(hWndControl,
    moveSettings,
    sizeSettings);
    
  6. 移動またはサイズを変更する必要がある各コントロールに対して繰り返します。Repeat for each control that needs to be moved or resized.

  7. 必要に応じて、は、 Cmfcdynamiclayout:: HasItem メソッドを使用して、コントロールが動的レイアウトの変更に依存するコントロールのリストに既に存在するかどうかを判断したり、 Cmfcdynamiclayout:: IsEmpty メソッドを使用して変更の対象となるコントロールがあるかどうかを判断したりできます。If necessary, can use the CMFCDynamicLayout::HasItem method to determine if a control is already on the list of controls subjected to dynamic layout changes, or the CMFCDynamicLayout::IsEmpty method to determine if there are any controls that are subject to changes.

  8. ダイアログのレイアウトを有効にするには、 CWnd:: EnableDynamicLayout メソッドを呼び出します。To enable dialog layout, call the CWnd::EnableDynamicLayout method.

    pDialog->EnableDynamicLayout(TRUE);
    
  9. 次にユーザーがダイアログのサイズを変更したときに、 Cmfcdynamiclayout:: アジャスト メソッドが呼び出され、実際に設定が適用されます。The next time the user resizes the dialog, the CMFCDynamicLayout::Adjust method is called which actually applies the settings.

  10. 動的レイアウトを無効にする場合は、 Benabled パラメーターに FALSE を指定して CWnd:: enabledynamiclayoutを呼び出します。If you want to disable dynamic layout, call CWnd::EnableDynamicLayout with FALSE as for the bEnabled parameter.

    pDialog->EnableDynamicLayout(FALSE);
    

リソース ファイルから動的レイアウトをプログラムで設定するにはTo set the dynamic layout programmatically from a resource file

  1. 次の例に示すように、 Cmfcdynamiclayout:: Move横軸 Andvertical メソッドを使用して、関連するリソーススクリプトファイル (.rc ファイル) で動的レイアウト情報を指定するリソース名を指定します。Use the CMFCDynamicLayout::MoveHorizontalAndVertical method to specify a resource name in the relevant resource script file (.rc file) that specifies dynamic layout information, as in the following example:

    dynamicLayout->LoadResource("IDD_DIALOG1");
    

    名前付きリソースは、次の例のように、リソースファイルの AFX_DIALOG_LAYOUT エントリの形式でレイアウト情報を含むダイアログを参照する必要があります。The named resource must reference a dialog that contains layout information in the form of an AFX_DIALOG_LAYOUT entry in the resource file, as in the following example:

    /////////////////////////////////////////////////////////////////////////////
    //
    // AFX_DIALOG_LAYOUT
    //
    
    IDD_MFCAPPLICATION1_DIALOG AFX_DIALOG_LAYOUT
    BEGIN
    0x0000,
    0x6400,
    0x0028,
    0x643c,
    0x0028
    END
    
    IDD_DIALOG1 AFX_DIALOG_LAYOUT
    BEGIN
    0x0000,
    0x6464,
    0x0000,
    0x6464,
    0x0000,
    0x0000,
    0x6464,
    0x0000,
    0x0000
    
    END
    

関連項目See also

CMFCDynamicLayout クラスCMFCDynamicLayout Class
コントロールクラスControl Classes
ダイアログボックスクラスDialog Box Classes
ダイアログエディターDialog Editor
Visual C++ 2015 の MFC の動的ダイアログレイアウトDynamic Dialog Layout for MFC in Visual C++ 2015