| In the following tutorial we will begin building a fluid layout for a Silverlight video player. The main goal is to allow the scaling of the middle section of controlbar which houses the progressbar to scale according to the width of the player. The left and right columns will remain a fixed size. There should be no loss of quality of the graphic assets of the controls and the position of each control should remain relative of it’s container at all times. Steps 1- Build a wireframe of the containers you are trying to scale and have as fixed sizes 2- Use the Grid component as your layout component 3- Areas that you want to remain a fixed size, set the “ColumnDefinition Width” to a numerical value – ex: the pause component is fixed – ColumnDefinition Width=”50″ 4- Areas that you want to scale, set the “ColumnDefinition Width” to “*” – ex: the middle section which contains the progressbar
|
|
Wireframe of the videoplayer and the scaling we want to achieve 
|
XAML code
<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"
x:Class="FluidLayout.MainPage" Height="384" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White" MinWidth="300">
<Grid x:Name="fluidGrid" Margin="0,0,0,72" Width="{Binding Value, ElementName=sliderWidth, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="250"/>
<RowDefinition Height="61"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="65"/>
</Grid.ColumnDefinitions>
<Rectangle Width="50" Margin="0" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF212121" Offset="0"/>
<GradientStop Color="#FF070606" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="fluidContent" Margin="0" Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF222222" Offset="0"/>
<GradientStop Color="#FF070606" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="2" Width="65" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF212121" Offset="0"/>
<GradientStop Color="#FF070606" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Fill="Black" Margin="0,0,0,0" Grid.ColumnSpan="3" Height="250" VerticalAlignment="Top"/>
<Canvas HorizontalAlignment="Left" Margin="20,20,0,20" Width="12" Grid.Row="1">
<Rectangle x:Name="pause1" Width="4" Height="18">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3473AE" Offset="0"/>
<GradientStop Color="#FF1A3D63" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="pause2" Width="4" Height="18" Canvas.Left="8">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3473AE" Offset="0"/>
<GradientStop Color="#FF1A3D63" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Rectangle Height="5" Width="{Binding Width, ElementName=fluidContent, Mode=OneWay}" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" d:LayoutOverrides="Height" Margin="0,25,0,0" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF111111"/>
<GradientStop Color="#FF2A2929" Offset="0.211"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Canvas Margin="15,17,0,16" Grid.Column="2" Grid.Row="1">
<Rectangle Height="13" Width="17" Fill="#FF4C4C4C" Canvas.Left="9" Canvas.Top="8"/>
<Path Stretch="Fill" Height="5.253" Width="5.123" UseLayoutRounding="False" Data="M769.54871,417.96725 L769.50836,412.4787 L774.93469,412.49072" Stroke="#FF4C4C4C" Canvas.Left="0.54" Canvas.Top="0.05"/>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="5.444" Width="5.764" UseLayoutRounding="False" Data="M773.7923,417.28259 C773.63214,417.24255 769.02917,412.83853 769.02917,412.83853" Canvas.Left="0.4"/>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="4.984" Width="5.123" UseLayoutRounding="False" Data="M769.54871,417.96725 L769.50836,412.4787 L774.93469,412.49072" RenderTransformOrigin="0.5,0.5" Canvas.Left="0.14" Canvas.Top="22.698">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="4.324" Width="5.663" UseLayoutRounding="False" Data="M773.7923,417.28259 C773.63214,417.24255 769.02917,412.83853 769.02917,412.83853" RenderTransformOrigin="0.5,0.5" Canvas.Top="23.326">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="5.253" Width="5.192" UseLayoutRounding="False" Data="M769.54871,417.96725 L769.50836,412.4787 L774.93469,412.49072" RenderTransformOrigin="0.5,0.5" Canvas.Left="29.391" Canvas.Top="0.05">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="5.444" Width="5.842" UseLayoutRounding="False" Data="M773.7923,417.28259 C773.63214,417.24255 769.02917,412.83853 769.02917,412.83853" RenderTransformOrigin="0.5,0.5" Canvas.Left="28.883">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="4.984" Width="5.192" UseLayoutRounding="False" Data="M769.54871,417.96725 L769.50836,412.4787 L774.93469,412.49072" RenderTransformOrigin="0.5,0.5" Canvas.Left="29.796" Canvas.Top="22.698">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Stretch="Fill" Stroke="#FF4C4C4C" Height="4.324" Width="5.739" UseLayoutRounding="False" Data="M773.7923,417.28259 C773.63214,417.24255 769.02917,412.83853 769.02917,412.83853" RenderTransformOrigin="0.5,0.5" Canvas.Left="29.391" Canvas.Top="23.326">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Canvas>
</Grid>
<Slider x:Name="sliderWidth" Height="28" Margin="196,0,194,31" VerticalAlignment="Bottom" Minimum="350" Maximum="640" Value="640" Width="250"/>
<Image Margin="247,43,244,175" Width="149" Source="silverlight-logo.png" Stretch="None" d:LayoutOverrides="HorizontalAlignment"/>
</Grid>
</UserControl>
The controls in this tutorial are not functional, the controls are simply meant to be placed with a fluid layout. The following are tutorials on building a video player
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button
Related Articles
Databinding controls in SilverLight 3
Building a Progress Bar for your Hulu inspired SilverLight video player