Search code examples
wpfuser-controlsdevexpress

How to resize WPF user control inside the DevExpress LayoutPanel


How to resize the user control automatically to stretch fit inside the DevExpress Dock LayoutPanel? I have tried below approach but it does not work. When I resize the layout panel by mouse, then the user control inside the panel is expected to stretch accordingly to fit the panel.

In my parent control XAML....\

<dxdo:DockLayoutManager>
<dxdo:LayoutGroup x:Name="RootGroup" VerticalAlignment="Stretch">
       <dxdo:LayoutPanel x:Name="FundMapPanel" Caption="Fund Map" ItemWidth="400" ItemHeight="320">
            <cont:FundMapUserControl></cont:FundMapUserControl>
       </dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>

And in my user control XAML..

<UserControl
. . .
. . .
Width="{Binding ElementName=FundMapPanel, Path=ItemWidth, Mode=TwoWay}"
Height="{Binding ElementName=FundMapPanel, Path=ItemHeight, Mode=TwoWay}"

. . .
. . .
</UserControl>

Solution

  • Here is the correct approach:

    <dxdo:DockLayoutManager>
        <dxdo:LayoutGroup x:Name="RootGroup">
           <dxdo:LayoutPanel x:Name="FundMapPanel" Caption="Fund Map" ItemWidth="400" ItemHeight="320">
                <cont:FundMapUserControl 
                    VerticalAlignment="Stretch" 
                    HorizontalAligment ="Stretch"
                />
           </dxdo:LayoutPanel>
        </dxdo:LayoutGroup>
    </dxdo:DockLayoutManager>
    

    As you can see there are no bindings to ItemHeight/ItemWidth at all - inner control is stretched to fill the entire content of the LayoutPanel.
    Note that you can't use the ItemHeight/ItemWidth properties because they are System.Windows.GridLength objects.