WPF set a hidden value on a combobox?

Question

I hope I'm going about this the right way, but if I am not, then please advise.

I start off with a loop through a strongly typed collection:

foreach (var item in myItems)
            {
     //magic happens here
}

Inside the foreach loop, I'm adding items to a wrapPanel, based on the collection. As part of this, each item has a checkbox. Also each item in the collection has a unique id.

What I want is when the checkbox is clicked, it adds or removes an item from a List. But even ideally would be nice to have an isSelected property in an existing List.

So I was thinking of attaching an onclick event handler to the checkbox, and somehow attaching the id (hidden from UI) to the checkbox. then inside the onclick - handle things manually.

Is there a better way to do this?

EDIT: My existing code

foreach (var x in y)
            {
                Grid lbItem = new Grid();



                StackPanel sp = new StackPanel();
                sp.Width = 190;

                Border border = new Border();
                border.Padding = new Thickness(10); 
                border.BorderBrush = new SolidColorBrush(Colors.Gainsboro);
                border.BorderThickness = new Thickness(2);
                border.CornerRadius = new CornerRadius(15);

                CheckBox cb = new CheckBox();
                cb.Content = x.id; 
                cb.Padding = new Thickness(0,0,5,5); 
                StackPanel sptitle = new StackPanel();
                sptitle.Orientation  = Orientation.Horizontal;
                sptitle.Children.Add(cb); 

                TextBlock tbTitle = new TextBlock();
                tbTitle.Text = x.title;
                tbTitle.TextAlignment = TextAlignment.Justify;
                sptitle.Children.Add(tbTitle); 

                TextBlock tbShortDesc = new TextBlock();
                tbShortDesc.FontSize = 8; 
                tbShortDesc.Text = x.shortDesc; 
                Image imgDeal = new Image();
                imgDeal.Height = 180;
                imgDeal.Width = 180; 
                imgDeal.Source = new BitmapImage(new Uri(@"http://myurl/images/" + x.thumburl));

                sp.Children.Add(sptitle); 
                sp.Children.Add(imgDeal); 
                sp.Children.Add(tbShortDesc);

                border.Child = sp; 
                lbItem.Children.Add(border);

                DealsWrapPanel.Children.Add(lbItem);

                Rectangle rect = new Rectangle();
                rect.Width = 5;
                DealsWrapPanel.Children.Add(rect); 
            }

Do not create or manipulate UI elements in procedural code. Use an `ItemsControl`. Post the full code + XAML or a screenshot of what you need and I can tell you the proper way to do it in XAML. — Federico Berasategui, Aug 09 '13 at 01:02
dude, delete all that immediately, please, and use an ItemsControl. — Federico Berasategui, Aug 09 '13 at 01:12
Also worth noting that Checkbox.content is visible on UI. Kinda looking for the HTML eqiv of value, not text... — JL., Aug 09 '13 at 01:12

score 1 · Accepted Answer · edited May 23 '17 at 12:28

Ok. Delete all your code and start all over.

This is the right way to do that in WPF:

<ItemsControl ItemsSource="{Binding YourCollection}">
  <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
        <WrapPanel/> <!-- This is your "DealsWrapPanel -->
     </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

  <ItemsControl.ItemTemplate>
     <DataTemplate>
        <Grid Margin="0,0,5,0"> <!-- this is your LBItem, I added the margin because I realized you're using the Rectangle to separate items -->
             <Border Padding="10" BorderThickness="2"
                     BorderBrush="Gainsboro" CornerRadius="15">

                <StackPanel Width="190">
                    <StackPanel Orientation="Horizontal"> <!-- this is your sptitle -->
                        <CheckBox Padding="0,0,5,5" Content="{Binding id}" IsChecked="{Binding SomeBoolValue}" /> <!-- you need a boolean value to bind to -->
                        <TextBlock Text="{Binding title}" TextAlignment="Justify"/>

                        <Image Width="180" Height="180" Source="{Binding thumburl}"/> <!-- you need to append the full url string correctly before passing that to the UI -->

                        <TextBlock Text="{Binding shortdesc}" FontSize="8"/>
                    </StackPanel>
                </StackPanel>
             </Border>
         </Grid>
     </DataTemplate>
  </ItemsControl.ItemTemplate>
<ItemsControl>

(Typed the XAML here so it may have issues / typos)

Most of the times there's no need to manipulate UI Elements in procedural code in WPF. Create a proper ViewModel and have the UI create itself using DataBinding.

Also keep in mind that UI is Not Data, so whenever you need to "read" the properties from these elements, you actually need to "read" the properties from your Data Items inside the collection, and those will be Two-Way Bound to the UI.

You just made my day, sincerely thank you very much for taking the time out to show me this. Really like the binding on isChecked. You're the man! — JL., Aug 09 '13 at 01:57

WPF set a hidden value on a combobox?

1 Answers1