How do I autosize a silverlight 3 usercontrol based on its contents?

Answer 1

I've gone through the code and there is a lot of places in which the height is being set explicitly, which will interfere with the layout calculations.

The changes made are as follows :

• The user control has an explicit height / width which I have removed.
• The canvas was only being added to provide the clip feature, and it is not necessary (not to mention that canvas has no size specified which will cause issues)
• Horizontal and Vertical alignment settings are specifically set as centered to avoid it stretching the content to fit the screen, it will fit the contents.
• the rectangle providing the clipping to the top background to avoid it overwriting the border has been set to the height of the background +10 (the radius) so the bottom of the background is not also clipped to a curve (and 10 keeps it within a sensible height.)
• I took out the heights in the item control, this isn't required, but I prefer the contents to ask for the height they need instead of being given an arbitary height. /edit : given you want it to change based on font size, this would become necessary, you can not explicitly set the height, and also want it to auto size the height at the same time /edit.

Created a dummy local class with the right properties / child collection and bound to it, the results look like I think you are wanting. If you want the bottom of the blue background to also curve, the height of the stackpanel clip should be set to 45.

Dont forget to rename the class back, my version was just mainpage1.

hope that helps

A.

    <UserControl x:Class="SilverlightApplication1.MainPage"
                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"    
                 mc:Ignorable="d">

    <Border BorderThickness="1" BorderBrush="#FF716F6E" CornerRadius="10" VerticalAlignment="Center" HorizontalAlignment="Center">
        <StackPanel Width="250" Orientation="Vertical" VerticalAlignment="Center">
             <StackPanel Width="250" Height="45" Orientation="Vertical" >
                <StackPanel.Clip>
                   <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,250,55"/> 
                </StackPanel.Clip>
                    <StackPanel.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#FFD3DCEF"  Offset="0.0" />
                        <GradientStop Color="#FFFFFFFF" Offset=" 1.0"/>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <StackPanel Width="250" Orientation="Horizontal">
                    <StackPanel Width="210" Height="45" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,10,0,0" VerticalAlignment="Top" FontWeight="Black" FontSize="12"/>
                        <TextBlock Text="{Binding Type}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,0,0,0" VerticalAlignment="Top" FontStyle="Italic"/>
                    </StackPanel>
                    <Button Width="20" Height="20" VerticalAlignment="Top" Margin="10" Content="^" FontFamily="Verdana" />
                </StackPanel>
            </StackPanel>
            <ItemsControl x:Name="items" ItemsSource="{Binding Rows}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Width="250" Orientation="Horizontal">
                            <Image Width="16" Height="16" VerticalAlignment="Center" Source="/SchemaDesigner;component/column.png"/>
                            <TextBlock Text="{Binding ColumnName}" Width="100" />
                            <TextBlock Text="{Binding ColumnType}" Width="130" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Border>
</UserControl>