Sometime if Silverlight control have a bigger size than it create some problems. If browser is smaller than Silverlight control then some part of SL control get clipped. In this scenario sometime you want to get scrollbar some time you want to change SL control height according to browser.
There are some different scenario that how people want to embed there Silverlight control in there page
1. If Silverlight Control is long then it should be in scrollbar.
2. Silverlight control should filled whole page in width and height without caring of height – width ratio.
3. Silverlight control should filled page with maintaining aspect ratio.
Silverlight Control is long then it should be in scrollbar
If your Silverlight control height is fixed assume its 800px and width is 900px then you should define this in your user control in this way :
<UserControl x:Class=”Slider.Page” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”700″ Height=”800″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>
<Grid x:Name=”LayoutRoot” Background=”White”>
</Grid>
</UserControl>
and in aspx page it should be
<div id=”silverlightControlHost” style=”width:700;height:800; “>
it will give you scrollbar.
Silverlight control should filled whole page in width and height without caring of height – width ratio
In this case you need put your layout in Canvas instead of Grid and add transforms in that way:
<UserControl x:Class=”SlSizeChange.Page” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Height=”Auto” Width=”Auto” Background=”#FF29D530″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” >
<Canvas HorizontalAlignment=”Center” x:Name=”Layout” Width=”930″ Height=”640″ VerticalAlignment=”Center” RenderTransformOrigin=”0.5,0.5″ Background=”#FFB9B839″>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=”1″ ScaleY=”1″ x:Name=”LayoutScale” />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Canvas.RenderTransform>
<TextBlock Height=”75″ Width=”276″ Canvas.Left=”71″ Canvas.Top=”18″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”77″ Width=”140″ Canvas.Left=”248″ Canvas.Top=”341″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”64″ Width=”69″ Canvas.Left=”365″ Canvas.Top=”509″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”52″ Width=”125″ Canvas.Left=”652″ Canvas.Top=”525″ Text=”TextBlock” TextWrapping=”Wrap”/>
</Canvas>
</UserControl>
Then attach sizeChanged event handler
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
this.SizeChanged += new SizeChangedEventHandler(Layout_SizeChanged);
}
void Layout_SizeChanged(object sender, SizeChangedEventArgs e)
{
LayoutScale.ScaleX = e.NewSize.Width / (Layout.Width);
LayoutScale.ScaleY = e.NewSize.Height / (Layout.Height);
}
}
Silverlight control should filled page with maintaining aspect ratio
Now third case where you want to maintain your width – height aspect ratio.To achieve this follow last process in same way with a small difference:
<UserControl x:Class=”SlSizeChange.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Height=”Auto” Width=”Auto” Background=”#FF29D530″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” >
<Canvas HorizontalAlignment=”Center” x:Name=”Layout” Width=”930″ Height=”640″ VerticalAlignment=”Top” RenderTransformOrigin=”0.5,0″ Background=”#FFB9B839″>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=”1″ ScaleY=”1″ x:Name=”LayoutScale” />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Canvas.RenderTransform>
<TextBlock Height=”75″ Width=”276″ Canvas.Left=”71″ Canvas.Top=”18″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”77″ Width=”140″ Canvas.Left=”248″ Canvas.Top=”341″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”64″ Width=”69″ Canvas.Left=”365″ Canvas.Top=”509″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”52″ Width=”125″ Canvas.Left=”652″ Canvas.Top=”525″ Text=”TextBlock” TextWrapping=”Wrap”/>
</Canvas>
</UserControl>
And for C#
public partial class Page : UserControl
{
public Page()
{ InitializeComponent();
this.SizeChanged += new SizeChangedEventHandler(Layout_SizeChanged);
}
void Layout_SizeChanged(object sender, SizeChangedEventArgs e)
{
double aspectRatio = e.NewSize.Width / e.NewSize.Height;
if (aspectRatio < (Layout.Width / Layout.Height))
LayoutScale.ScaleX = LayoutScale.ScaleY = e.NewSize.Width / (Layout.Width);
else
LayoutScale.ScaleX = LayoutScale.ScaleY = e.NewSize.Height / (Layout.Height);
}
}
Now this will always maintain the aspect ratio.