ItemsPanelTemplate Differences in SL and WPF

Posted on June 30, 2008. Filed under: Silverlight |

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

Make a Comment

Make A Comment: ( 5 so far )

blockquote and a tags work here.

5 Responses to “ItemsPanelTemplate Differences in SL and WPF”

RSS Feed for Lee’s corner Comments RSS Feed

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?

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

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!

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

[...] I needed to input mailing info… going to have to go back and read all that when I’m more awake :) ItemsPanelTemplate Differences in SL and WPF Lee Compares the way some ItemsPanelTemplate code runs in SL and WPF, and just asks why… Stay in [...]


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...