Contents tagged with Silverlight

  • Silverlight: Working with ActualHeight & ActualWidth at Runtime

    Tags: Silverlight

    I came up against a problem, it seems like a pretty specific problem, but none the less the solution took me a while to figure out, so worth sharing!

    My problem: I have a user control that contains some text among other things, but the text is of various length, the containing textblock therefore, like the user control has a dynamic height (set the Height property to System.Double.NaN).

    There are n instances of the user control within a StackPanel, as a control is added to the StackPanel I want a StoryBoard which animates the Height and the Opacity.  The Height of course I do not know.

    So I need to the set the Value of the Double Animation at runtime.

    The XAML for the StoryBoard.

    Code Snippet
    1. <Storyboard x:Name="sbExpandControl">
    2.     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(FrameworkElement.Height)">
    3.         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    4.         <EasingDoubleKeyFrame KeyTime="00:00:02" Value="100" x:Name="expandToHeight"/>
    5.     </DoubleAnimationUsingKeyFrames>
    6.     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
    7.         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    8.         <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
    9.     </DoubleAnimationUsingKeyFrames>
    10. </Storyboard>

    Firstly I need to new up the user control, set all the properties, add the control to the StackPanel, set the height of the DoubleAnimation and fire the StoryBoard.

    Just simply going UserControl.ActualHeight will return 0 because the layout engine has not calculated the ActualHeight property. Which is the problem!!!

    So we need to use the Dispatcher class (you can find out more on MSDN).

    Code Snippet
    1. UserComment uc = newUserComment()
    2. {
    3.     Comments = v.Comments,
    4. };
    6. stkComments.Children.Insert(0, uc);
    7. stkComments.Dispatcher.BeginInvoke(() =>
    8.     {
    9.         uc.ExpandControl();
    10.     });

    In the User Control (UserComment)

    Code Snippet
    1. publicvoid ExpandControl()
    2. {
    3.     expandToHeight.Value = this.ActualHeight;
    4.     sbExpandControl.Begin();
    5. }

    Hope this helps!


  • Silverlight DataGrid: Scroll with mouse wheel&hellip;quick and dirty!

    Tags: Silverlight

    By Default scrolling with the mouse wheel is not enabled in the Silverlight DataGrid, actually I don’t think any control has it enabled.

    Personally I think its pretty standard functionality for things to scroll with the mouse wheel.

    So, I have got this little chunk of code that takes does the trick, nothing fancy going on here, but it works a treat.

    Code Snippet
    1. privatevoid dgResults_MouseWheel(object sender, MouseWheelEventArgs e)
    2. {
    3.     if (!e.Handled)
    4.     {
    5.         int rowsToMove = 0;
    6.         if (e.Delta < 0)
    7.         {
    8.             rowsToMove = e.Delta / 120 * -1;
    9.         }
    10.         else
    11.         {
    12.             rowsToMove = e.Delta / 120 * -1;
    13.         }
    15.         if (dgResults.SelectedIndex == 0
    16.                 || dgResults.SelectedIndex == (dgResults.ItemsSource.Cast<ItemSourceType>().ToList().Count - 1))
    17.         { return; }
    19.         dgResults.SelectedIndex = dgResults.SelectedIndex + rowsToMove;
    20.         dgResults.ScrollIntoView(dgResults.SelectedItem, dgResults.Columns[0]);
    21.     }
    22. }

    To explain a little…I found that my delta would change in multiples of 120, depending on how fast I scrolled, –120 if I scrolled down, +120 is I scrolled up.  I needed to change this as if I scrolled down I needed the SelectedIndex to increase, so that’s what the first bit does.

    Then I check that I’m not at either 0 or the last item in the datagrid, set the selected index and use the ScrollToView() method.

    You may need to change slightly if you have horizontal scrolling, to stay with the correct column, for me having the first column is more than ideal, perfect in fact.

    Note: This code has been tested nowhere except on  my dev machine. So, here goes!!


  • Sharepoint | Silverlight video player web part

    Tags: .NET 3.5,, SharePoint, Silverlight

    Silverlight makes working with videos pretty straight forward, Microsoft makes Silverlight pretty straight forward with and sharepoint is written in, so match made in tech heaven!!

    I wanted a video player web part for sharepoint, that had some simple functionality like play, pause and volume.  I started with expression encoder which output a nice media player interface...this is OK, but has a couple of restrictions; 1, its far to rich for what I wanted, animations all over the place and 2, its JavaScript with Silverlight 1.  So, using blend I opened one of the exported files to rip out a few features of the player.

    Play / Pause button, volume control and some associated storyboards for some nice animations... visible = true; visible = false is so last year!!!

    I copied the xaml into my own Silverlight 2 app, that already had the media player element.  A little positioning in blend and we're off.  Right that's far too much waffle lets get to it!


    I wont paste the xaml here as it basically only a media element, the play/pause button and volume control copied from Expression Encoder. OK, well maybe a little...

    <MediaElement HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="MediaMain" VerticalAlignment="Stretch" Source="" Stretch="Fill" AutoPlay="False"/>

    What I did add was handlers for all of the events e.g. Play, pause, volume (actually all the code to do the slider) and hide/show events for the play button.  More on that in a mo.

    Of course for this to be a web part, the movie file at least has to be a variable that's changeable in the properties of the web part.  To do this I am going to use Silverlight's InitParams property.  Its worth mentioning that the movies are nothing to do with me...they are going to live in a sharepoint library, they are encoded into wmv format using another app.

    In the App.xaml file within your Silverlight project you will find an OnStartUp method, this is where I handle the InitParams.

            private void OnStartup(object sender, StartupEventArgs e) 
                this.VideoUrl = string.Empty;
                if (e.InitParams["videoUrl"] != null) {
                    this.VideoUrl = e.InitParams["videoUrl"];
                if (e.InitParams["AutoPlay"] != null) {
                    this.AutoPlay = Convert.ToBoolean(e.InitParams["AutoPlay"]);
                else {
                    this.AutoPlay = false;
                if (e.InitParams["Loop"] != null) {
                    this.Loop = Convert.ToBoolean(e.InitParams["Loop"]);
                else {
                    this.Loop = false;
                // Load the main control here
                this.RootVisual = new Page();

    As you can see I am expecting 3 params and set class level properties for later use. AutoPlay(play the video on page load) and Loop play(to obvious to describe!!), VideoUrl (the url of the video to show).

    public string VideoUrl { get; private set; }
    public bool AutoPlay { get; private set; }
    public bool Loop { get; private set; }

    In the Silverlight class (Page) constructor I get the values like this...

            App currApp;
            public Page()
                // Required to initialize variables
                currApp = Application.Current as App;
                VideoMain.Source = new Uri(currApp.VideoUrl);
                VideoMain.AutoPlay = currApp.AutoPlay;
                if (currApp.AutoPlay) {
                    ControlsPlayPause.Opacity = 0;
                    PlaySymbol.Opacity = 0;
                    PauseSymbol.Opacity = 1;

    Here you can see I get the current application, cast it as App (insert whatever the name of your own application class is...App is default) and access the properties.  I am setting the source of the video and deciding whether to play or not, setting the UI to suit.

    I have a couple of handlers on the UserControl to show the play/pause button.  Basically when the mouse hovers over the control show the button (begin the StoryBoard that animates it in)

            private void UserControl_MouseEnter(object sender, MouseEventArgs e)
                if (ControlsPlayPause.Opacity < 1)
            private void UserControl_MouseLeave(object sender, MouseEventArgs e)

    In the top one, I check for opacity, as you can see in the class constructor if the video is not set to AutoPlay I show the play button.

    I don't use this, but for reference this is what the markup would look like to use this Silverlight app.

        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
                <param name="source" value="ClientBin/VideoViewer.xap"/>
                <param name="background" value="white" />
                <param name="initParams" value="videoUrl=http://mossinstance/site/library/movie.wmv,AutoPlay=true,Loop=false" />
                <a href="http://Silverlight.2.0.exe" style="text-decoration: none;">
                     <img src="" alt="Get Microsoft Silverlight" style="border-style: none"/>
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>


    Now onto the web part.  I am going to have the Silverlight app on the Sharepoint server, there are obviously several ways, one that appeals to me most is have a sharepoint library for your Silverlight apps, or it could be as simply as creating a ClientBin folder at the route of the site.  Don't forget you need to set the MIME type up for Silverlight.

    The web part itself is pretty simple, all I need is 3 properties, create the Silverlight control and set the InitParams.

    I do have a custom "NotInstalled" template, but you don't need that.  I didn't want users to have to download the installer from the web, so I have put it on the network. You will also see I have set the source of the Silverlight control to a ClientBin folder at the root of the site.

    Another point to note(!) I have put the dll System.Web.Silverlight in the GAC, there are arguments for and against, I prefer the GAC.

    Now install your web part in whatever method you prefer...

    Some pages/sites/articles that helped.

    I have literally just found this on codeplex, it's a Silverlight 1.0 video player web part for Sharepoint.  Would have been no good for me as I have no interest in Silverlight 1.0, but you might!!


  • MS: Would it really have been so difficult?

    Tags:, Silverlight, Visual Studio

    When working with and now XAML I lean towards code view over the designer, a preference of course, but considering this feature I guess I am not alone.  When working with events in XAML you can simply type "Click=" and the nice little helper jumps up asking what event handler you'd like to wire it up to or even create a new one and the stub will be created. NICE!


    As an added little beauty, this doesn't automatically send you off into the code behind.

    Why-o-Why isn't it the same for markup?


  • MIX UK 07 - Day One! Silverlight, hosting, Live Services and ants!

    Tags: .NET 3.5, AJAX, Personal, Silverlight, User Group

    Day one is over at MIX UK.  As my first experience of a Microsoft conference I must say I was not disappointed :) The conference opened with a keynote from George Moore and Scott Guthrie and lots of small demos from third party companies and the little apps they have developed using MS technologies, mainly Silverlight, which is the main theme of the conference, well day one at least!!

    In the first and second session I stayed with ScottGu and watched as he ripped through the power of silverlight, present and future.  As well as the basic XAML shapes and textblock, he covered some features of the *special* silverlight CLR.  He also stated that there will be a set of controls (50 was the quoted number!), from basic input controls like the Textbox to more advanced controls like the DataGrid - this for me as a business application developer is fantastic, I have enjoyed playing with Silverlight but didn't really have a "real life" use for it without the ability to databind to controls.  These will be distributed in a similar format to the AJAX Control Toolkit, with full source downloadable which is pretty cool.

    I have a silly little jotter pad I have written as my first silverlight application - I must post it up at some point.  I know, I am gonna get the FREE 4gb of silverlight hosting MS offer and then I'll post the link! You should check out the silverlight hosting - if you plan of hosting video in silverlight to stream then this will save you a fortune in bandwidth etc.  There are limits like only a 10min video can be uploaded (this is due to and MPEG licensing thing apparently - video is not my thing!) You can only upload 30MB at a time.  There is also a limit on the number of minutes streaming you can have but its very high!

    Next, I opted to go for the "Developing Next Gen Web Apps with Windows Live Services", this I regret, not because it wasn't good, Angus Logan and Danny Thorpe did a good job (Angus was pretty humorous) but I just knew most of what they demo'ed (Virtual Earth stuff), I guess I took the safe option as a pose to going to "A nice cup of tea and a sit down" which may or may not have involved interaction from myself - heaven forbid!

    Also didn't help being sat next to someone with an entire colony of blood sucking ants having a carnival in his pants, the chairs are linked together, it got a little hairy at times!!

    We'll see what tomorrow brings!  We have been advised to hang around till the end when swag bags will be distributed...but the contents are yet to be revealed!