WPF Grid Shared Size Groups

30 ביוני 2009

תגיות: , ,
אין תגובות

WPF Grid Shared Size Groups


The Grid rows and columns are given a direct size by the developer or are automatically sized by their content’s size. By using shared sized group feature you may also set the size of the rows or columns by the size of a different row/column at the current grid or from a different grid available in the page.


For example, you may set the column width of column 2 by the column width of column one at the same grid. You may also set the column width of column 2 at grid 2 by column 1 at grid 1.


Normal Grid:


image


column 2 width set by column 1 width of the same grid:


image


 


Column 2 width at grid 2 is set by column 1 width of grid 1:


image


 


 


You may reuse the shared size group in multiple columns or rows at multiple grids.
Please pay attention to the fact that the share size group is set both ways, that means that the size of all shared column (or rows) is set by the largest column (or row).


Sharing a group can be done by simply setting the ColumnDefinition’s SharedSizeGroup property to a specific name that will be also used at the other’s column’s definition.


<Grid Grid.Row="0"Background="AliceBlue"  ShowGridLines="True">
    <
Grid.ColumnDefinitions>
        <
ColumnDefinition Width="Auto"SharedSizeGroup="ShareThis"></ColumnDefinition>
        <
ColumnDefinition Width="Auto"></ColumnDefinition>
        <
ColumnDefinition></ColumnDefinition>
    </
Grid.ColumnDefinitions>


….


<Grid Grid.Row="2" Background="AntiqueWhite"  ShowGridLines="True">
    <
Grid.ColumnDefinitions>
        <
ColumnDefinition Width="Auto" SharedSizeGroup="ShareThis"></ColumnDefinition>
        <
ColumnDefinition Width="Auto" ></ColumnDefinition>
        <
ColumnDefinition></ColumnDefinition>
    </
Grid.ColumnDefinitions>


One last thing to do is to set the scope of the shared size group in the current window, this can be done by setting Grid.IsSharedSizeScope property to true at a container whose scope encompasses the shared columns/rows.


<Grid Grid.IsSharedSizeScope="True" >


You can view a sample code here.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *