DCSIMG
WPF Panel & Data Binding - Essential WPF

WPF Panel & Data Binding

WPF Data Binding on behalf of ItemsControl provides an elegant solution for collection of data types. All you have to do is simple as:

<ListBox ItemsSource="{Binding Path=Items}" ... />

But what if you want to bind the same collection to a Panel, let say UniformGrid, WrapPanel or other custom panel?

Trying to bind the Panel.Children collection using the same technique above, results in a big ERROR!

And the reason is: Panel.Children is not designed to be bind, hence Children is a read-only, non-dependency property.

So what can you do?

Instead of trying to bind the panel, stick to the ItemsControl solution, and change its ItemsPanel to whatever you like to:

<ListBox ItemsSource="{Binding Path=Items}">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <UniformGrid />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

Now, if you want to visualize these items, use a cool Data Template and a Cool custom Panel:

<ListBox.ItemTemplate>
  <DataTemplate>
    <StackPanel>
      <Image Source="{Binding Image}" ... />
      <TextBlock Text="{Binding Name}" ... />
    </StackPanel>
  </DataTemplate>
</ListBox.ItemTemplate>
image 

You can download the code from here.

Published Tuesday, March 18, 2008 3:27 PM by Tomer Shamam

Comments

# re: WPF Panel & Data Binding

Tuesday, May 06, 2008 5:36 AM by Jeff G

Just wanted to mention that you can bind a Panel using the "ContentControl" class.

Here's an example:

                   <ListBox.ItemTemplate>

                       <DataTemplate>

                           <StackPanel HorizontalAlignment="Stretch">

                               <Border BorderThickness="3" Margin="5" BorderBrush="Yellow"  Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" HorizontalAlignment="Stretch">

                                   <ContentControl Content="{Binding}" HorizontalAlignment="Stretch" />

                               </Border>                                

                               <Rectangle Fill="Blue" HorizontalAlignment="Stretch" Height="15"/>

                           </StackPanel>

                       </DataTemplate>

                   </ListBox.ItemTemplate>

# re: WPF Panel & Data Binding

Tuesday, May 06, 2008 7:54 AM by Tomer Shamam

Hi Jeff,

Thanks for your code-snippet, but how does it related to "populating a panel using data binding"?

# re: WPF Panel & Data Binding

Wednesday, May 07, 2008 2:38 AM by Jeff G

Hey Tomer,

 Looks like I misunderstood what you were getting at. I had a somewhat similar issue.  I was trying to bind an ObservableCollection of InkCanvas to a ListBox. I couldn't figure out how, and I tried using the "children" of the InkCanvas to another InkCanvas defined in the DataTemplate, and got the same big error. I couldn't figure out how to bind the collection of panels to a listbox, and ContentControl was the solution.

 BTW, thanks for posting the code for the WPF aquarium. It has REALLY helped me understand how to organize a WPF project.

Jeff

# re: WPF Panel & Data Binding

Wednesday, May 07, 2008 8:25 AM by Tomer Shamam

You welcome! I'm really glad that it helped.

Btw - instead of bind a list of InkCanvas to a list box using ContentControl, you can create a list of data entities, which represent the data of each InkCanvas. Then you should bind this list to the ListBox and choose an ItemTemplate to draw each data entity as an InkCanvas using a Data Template.

The following code snippet may help:

<!-- InkCanvasList is a ObservableCollection<InkData> -->

<!-- InkData represents each Ink and it data -->

<Grid xmlns:local="clr-namespace:InkCanvasList">

<Grid.DataContext>

<local:InkDataCollection />

</Grid.DataContext>

<ListBox Width="130" Height="200" ItemsSource="{Binding}">

<ListBox.ItemTemplate>

<DataTemplate DataType="{x:Type local:InkData}">

<InkCanvas Width="100" Height="50" />

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

Cheers :-)

# re: WPF Panel & Data Binding

Saturday, May 10, 2008 5:27 AM by Jeff G

Thanks for the suggestion just storing the InkData. That would make sense for most ink related apps. In my case, I wasn't using the InkCanvas for ink, but for it's selection capabilities, ie using InkCanvasEditingMode.Select

# re: WPF Panel & Data Binding

Saturday, May 10, 2008 5:27 AM by Jeff G

Thanks for the suggestion just storing the InkData. That would make sense for most ink related apps. In my case, I wasn't using the InkCanvas for ink, but for it's selection capabilities, ie using InkCanvasEditingMode.Select

# re: WPF Panel & Data Binding

Wednesday, January 28, 2009 3:53 PM by Alex

Thanks for the article!

I am new to WPF and I was looking for something like this.

# re: WPF Panel & Data Binding

Tuesday, June 16, 2009 10:10 PM by Sami

Great article. Exactly what I was looking for.

I have a ObservableCollection and wanted to bind that to a UniformGrid. Since Panels do not have a concept of binding I did not know how else to do it.

Brilliant!!

Many thanks

# re: WPF Panel & Data Binding

Tuesday, June 16, 2009 10:22 PM by Tomer Shamam

Thanks Sami, I'm glad that it helped you.

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above:
Powered by Community Server (Commercial Edition), by Telligent Systems