How do i set ItemSource in the following situation?

01-05-2009 12:06 AM |

 Hi,

im trying to set the ItemSource for ItemsControl, I think this is only possible to do in code as I need to bind them to a collection. Just about all the examples i can find show you how to do this while using a listbox or gridview. in which case its easy as these objects are already  exist on the page when you write the code in c#.

(I realise the code may look a little strange, I'm not 100% I am doing this the correct way. ( ie there is probably a better way to have it just so I can set 1 itemSource not 2) But i do need these 4 Text controls grouped, as they all display data from the same record- visualy grouped in an rectangle. So each record in the ObservableCollection will display this same rectangle custom control.

But, because im using  a custom control (generated from Generic.xaml) then the control isnt on the page until after the code runs, so the 2 statements i have below wont compile. Im not even sure it can be written like this in code, as a datagrid/list box is one item to bind to but the way i have my code there could be hundreds or separte conrols on the screen, representing 1 record each.

 C# code on page.xaml

 ObservableCollection<bs_bubble> items = new ObservableCollection<bs_bubble>();
 foreach (bs_bubble r in bs_bubble)
  {
         items.Add(r);
               
    create_bubble(r.bubble_id, r.bubbleName, r.bubbleDesc, (double)r.sizeY, (double)r.opacity);
    }

 this.itemsControlBubleName.ItemsSource = items;

this.itemsControlEdit.ItemSource =items;

//applicationRoot.DataContext = r;

 Section of xmal from Generic.xmal

      <StackPanel    Width="120" Visibility="Visible" x:Name="sp_all_detail"  >
       <ItemsControl x:Name="itemsControlBubleName">
        <ItemsControl.ItemTemplate>
                         <DataTemplate>
                                <StackPanel>                
                <TextBox
                            Background="{x:Null}"
                            BorderBrush="{x:Null}"
                            Grid.Row="0"  
                            Text="{Binding Path=bubbleName}"
                            TextWrapping="Wrap"
                            Margin="2,2,2,2"         
                            VerticalAlignment="Center"
                            TextAlignment="Center" x:Name="tx_BubbleName"/>        
                                    </StackPanel>
                        </DataTemplate>
               </ItemsControl.ItemTemplate>
           </ItemsControl>                        
                            
                            
                <StackPanel Margin="3"  x:Name="sp_main_detail" Visibility="Collapsed" >
<!-- Header -->
                    <StackPanel Orientation ="Horizontal" >
                        
                        <my:ToggleButton   x:Name="ExpandCollapseButton" Margin="2" RenderTransformOrigin="0.5,0.5">
                                <my:ToggleButton.Template>
                                        <ControlTemplate>
                                            <Grid>                                                    
                                                <Ellipse Stroke="#FFA9A9A9"  Fill="AliceBlue"   Width="19" Height="19"  Margin="2,1,1,1" />
                                                <Path Data="M1,1.5L4.5,5 8,1.5" Stroke="#FF666666" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center">                                                    
                                                </Path>
                                            </Grid>
                                        </ControlTemplate>
                                    </my:ToggleButton.Template>
                                    <my:ToggleButton.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </my:ToggleButton.RenderTransform>
                            </my:ToggleButton>
                    <TextBlock  x:Name="Header" Text="edit details..."  Margin="2,2,2,2" FontSize="9" Height="15"  />            
                    </StackPanel>
<!-- Contents -->
       <ItemsControl x:Name="itemsControlEdit">
              <ItemsControl.ItemTemplate>
                         <DataTemplate>
                                <StackPanel>
 <TextBox Background="{x:Null}" Grid.Row="2" x:Name="tx_bubbleDesc" Text="{Binding Path=bubbleDesc}"  FontSize="10" Height="19"  />
<TextBox Background="{x:Null}" Grid.Row="2" x:Name="tx_bubbleSection" Text="{Binding Path=section_id}"  FontSize="10"  Height="19" />
 <TextBox Background="{x:Null}" Grid.Row="2" x:Name="tx_bubblePlan" Text="{Binding Path=bubbleName}"   FontSize="10"  Height="19" />
                                </StackPanel>
                        </DataTemplate>
               </ItemsControl.ItemTemplate>
           </ItemsControl>
   <!-- Contents end -->

Re: How do i set ItemSource in the following situation?

01-05-2009 10:20 AM |

You may try this option:

In xaml for both of your UserControls, set the propety of ItemsSource like so:

ItemsSource="{Binding}"

 Now in your code behind, set the Datacontext property of your UserControl to the collection:

this.DataContext = items;

 Your ItemsControls should then automatically use the UserControl datacontext for their databinding (using DataContext of nearest parent element).

Re: How do i set ItemSource in the following situation?

01-05-2009 11:11 AM |

 thanks for the reply john,

I havent managed to test it yet as my database seems to be returning 3000+ records, even though the table is showing as empty).. worked ok last night- so just have to sort that before i can test your code. 

But anyway,  do i need to set the DataContxt too- as i havent done so yetyet?

if so? does it matter where?

ie in the page.xaml:

      <UserControl.Resources>
        <bubbleData:bs_bubble x:Key="bs_bubbleDS" d:IsDataSource="True"/>
    </UserControl.Resources>

 or in Generic.xaml, not sure eof the syntax for that.

Re: How do i set ItemSource in the following situation?

01-05-2009 9:14 PM |

unfortunately that didn't work john,  I get strange results for example:

I have 4 records in the database, this should result in 4 Custom Controls being displayed: one representing data for each record.

I get 4 Custom controls but each control has the data (ie bubbleName) for each record, so for each custom control displayed its showing bubbleName 4 times.

I am assuming its binding the whole collection to each separate control.

 If anyone can suggest anything (even if they are unsure) i would be most grateful, this is my last major issue with this application, the rest should be plain sailing if i can solve this.

many thanks in advance.