Control anchoring in Silverlight

Question

This may be a bit of a silly question, but I'm not sure what else to try, so wanted to ask for some help. My problem is with anchoring controls in Silverlight.

I've got a grid (C1FlexGrid) which sits in a control. The control is used in a page and I simply want the grid size to be determined by the size of the browser window. I want to have a minimum size for it, but allow it to extend both vertically and horizontally as the user expands the browser window. In WinForms (which is what I'm used to) this is easy.

However, in Silverlight it's causing me a headache. Is it possible to get it to behave the way I want?

I've set the control width and height to auto, and specified some design width/height. The user control is then placed onto a page and both the control and page width/height set to auto.

When the grid loads its data, a few hundred rows, it automatically sizes the grid based on the fact in has 200 rows, i.e. becomes very long.

EDIT

Here's some XAML from a simple example:

<navigation:Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="Optimize.Client.Presentation.AboutView"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="About" 
    x:Name="AboutPage"
    Style="{StaticResource PageStyle}">

    <Grid x:Name="LayoutRoot" Background="White" MinWidth="300" MinHeight="300">
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
                <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <c1:C1FlexGrid Margin="10" BorderBrush="Red" BorderThickness="1" Width="Auto" Height="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <c1:C1FlexGrid.Columns>
                <c1:Column Header="User Group" Width="*" /> 
            </c1:C1FlexGrid.Columns>
        </c1:C1FlexGrid>
    </Grid>

</navigation:Page>

All I want here is a grid on a page. The page has a minimum size of 300x300. When the browser window expands I want the page to expand with it, and the grid to also expand with it, so that all borders of the grid are 10 from top/bottom/left/right. I've tried specifying * for the width/height of the layout grid, but it's still not working.

Thanks

When you say Grid, do you mean DataGrid, or Grid? Can you post your xaml? — Shawn Kendrot

Gone Coding Gone Coding · Accepted Answer · 2012-07-04T08:10:11

Auto sizing means "please resize me to my content". That will not limit you to the size of the parent control or browser.

You want Star (*) sizing which basically means "after deducting any fixed or auto columns/rows, please distribute the remaining space among any star-sized columns/rows based on the ratio of star sizes".

You also want your containers to specify HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" so that the amount of space distributed to the star-sized columns/rows can be determined (otherwise it will collapse on itself).

I can be more specific if you can post your XAML.

Control anchoring in Silverlight

1 Answers