locked
When does a Wrap Panel wrap? RRS feed

  • Question

  • I recreated an example for a Wrap Panel given on page 107 and 108 in the book Foundation Expression Blend 2. The example consists of 5 rectangles nested in a Wrap Panel and the Wrap Panel nested in a Grid Panel.  What surprised me is the Wrap panel did not wrap when the columns and rows in the Grid Panel were locked.   The Wrap Panel did wrap when the columns and rows in the Grid Panel were unlocked.  I expected the performance of the Wrap Panel to be independent of the Grid Panel's settings.

    Here is the XAML code for when the Grid rows and columns were unlocked.
    <Grid.RowDefinitions>
                <RowDefinition Height="0.535*"/>
                <RowDefinition Height="0.465*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.463*"/>
                <ColumnDefinition Width="0.537*"/>
            </Grid.ColumnDefinitions>

    <WrapPanel Margin="43.644,59.19,0,28" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left">
                <Rectangle Width="33" Height="31" Fill="#FFD81313" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="58" Height="30" Fill="#FFB0DC57" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="73.644" Height="34" Fill="#FF2B69D6" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="60" Height="28" Fill="#FF1C2805" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="80" Height="35" Fill="#FFE8D723" Stroke="#FF000000"/>
            </WrapPanel>

    Here is the XAML code when the Grid rows and columns were locked.
    <Grid.RowDefinitions>
                <RowDefinition Height="302.81"/>
                <RowDefinition Height="263.19"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="274.096"/>
                <ColumnDefinition Width="317.904"/>
            </Grid.ColumnDefinitions>

    <WrapPanel Margin="43.644,59.19,0,28" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left">
                <Rectangle Width="33" Height="31" Fill="#FFD81313" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="58" Height="30" Fill="#FFB0DC57" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="73.644" Height="34" Fill="#FF2B69D6" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="60" Height="28" Fill="#FF1C2805" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="80" Height="35" Fill="#FFE8D723" Stroke="#FF000000"/>
            </WrapPanel>

    The only difference I can see in the two versions is the presence of an asterisk in the values for Height and Width attributes in the Row and Column definitions for the Grid.

    I am favorably impressed with the book Foundation Expression Blend 2 and would recommend it to any new user of Expression Blend 2.

    Howard
    Wednesday, May 21, 2008 3:36 PM

All replies

  • Hi, hrhan,

    When the columns and rows in the grid panel are locked, their size won't be changed though the window is being resized. So the wrap panel's size is constant (we can conclude from Margin="43.644,59.19,0,28" Grid.Column="1" Grid.Row="1"  ), and it won't be wrapped.

    In one word, wrap panel wraps only when it is being resized.

    You can try these codes:

           <Grid.RowDefinitions>
                <RowDefinition Height="238.61"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="283.768"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

           <WrapPanel Margin="43.644,59.19,0,28" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1">
                <Rectangle Width="33" Height="31" Fill="#FFD81313" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="58" Height="30" Fill="#FFB0DC57" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="73.644" Height="34" Fill="#FF2B69D6" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="60" Height="28" Fill="#FF1C2805" Stroke="#FF000000" HorizontalAlignment="Left"/>
                <Rectangle Width="80" Height="35" Fill="#FFE8D723" Stroke="#FF000000"/>
            </WrapPanel>

    Thursday, May 22, 2008 3:18 AM