ItemsPanelTemplate Differences in SL and WPF

I was changing the ItemsPanelTemplate of Listbox and set the Position of Elements generated using TranslateTransform

WPF app works fine, while the Silverlight app crashes. As far as I can tell the code is same

Here is the XAML
<UserControl x:Class=”t14.Page”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    Width=”400″ Height=”300″>
    <UserControl.Resources>
        <DataTemplate x:Key=”dt”>
            <TextBlock Text=”{Binding Name}”>
                <TextBlock.RenderTransform>
                    <TranslateTransform X=”{Binding Position.X}”
                                        Y=”{Binding Position.Y}” />
                </TextBlock.RenderTransform>
            </TextBlock>
        </DataTemplate>
    </UserControl.Resources>
    <Canvas x:Name=”c1″>
        <ListBox x:Name=”list1″ ItemTemplate=”{StaticResource dt}” >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Width=”500″ Background=”Azure”
                            Height=”500″></Canvas>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Canvas>
</UserControl>

and code behind

public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            List<Customer> customers = new List<Customer>();
            customers.Add(new Customer { Name = “Customer..1”, Position = new Point {X=100,Y=100 } });
            customers.Add(new Customer { Name = “Customer..2”, Position = new Point { X = 50, Y = 50 } });
            customers.Add(new Customer { Name = “Customer..3”, Position = new Point { X = 150, Y = 150 } });
            customers.Add(new Customer { Name = “Customer..4″, Position = new Point { X = 200, Y = 200 } });
            list1.ItemsSource = customers;
        }

      
    }

    public class Customer
    {
        public Point Position { get; set; }
        public string Name { get; set; }
    }

I also tried to set ItemContainerStyle like this in SL, but it crashes

  <Style x:Key=”st1″
               TargetType=”ListBoxItem”>
            <Setter Property=”Canvas.Left”
                    Value=”{Binding Position.X}” />
            <Setter Property=”Canvas.Top”
                    Value=”{Binding Position.X}” />
        </Style>

I set same thing in WPF, it works

 <Style x:Key=”st1″ TargetType=”{x:Type ListBoxItem}”>
            <Setter Property=”Canvas.Left”
                    Value=”{Binding Position.X}” />
            <Setter Property=”Canvas.Top”
                    Value=”{Binding Position.X}” />
        </Style>
you can download the sample app here

Advertisements

5 thoughts on “ItemsPanelTemplate Differences in SL and WPF

  1. Maybe it’s because your Canvas is bigger than your usercontrol and it’s having trouble with the out of range RenderTransform.

    In fact why have you used a Canvas here? Isn’t it better to use a ItemContainerStyle and set the Canvas.Left / Top rather than a RenderTransform?

  2. Size is not the issue, I tried increasing the size to 800* 800

    I tried setting ItemContainerStyle as that is better, but it crashes

    Thanks

  3. lee,

    I can’t experiment at the moment, but I’ll guess that the problem is that your attempt to use Bindings with the TranslateTransform. Bindings don’t work on Transforms in Silverlight 2 Beta 2 as I understand things. However, I managed to do something very similar to this in Beta 1 (ListBox with Canvas Panel) by getting a little help from code – have a look at the “Planets” demo if you’re interested: http://blogs.msdn.com/delay/archive/2008/03/12/lb-sv-why-three-wacky-uses-for-silverlight-2-s-listbox-and-scrollviewer.aspx.

    Hope this helps!

  4. Delay,
    Thanks for the sample. I hope there will be a document which lists differences w.r.t WPF. Right now it is difficult to know what works and what wont, in other words mainly Binding differences

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s