Binding to a Collection of Checkboxes - windows-phone-7

I'm trying to do some XAML binding for the Windows Phone (targeting WP7.1) and I have a collection of checkboxes that I want to display. I want to put them inside the WrapPanel
What control(s) would I use to bind to a collection of checkboxes? I don't see an ItemSource for the WrapPanel. So I'm not sure what I would use.
<ListBox Height="auto" Name="lbAssignments" BorderThickness="1" BorderBrush="Black" ItemsSource="{Binding DataList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="TextBlock" Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0,0,10" FontSize="26.667" TextWrapping="Wrap"/>
<TextBlock x:Name="TextBlock1" Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0,0,10" FontSize="26.667" TextWrapping="Wrap"/>
<toolkit:WrapPanel Height="400" Width="400">
<!--collection of checkboxes-->
</toolkit:WrapPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Binding to a collection of UI controls is not exactly the thing you'd want to do. Instead, I would recommend binding to a collection. For many reasons - performance, memory allocation and general maintenance/flexibility.
Since you mentioned that you have a List<string>, you can just bind it to a ListBox:
<ListBox ItemsSource="{Binding YourList}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding}"></CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
However, you can still proceed with biding an element to a collection of other elements, given that appropriate support exists. You could use an ItemsControl:
<ItemsControl ItemsSource="{Binding ElementName=myPage, Path=SomeCollection}">
</ItemsControl>
Here, SomeCollection might as well be ObservableCollection<CheckBox>.

Related

How to Bind data in context menu WP7

I have a list in which there are schedule name, date and time that are visible, but i want that on the long press of a particular item in a listbox there opens a context menu in which only description and schedule name of particular item is visible.
So my code in xaml is: first in the grid there is a listbox in which i have bound the whole list that is scheduleList ansd in the listbox.itemtemplate and inside the data templatei have binded the particular item to the textblock
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Hold="scheduleListbox_Hold" Tap="scheduleListbox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<TextBlock x:Name="textBlock1" Text="{Binding ScheduleName}" Foreground="WhiteSmoke" FontSize="32"/>
<TextBlock x:Name="textBlock2" Text="{Binding ScheduleDate}" Foreground="Red" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" Height="70" Width="460" Hold="StackPanel_Hold">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="menuItem" VerticalOffset="100.0" IsZoomEnabled="True" >
<toolkit:MenuItem Header="Add to calender" ItemsSource="{Binding ScheduleName }"/>
<!--<toolkit:MenuItem Header="Description" ItemsSource="{Binding Description}"/>-->
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell me that how to bind description and schedule name in context menu, either by code or by xaml.
How to bind data in context menu either through code or through xaml?
I create a breadcrumb context menu with binding using the code below. The code you should be interested in is the toolkit:ContextMenu.ItemTemplate section where you specify the bindings. Notice that you can also bind to a command parameter like I do with the index value.
The toolkit:ContextMenu.Template section is not needed. I added this to allow scrolling the items if there are more than will fit on the screen and also to move the menu to the bottom of the screen.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="breadCrumbContextMenu" ItemsSource="{Binding CloudViewModel.BreadCrumbMenuItems}" Opened="ContextMenu_Opened" Closed="Breadcrumb_ContextMenu_Closed">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border Margin="0,700,0,0" BorderThickness="1" >
<ScrollViewer MaxHeight="700">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Click="breadcrumbMenuItem_Click" CommandParameter="{Binding Index}" Padding="0">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal" Height="40">
<Image Source="{Binding Image}" Width="40" Height="40" />
<TextBlock Text="{Binding Text}" Margin="24,0,0,0" />
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Windows Phone 7 - dynamic items for a ListBox

I want to create the content of the each item inside a ListBox dynamically - think of it as a list of items. Or think of a phone book application with contacts and each contact has one or more phone numbers that are displayed beneath the name; the name is one field, the phone numbers is a second field. But the content of the phone number field would obviously depend on the number of phone number the contact has.
Like:
Andrew Adams <-- TextBlock for name
650-123-2222 <-- "Item" for numbers
490-222-3333
Benny Benjamin
650-123-3333
I have tried to solve this by creating a second ListBox for the numbers item inside the main ListBox item. But I don't know how I can populate this second ListBox with a model from C#.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</Grid>
Question would be: How can I set NumbersList ItemsSource from C#? Or can I solve my problem with some other better approach?
You need to set the ItemTemplate for your second ListBox. It should look like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
On a side note, don't give your UI elements name (Name or x:Name) unless you need to use them in code behind or from xaml. This is especially true for items within an ItemTemplate.
The inner can't directly contain a
If NumbersList is an IList or similar, then you can't bind to "Number" - simply use {Binding} instead

Windows Phone How to Vertical Scroll

I'm just starting out in WinPhone development and can't figure out how to set the vertical scroll. For example i've started a new Pivot App, and this code allows the user to scroll up and d own to see all the entries:
<controls:PivotItem Header="Login">
<!--Double line list with text wrapping-->
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
Now when, I add my own pivot item, with a stackpanel with more items than can be seen on the screen at any one time, it will not allow me to scroll to see them all. What am I missing here?
Thanks.
Add ScrollViewer over the StackPanel and it will make it scrollable.
The ListBox in the example code that you supplied ha built-in scrolling functionality. However, if you are not using something that already has this scrolling functionality in it, you will have to add a ScrollViewer.
<controls:PivotItem Header="Example">
<ScrollViewer Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Example1" FontSize="150" />
<TextBlock Text="Example2" FontSize="150" />
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
In a pivot control, if the content is overflowing the vertical page then there should be default "vertical" scrolling available to you.
I had a similar control with list box bounded to property. Having "list" should automatically allow you to scroll.
Don't add a scrollviewer over the stack panel as it would make the scrolling enabled for each list item which you don't want.
<controls:PivotItem Header="all authors" Foreground="#FF0C388A">
<Grid>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding AllAuthorsList}" Foreground="#FF0C388A">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="Auto">
<TextBlock Tap="TextBlockAuthor_Tap" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="#FF0C388A"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PivotItem>

Binding multiple sources to a Listbox

I am using a List to bind a Listbox in my application. But I need to add an extrafield which is not present in the bound object. I am not getting idea how to do it. Any idea please??
My code:
ObservableCollection<LatestItemsInfo> lstLatestItem;
lstBoxLatestItems.ItemsSource = lstLatestItem;
CurrencyInfo info = new CurrencyInfo();
info.CurrencySymbol = "$";
I need to add this currencysymbol to my listbox:
My listbox is like this:
<ListBox Name="lstBoxLatestItems">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel Height="160" Width="160" Margin="0">
<Image Height="150" Width="150" ImageFailed="Image_ImageFailed" Stretch="Uniform" Source="{Binding ImagePath}"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="160" Margin="10" Width="300">
<StackPanel Orientation="Horizontal" Height="40" VerticalAlignment="Center">
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" DataContext="{Binding info}">
<TextBlock TextDecorations="Underline" Text="{Binding CurrencySymbol}" TextWrapping="Wrap" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40" VerticalAlignment="Center">
<TextBlock TextDecorations="Underline" Text="{Binding ListPrice}" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40" VerticalAlignment="Center">
<TextBlock Text="{Binding Price}" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What logic determines what currency symbol is to be displayed? Is there complex logic for that? Without knowing anything about this logic, I can try and suggest a solution though.
There's two main ways you would generally go about this.
Wrap each object in the collection you're binding to in another object that adds the property. The wrapper object could inherit from the "base" object, and simply add the property.
Use a value converter. Pass the whole object (or just a property, depending on what's required by the logic that determines the currency symbol to display). Return the correct currency symbol from the value converter.
Hope this helps...
Chris Anderson
Either go with a converter, as suggested by Chris Anderson, or do something like the following
<TextBlock>
<Run Text="{Binding CurrencySymbol}" />
<Run Text="{Binding Price}" />
</TextBlock>
Note that this assumes the CurrencySymbol is a property of your LatestItemsInfo object. If not, adjust the binding accordingly.

ListBox OnSelectionChanged event stops working with "many" items

I noticed a very strange behavior:
in my windows phone 7 I have a ListBox that can contain anything from 1-2 to 2-300 items.
I noticed that when the number of items is big (not sure about the number but for sure >150 items) the OnSelectionChanged event is not raised.
This is the XAML of my listbox
<ListBox ItemsSource="{Binding Path=Posts}" ItemTemplate="{StaticResource IconsWithText}"
ScrollViewer.VerticalScrollBarVisibility ="Disabled"
SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And the template for the ItemTemplate is:
<DataTemplate x:Name="IconsWithText">
<Grid x:Name="ThumLink" Width="160" Height="140" Margin="10" Background="#FF666666">
<Image Source="Resources/Images/All.png" Visibility="{Binding Path=VisibilityAll}" />
<Image delay:LowProfileImageLoader.UriSource="{Binding Picture}"
Visibility="{Binding Path=VisibilityPic}"
Stretch="UniformToFill" VerticalAlignment="Top" HorizontalAlignment="Left" />
<Border x:Name="border" VerticalAlignment="Bottom" Background="#d9ffffff" Height="62" BorderBrush="Black" Visibility="{Binding Path=VisibilityPic}" >
<TextBlock x:Name="textBlock" Text="{Binding Title}" VerticalAlignment="Top" TextWrapping="Wrap" MaxHeight="60" Style="{StaticResource PhoneTextSmallStyle}"
Foreground="Black" FontSize="20" Margin="4,1,4,0" Height="62"/>
</Border>
</Grid>
</DataTemplate>
Is this a bug or did I do something wrong? I was in debug and the event handler never gets called, but it works when the items are not many.
Simone
The problem with using the plain StackPanel is that all visual object will be created and added to the StackPanel which will be very expensive in terms of memory and may trip over other limits in the rendering system.
Try changing to:-
<VirtualisingStackPanel Orientation="Horizontal" />
So far though I've not been able to reproduce your problem with 300 items even using a plain StackPanel.

Resources