Blog

What's the difference between the ItemsSource and DataContext properties

Mon, 30 May 2011 02:29:31 GMT

When I started silverlight (not long ago) I had a question that really bothered me: What's the difference between the ItemsSource and DataContext property of a list box. When I searched around, I found answers that go along the line of: a DataContext is typically used for...whatever... and ItemsSource is used for ... whatever... but when O read those explanations I still wasn't happy, something was still bothering me, it still wasn't clear to me "when" do I set a "Data"Context" and "when" do I set the ItemSource instead. So as usual, if you didn't get the answer right, you didn't ask the question right.

So here is my attempt to answer this question - while I'm teaching you how to ask the same question differently (like a detective) - you should really ask: When is it that, if I set the DataContext I won't get the same results as setting the ItemSource or vise versa. And as the Talmud states "Within a question from the wise lies half the answer". This will lead you right to the answer…

…If you bind a Person list to the DataContext of your list, your list will still not be populated, just as if you bind the name property of a person object to the DataContext of a textbox it won't display the name. ItemsSource is to a ListBox as the text property is to a TextBox, It tells the binding system to fill the items with all of the items in that list, which datacontext does't do. A DataContext by itself never displays or generates any UI content.

Now that I explained to you what ItemSource does, you can go back and read all the other posts that try to answer this question by explaining what the DataContext typically does...

Animating Thickness and Margin Properties in Silverlight

Fri, 27 May 2011 05:42:04 GMT

This is just an update to Ben Lemmon's solution his solution only explains how to do it from code, i changed the code so its possible to set it up using xaml.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Custom.Animations
{
    public class ThicknessAnimationX
    {
        public static readonly DependencyProperty ElementProperty = DependencyProperty.RegisterAttached("Element", typeof(DependencyObject), typeof(DoubleAnimation), new PropertyMetadata(new PropertyChangedCallback(OnElementPropertyChanged)));

        // The time along the animation from 0-1
        public static DependencyProperty TimeProperty = DependencyProperty.RegisterAttached("Time", typeof(double), typeof(DoubleAnimation), new PropertyMetadata(OnTimeChanged));

        // The object being animated
        public static DependencyProperty TargetProperty = DependencyProperty.RegisterAttached("Target", typeof(DependencyObject), typeof(ThicknessAnimationX), null);
        public static DependencyProperty TargetPropertyProperty = DependencyProperty.RegisterAttached("TargetProperty", typeof(DependencyProperty), typeof(DependencyObject), null);

        public static readonly DependencyProperty FromProperty = DependencyProperty.RegisterAttached("From", typeof(Thickness), typeof(DoubleAnimation), null);
        public static readonly DependencyProperty ToProperty = DependencyProperty.RegisterAttached("To", typeof(Thickness), typeof(DoubleAnimation), null);

        public static void SetElement(DependencyObject o, DependencyObject value)
        {
            o.SetValue(ElementProperty, value);
        }

        public static DependencyObject GetElement(DependencyObject o)
        {
            return (DependencyObject)o.GetValue(ElementProperty);
        }

        private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue != null)
            {
                DoubleAnimation doubleAnimation = (DoubleAnimation)d;

                doubleAnimation.SetValue(TargetProperty, e.NewValue);
                doubleAnimation.From = 0;
                doubleAnimation.To = 1;
                doubleAnimation.SetValue(TargetPropertyProperty, FrameworkElement.MarginProperty);
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(ThicknessAnimationX.Time)"));
                Storyboard.SetTarget(doubleAnimation, doubleAnimation);
            }
        }
  

        private static void OnTimeChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            DoubleAnimation animation = (DoubleAnimation)sender;
            double time = GetTime(animation);
            Thickness from = (Thickness)sender.GetValue(FromProperty);
            Thickness to = (Thickness)sender.GetValue(ToProperty);
            DependencyProperty targetProperty = (DependencyProperty)sender.GetValue(TargetPropertyProperty);
            DependencyObject target = (DependencyObject)sender.GetValue(TargetProperty);
            target.SetValue(targetProperty, new Thickness((to.Left - from.Left) * time + from.Left,
                                                          (to.Top - from.Top) * time + from.Top,
                                                          (to.Right - from.Right) * time + from.Right,
                                                          (to.Bottom - from.Bottom) * time + from.Bottom));
        }

        public static double GetTime(DoubleAnimation animation)
        {
            return (double)animation.GetValue(TimeProperty);
        }

        public static void SetTime(DoubleAnimation animation, double value)
        {
            animation.SetValue(TimeProperty, value);
        }

        public static Thickness GetFrom(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(FromProperty);
        }

        public static void SetFrom(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(FromProperty, value);
        }

        public static Thickness GetTo(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(ToProperty);
        }

        public static void SetTo(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(ToProperty, value);
        }
    }   
}

And then you can do this in XAML

    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="Positions">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:0.2"/>
    			</VisualStateGroup.Transitions>
                <VisualState x:Name="Left">                    
                	<Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" Custom:ThicknessAnimationX.To="0,0,0,0" Custom:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" />
                	</Storyboard>                    	
                </VisualState>
                <VisualState x:Name="Right">                    
                	<Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" Custom:ThicknessAnimationX.To="0,200,0,0" Custom:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" />
                    </Storyboard>                    
                </VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>

Note that if you don't set a Target property to a DoubleAnimation in XML, you won't be able to display the control/page in Blend. To fix this, just add a fake target property, it will be overriden at runtime anyway

    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="Positions">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:0.2"/>
    			</VisualStateGroup.Transitions>
                <VisualState x:Name="Left">                    
                	<Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" Custom:ThicknessAnimationX.To="0,0,0,0" Custom:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" />
                	</Storyboard>                    	
                </VisualState>
                <VisualState x:Name="Right">                    
                	<Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" Custom:ThicknessAnimationX.To="0,200,0,0" Custom:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" />
                    </Storyboard>                    
                </VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>

We can do better than Hash-Bangs

Thu, 28 Apr 2011 22:50:43 GMT

I have read these two articles complaining about the new style of using hashbangs #! as links. http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs, If you don't know what i mean by hash-bangs, visit any profile on twitter, then look at the address bar of your browser, what do you see? Well, here is what the address of my profile looks like on twitter http://twitter.com/#!/shrage. Notice the #!?

My argument is, don't blame website developers for abusing the technology given to them, after all, isn't this is what we ask them to do daily just to make a single webpage work in all browsers? Instead, we should take browser developers up to task and demand support for propar ajax/plugin/clientside navigation capabilities.

So here is my proposal to browser developers, but first a scenario. We have a single page www.site.com/index.html which needs to be able to display a profile page using a url like www.site.com/profile/101. The way browsers work currently, we have two problems at hand.

Problem #1 - When you click on any link from inside the domain, the browser will make a new request to the server which will result in a page refresh. This needs to be changed to allow the developer to cancel navigation requests at his/her choosing (obviously for security reasons the developer should be able to cancal only requests from the current domain)

Problem #2 - If an outside website links to the profile above www.site.com/profile/101, the browser doesn't even know to load index.html at all. The browser will make a request straight for www.site.com/profile/101 which is not what the developer has designed the site for. so we need to give the developer a way to indicate to the browser that every request to profile/101 should be handled by index.html. This can be handled by introducing another 3xx http status code, ex: 309 which will be a special redirect response that tells the browser to handle this request in javascript at the specified location.

So here is example example javascript code at index.html

[Index.html]

   // This even fires when a user clicks on any link within this page, or, if this page is loaded as a result of a 309 response
    window.onNavigate(function(e){
        // e.location == location clicked too, or original location of the redirect
        if(e.location.indexOf('Profile') == 0){
            e.cancel;
            var id = extractIdFrom(e.location);
            LoadProfile(id)
        });
    }

[Server]

On the server, the developer can write a rule to redirect request to www.website.com/Profile/id with Response Code = 309 and Location = Index.html

Once browsers supports this navigation hook, we can build a clientside framework on top of it, that will extract parameters from the new location url and map them to functions on the client just as server side routing and mvc frameworks do.

<script src="routes.js"/>

    
    // Registers a route to the function LoadProfile, extracting the id from the url and providing it as a function argument.
    routes.registerRoute("/Profile/{id}", LoadProfile);
    function LoadProfile(id){
        $.ajax(...);
    }

Strange Silverlight Behavior

Thu, 28 Apr 2011 04:38:50 GMT

Here is a simple animation i wrote in silverlight

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	x:Class="BouncingBall.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<Storyboard x:Name="Bounce" RepeatBehavior="Forever" AutoReverse="True">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Ball">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="0:0:1" Value="-144" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<i:Interaction.Triggers>
		<i:EventTrigger>
			<ei:ControlStoryboardAction Storyboard="{StaticResource Bounce}"/>
		</i:EventTrigger>
	</i:Interaction.Triggers>

	<Canvas x:Name="LayoutRoot" Background="#FFCADFFF">
		<Ellipse x:Name="Ball" Stroke="Black" Width="100" Height="100" Fill="#FFF31D1D" Canvas.Top="190" Canvas.Left="0">
			<Ellipse.RenderTransform>
				<CompositeTransform/>
			</Ellipse.RenderTransform>
		</Ellipse>
	</Canvas>

</UserControl>

Notice that when the ball goes downward the bottom of the ball is flat/chopped, and when the ball goes upwards the top of the ball is flat/chopped off, any idea?

Slow motion recording of what i see on my screen (HP 2159m) Notice the ball gets flat at the bottom when it goes downward

Update: I added enable hardware acceleration and it fixed the problem.

Conversation about this issue on stackoverflow.com: http://stackoverflow.com/questions/5423288/why-does-the-ball-in-this-animation-look-chopped-when-it-changes-position