I have created a Silverlight page by setting DesignHeight=”300″ and DesignWidth=”600″. When I restore the browser window then the controls of the page also get small.
If I re-size the browser window to even smaller then the controls on my page disappear. I need to provide a scroll bar but when I add scroll bar then nothing gets displayed on the page.
<UserControl x:Class="ResourceCenter.SMTest.Planogram"
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:UI="clr-namespace:VISZERA.UI.Controls;assembly=VISZERA.UI"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:doc="clr-namespace:VISZERA.UI;assembly=VISZERA.UI.DocumentViewer"
xmlns:ig="http://schemas.infragistics.com/xaml"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="1000">
<ScrollViewer Background="AliceBlue">
<Border x:Name="planoPage">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderBrush="#94A8C0" BorderThickness="2" Padding="5"/>
<!--<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="0" />-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#94A8C0" BorderThickness="2" Padding="5" Grid.Row="1"/>
<!--<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="1" />-->
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Name="lblAssoProducts" Text="Associated Product" VerticalAlignment="Center" FontSize="13" HorizontalAlignment="Center" />
<ListBox Name="lstProducts" Grid.Row="1" />
</Grid>
<Grid Grid.Row="2" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<!--Diplay Document Viewer in first Row of this Grid-->
<Border x:Name="brdCnt" BorderBrush="#94A8C0" BorderThickness="2" Padding="5"/>
<!--<Border x:Name="brdCnt" BorderBrush="Gray" BorderThickness="1" />-->
<doc:VISZERADocumentViewer x:Name="DocViewer" CanCutPages="False"></doc:VISZERADocumentViewer>
<Border BorderBrush="#94A8C0" BorderThickness="2" Grid.Row="1" />
<Grid Grid.Row="1" Margin="5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Labels-->
<TextBlock Name="lblCategory" Text="Category :" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
<TextBlock Name="lblSubCategory" Text="Sub Category :" Grid.Row="1" Height="20" HorizontalAlignment="Right" FontWeight="Bold" />
<TextBlock Name="lblDC" Text="DC :" Grid.Row="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
<TextBlock Name="lblFootage" Text="Footage :" Grid.Column="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
<TextBlock Name="lblFileType" Text="File Type :" Grid.Row="1" Grid.Column="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
<TextBlock Name="lblReleasedOn" Text="Released On :" Grid.Row="2" Grid.Column="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
<!--Input Controls-->
<TextBox Name="txtCategory" Grid.Column="1" Margin="2" Height="20"/>
<TextBox Name="txtSubCategory" Grid.Row="1" Grid.Column="1" Margin="2" Height="20" />
<TextBox Name="txtFootage" Grid.Column="3" Margin="2" Height="20"/>
<TextBox Name="txtFileType" Grid.Row="1" Grid.Column="3" Margin="2" Height="20"/>
<TextBox Name="txtReleasedOn" Grid.Row="2" Grid.Column="3" Margin="2" Height="20"/>
<telerik:RadComboBox x:Name="cmbDC" IsEditable="True" Grid.Row="2" Grid.Column="1" Margin="2" Height="20">
<telerik:RadComboBoxItem>CJ1</telerik:RadComboBoxItem>
<telerik:RadComboBoxItem>CJ3</telerik:RadComboBoxItem>
<telerik:RadComboBoxItem>CJ3</telerik:RadComboBoxItem>
<telerik:RadComboBoxItem>Excl</telerik:RadComboBoxItem>
<telerik:RadComboBoxItem>Sovereign</telerik:RadComboBoxItem>
</telerik:RadComboBox>
<!--Save & Delete Buttons-->
<telerik:RadButton Name="btnSave" Content="Save" Grid.Row="1" Grid.Column="4" Width="75" Height="25" ToolTipService.ToolTip="Save"/>
<telerik:RadButton Name="btnDelete" Content="Delete" Grid.Row="1" Grid.Column="4" Width="75" Height="25" ToolTipService.ToolTip="Delete" Click="btnDelete_Click" />
</Grid>
</Grid>
</Grid>
<TextBlock Name="lblHeader" Text="Core Planogram" />
</Grid>
</Border>
</ScrollViewer>
</UserControl>
Your layout, as designed, has a
Gridinside aBorderinside aScrollViewer. They are all defaulting to the size of the screen, so theScrollVieweris redundant and will not show scrollbars.To make a ScrollViewer scroll, the contents must have a size larger than the ScrollViewer. This means setting a fixed, or at least minimum, size on some child element(s).
In your case, you could set a minimum size on the Border e.g.:
Or a min size on the Columns and Rows as suggested by scor4er, however I would actually suggest a more fluid change to the design as it is not really suited to an outer ScrollViewer.
I also note you keep nesting multiple Grids within Grids where a single Grid will do. For instance the following layout is similar to yours, but using only one grid that looks like:
It then makes sense to have a
ScrollViewerin the blue area (and possibly the purple and green areas) as those are the only panes that dynamically size.You can still have an outer ScrollViewer for the whole screen as well in which case combine the above suggestions.