CODEWITHSUNDEEP
wpfpanel
SepehrM
SepehrM

Reputation: 1097

Hierarchical panels vs hardcoded margins performance

When designing WPF applications, is it better in terms of performance to use multiple nested panels (as they are designed to be used) or hard code the margin of most of the controls and put them in one panel such as grid?
Sample UI For example to design the above, we can write: 

<StackPanel>
                    <TextBlock Text="اطلاعات خود را وارد نمایید:" VerticalAlignment="Top"/>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="نام: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCFirstName" VerticalAlignment="Top"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="نام خانوادگی: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCLastName" VerticalAlignment="Top"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="تلفن منزل: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCHomeNumber" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="تلفن همراه: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCMobileNumber" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            </DockPanel>
                        </StackPanel>
                        <StackPanel Grid.Column="1">
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="شرکت: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCCompany" VerticalAlignment="Top"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="سمت: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCTitle" VerticalAlignment="Top"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="تلفن کاری: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCWorkNumber" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            </DockPanel>
                            <DockPanel LastChildFill="True" Margin="5, 3">
                                <TextBlock Text="وب سایت: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBox x:Name="tbVCWebSite" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            </DockPanel>
                        </StackPanel>
                    </Grid>
                    <DockPanel LastChildFill="True" Margin="5, 3">
                        <TextBlock Text="ایمیل شخصی: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <TextBox x:Name="tbVCPersonalEmail" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                    </DockPanel>
                    <DockPanel LastChildFill="True" Margin="5, 3">
                        <TextBlock Text="ایمیل کاری: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <TextBox x:Name="tbVCWorkEmail" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                    </DockPanel>
                    <DockPanel LastChildFill="True" Margin="5, 3">
                        <TextBlock Text="آدرس: " VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <TextBox x:Name="tbVCAddress" VerticalAlignment="Top"/>
                    </DockPanel>
                </StackPanel>

Or we can declare all of them in one grid and give them margins.
This article says "In many cases, a Grid element can be used instead of nested panels due to its flexibility as a layout container. This can increase performance in your application by keeping unnecessary elements out of the tree." but it seems odd to me!

Which of the above implementations is better for run time rendering performance and why?

Upvotes: 0

Views: 298

Answers (2)

RamyaN
RamyaN

Reputation: 162

The problem with defined Margin, is that when you try to resize the Window your controls will appear cropped as it has to make space for the margins. This is the same when you define lengths and widths for controls. To make it more resolution independent nesting would be a better option, through even this may not provide better results in very low resolutions.

Upvotes: 1

Erti-Chris Eelmaa
Erti-Chris Eelmaa

Reputation: 26268

The rule of thumb is that you shouldn't nest elements inside different panels, if performance is necessary - flattening out will work usually nicely.

The Margin one will be faster, as it's very easy to calculate the final position of the elements. DockPanel one will need to calculate its own position, plus it's children, which makes it more expensive.

http://msdn.microsoft.com/en-us/library/bb613542%28v=vs.110%29.aspx

Upvotes: 1

Related Questions