Binding multiple sources to a Listbox - windows-phone-7

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.

Related

Binding to a Collection of Checkboxes

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>.

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>

display a long text inside a textblock on two lines

I have a listbox which contains a textblock and an image. I want if the text is too long it goes to a second line. At the moment only have of the text is visible. Here is my XAML
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Could anybody help me?
Screenshot
Ah ya, so I guess it is as simple as it looked. You just need to restrict the width of where your text is and invoke TextWrapping, which you have multiple options to accomplish that. Here's a couple possibilities...
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, ElementName=Self}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Or you could have a panel do it which should get restricted by its parent...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" />
<TextBlock Grid.Column="1" Text="{Binding title}" TextWrapping="Wrap" Margin="50,0,2,0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Or depending on how this ListBox is layed out as a child, it could possibly even be as easy as just adding TextWrapping="Wrap" to the TextBlock and then setting the MaxWidth on the ListBox itself. Either way, hope this helps... :)

Changing UI according to text size in wp7

<ListBox Margin="0,2,0,0" SelectionChanged="OnSelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="lstUcpPanel" ItemContainerStyle="{StaticResource myContainerStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" Margin="-7,-8,-7,0" ItemWidth="246" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Margin="3.5,1,0,0" BorderBrush="Transparent">
<StackPanel Orientation="Vertical" Background="LightGray">
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" ></Image>
<TextBlock Text="{Binding name}" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using the above code for showing a data as in following format:
but when the [name] is long like "Settings flkjadsflka fdsaflksdj flhasdjhfl asd", then the design becomes like this:
What i want to know is that is there anyway i can show the items in a uniform format without any distortion with uniform height of the item.
Set the stretch property on your image to Stretch="Fill"
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" Stretch="Fill" ></Image>
How about giving the items in the WrapPanel a fixed Height?
<toolkit:WrapPanel ItemHeight="80" ... />

Container inside Datatemplate inside Listbox is null when list is too long

I have a listbox contains a datatemplate with Image and TextBlock control inside. I want to get the ImageControl out by first getting the Grid Container
<ListBox x:Name="NewsList" Margin="0,0,20,0" SelectionChanged="NewsList_SelectionChanged" />
<DataTemplate>
<Grid Width="400" Height="89">
<Image HorizontalAlignment="Left" Width="64" x:Name="ImageThumbnail" Height="64" VerticalAlignment="Top" Margin="0,10,0,0" Source="http://vnexpress.net/Files/Subject/3B/A2/3B/15/top.jpg"/>
<TextBlock Text="{Binding Title}" Margin="78,0,8,0" TextWrapping="Wrap" FontSize="26.667" Height="74" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ListBox>
for (int i = 0; i < feeds.Count; i++)
var containerItem = list.ItemContainerGenerator.ContainerFromIndex(i);
And when I set the NewsList.Items = Feeds with feeds.Count is more than 23, some of the containerItem is null. If it is less than 23, I never get a null container.
Does anyone know what is the cause and how I can fix it. If we can have another way to get the imageControl out
One thing I can see is that your xaml doesn't look right to me.
Shouldn't it look like this:
<ListBox x:Name="NewsList" Margin="0,0,20,0" SelectionChanged="NewsList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="400" Height="89">
<Image HorizontalAlignment="Left" Width="64" x:Name="ImageThumbnail" Height="64" VerticalAlignment="Top" Margin="0,10,0,0" Source="http://vnexpress.net/Files/Subject/3B/A2/3B/15/top.jpg"/>
<TextBlock Text="{Binding Title}" Margin="78,0,8,0" TextWrapping="Wrap" FontSize="26.667" Height="74" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Beyond that I'm not sure if that will totally help you or not.
My answer is to write a new ImageConverter that we can put into the tag in the xaml file, I don't have to deal with VisualTree anymore, so it works

Resources