Question

Sorry for asking an complete n00b question, but I’ve tried everything I can think of and nothing has worked.

Google hasn’t been too useful, all the results are from ancient versions of Silverlight 🙁

The problem:

I’ve got an Silverlight User Control. The layout root is an Grid. The grid is defined so:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="30" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<MyScrollButton Grid.Column="0" Name="LeftScroller" Width="30" Height="Auto" />

<ListBox x:Name="ScrollBox" Grid.Column="1"  RenderTransformOrigin="0.5, 0.5"
         ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
         ItemContainerStyle="{Binding Source={StaticResource ListBoxItemStyle}}"
         ItemsSource="{Binding Source={StaticResource ControlState:myItemSource}}"
         Style="{Binding Source={StaticResource ListBoxStyle}}"
         HorizontalAlignment="Center"
         BorderThickness="0" Width="Auto" Height="796">

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

</ListBox>

<MyScrollButton Grid.Column="2" Width="30" Height="Auto"/>

When I run this, LayoutRoot resizes correctly. It fills the browser window.

However, the child controls aren’t (re)sized. MyScrollButtons and ListBox don’t obtain any height, so they’re not visible.

I want these controls to inherit their height from the parent. They should be 100% of the height of the page.

I’ve tried:

1. Entering percentages in heights. Invalid.
2. Binding height to LayoutRoot’s height with help from Blend 3. Makes no difference.
3. Entering * as the height. Invalid.

For the ‘record’ implementing the same functionality in Flex is (was, I’m doing this as an comparison of the two techs) really easy..

Answer 1

I don’t have Silverlight 3 installed so I did this in 2. I also don’t have the “MyScrollButton” control to test with. But this code worked for me:

<UserControl
    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"
    x:Class="RegexHero.UserControl1"
    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="30" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
            <RowDefinition Height="*" />
    </Grid.RowDefinitions>


    <ListBox x:Name="ScrollBox" Grid.Column="1"  RenderTransformOrigin="0.5, 0.5"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                     ItemContainerStyle="{Binding Source={StaticResource ListBoxItemStyle}}"
                     ItemsSource="{Binding Source={StaticResource ControlState:myItemSource}}"
                     Style="{Binding Source={StaticResource ListBoxStyle}}"
                     HorizontalAlignment="Center"
                     BorderThickness="0" Width="Auto" Height="Auto" VerticalAlignment="Stretch">

            <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

    </ListBox>


    </Grid>
</UserControl>

The ListBox fills the height of the screen. I’d hope it’d be the same in Silverlight 3.