Question

I am currently writing a Silverlight application that will view documents. The main panel is a WrapPanel with controls on the left and bottom of the page. Currently, the WrapPanel width is getting set to whatever it needs to be able to display all document pages on one line and I would like to change it so that it will fill up the rest of the browser window, with no horizontal scroll bar

Here is my current xaml, where <doc:DocumentViewer x:Name="Viewer".. is the wrap panel in question.

<UserControl x:Class="SilverlightXPSViewer.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"
    xmlns:doc="http://schemas.firstfloorsoftware.com/documenttoolkit"
    mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="140" />
        </Grid.ColumnDefinitions>     
        <doc:ThumbnailListBox x:Name="Thumbnails"  Grid.Row="0" Grid.Column="0"      DocumentDataSource="{Binding ElementName=DataSource}" PageIndex="{Binding PageIndex,     Mode=TwoWay, ElementName=PageNavigator}"/>
        <doc:DocumentViewer x:Name="Viewer"  Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"         DocumentDataSource="{Binding ElementName=DataSource}" Width="{Binding ElementName=MainWidth}"/>
        <doc:DocumentDataSource x:Name="DataSource"  Grid.Row="0"    LoadError="DataSource_LoadError" />
        <StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal">
            <doc:PageNavigator x:Name="PageNavigator" Margin="0"
                           PageCount="{Binding PageCount, ElementName=Viewer}"
                           PageIndex="{Binding PageIndex, ElementName=Viewer, Mode=TwoWay}"/>
            <doc:PageNavigator />
        </StackPanel>

        <doc:ViewModePicker Grid.Row="1"  Grid.Column="0" x:Name="Collection"/>
        <Button Width="200" Name="btnZoomIn" Grid.Row="1" Grid.Column="1" Cursor="Hand" Click="btnZoomIn_Click">Zoom In</Button>
        <Button Width="200" Name="btnZoomOut" Grid.Row="1" Grid.Column="2" Cursor="Hand" Click="btnZoomOut_Click">Zoom Out</Button>
    </Grid>
</UserControl>

Answer 1

Use the System.Windows.Browser.HtmlPage object to get the available screen size from the HTML DOM (thus letting the browser to tell you how much space there is) and set the control size from that.

here’s an example:

http://www.jeff.wilcox.name/2008/06/browserscreeninformation/