I have been trying to find both built-in datagrid control and third party datagrid control for windows phone 7 but with no luck. Can anyone please guide me?
You know you can do this with a simple listbox or (if you want images in your grid) the deferred load Listbox. Here's some simple XAML to show you how:
<ListBox x:Name="myListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<HyperLinkButton Content="{Binding Path=Description}" NavigateUri="{Binding Path=UriForEditingResource}"
<TextBlock Text="{Binding Path=LongDescription}" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the above example I assume that you setting the myListBox control's ItemSource to a collection of objects whose class contains 3 properties (Description, LongDescription, and UriForEditingResource). There are 2 columns in my example and these columns will be of equal size and they should take over all the available space.
Use Blend to edit these (it will be much easier for you). BTW, I inlined my datatemplate. Blend will typically create a resource for the data template (which means you can re-use datatemplates.
I hope that helps you out some (BTW, the ListBox is not the only control you can do this type of thing with, so study the available controls).
Jay
Related
Which control in Xamarin can be utilized to do listing through a list of objects with the arrows left and right such as the one on the screenshot?
There is no such a control in Xmarin.forms .But you can implement it by yourself.
in xaml
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="0.7*" />
<ColumnDefinition Width="0.15*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Image Source="xxx" x:Name="rightBtn"/>
</StackLayout>
<controls:CarouselViewControl Grid.Column="1" Orientation="Horizontal" InterPageSpacing="10" Position="{Binding myPosition}" ItemsSource="{Binding myItemsSource}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<local:MyView />
<!-- where MyView is a ContentView -->
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
<StackLayout Grid.Column="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Image Source="xxx" x:Name="leftBtn"/>
</StackLayout>
</Grid>
You can use CarouselView . And change the position of it when you click right or left button .You can add a tap gesture recognizer on image or use ImageButton if you want to set button image by yourself. Or you can use default arrows of CarouselView .
If the arrows are a requirement and you don't have many items in your control (10 or less), the CarouselView is matching exactly your requirements. You can even show the arrows with the ShowArrows property.
https://github.com/alexrainman/CarouselView
Careful though cause this component doesn't recycle its views, that's why it's good only for a small number of views.
If you have a high number of views, you use this HorizontalListView with Carousel list layout:
https://github.com/roubachof/Sharpnado.Presentation.Forms#carousel-layout
What about the Xamarin.Forms CollectionView?
CollectionView has a flexible layout model, which allows data to be presented vertically or horizontally, in a list or a grid.
CollectionView supports single and multiple selection.
CollectionView has no concept of cells. Instead, a data template is used to define the appearance of each item of data in the list.
CollectionView automatically utilizes the virtualization provided by the underlying native controls.
CollectionView reduces the API surface of ListView. Many properties and events from ListView are not present in CollectionView.
CollectionView does not include built-in separators.
See documentation.
I'm currently trying to use Telerik's RadSlideView to display my images. I've followed the code in http://www.telerik.com/help/windows-phone/radslideview-gettingstarted.html and they work perfectly well, but on the other hand I'd like to bind to real objects (with a variety of properties) and not just string arrays.
My main reason for wanting to do this is to allow the RadSlideView to show more than just images. I'd like to have descriptions, and other stuff! (which all belong to a specific object) I know this question might be kinda obscure, but if you could give me any ideas, it'd help me a long way :) cheers.
In the page you linked there's a sample with "complex" databinding, look at the ItemTemplate property where there's the image with a description :
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
<Image Source="{Binding ImagePath}" Stretch="None" Grid.Row="1" Margin="0,12,0,0"/>
</Grid>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>
Is it not what you want ?
i need to make a custom listview in windows7 phone. In this listview, i need to show one image with one textbox. This listview will be dynamic. i will insert value in database and this listview will be generate till the last value of my database.
I am new in windows7 phone, any suggestion will be appricated.
You need to set the ItemTemplate:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=ImageSource}"/>
<TextBlock Text="{Binding Path=Text"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox>
The above code assumes you have bound a list, or set the ItemsSource, to a list of objects that expose Text and ImageSource properties.
I using the toolkit which provide the MultiSelectionList control in wp7, I am trying to bind the names to the multiselectItem using the property ItemsSource in C#.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Please select the satellites from the list:-" />
<toolkit:MultiselectList Name="multiSelectionList">
<toolkit:MultiselectItem Content="{Binding Name}" />
</toolkit:MultiselectList>
</StackPanel>
</Grid>
But I got this error.
Items collection must be empty before using ItemsSource.
I tested the service in other parts of the app and it is working with no issues.
Please advise me.Thanks,
You're adding an item to the MultiSelectList when you do:
<toolkit:MultiselectItem Content="{Binding Name}" />
By the time you assign the ItemsSource, which I assume you're doing in the code-behind somewhere, there is already an item in the list (the one above). This is why the error is getting thrown. You could manually clear the list before setting the source, but that's not necessarily considered good practice. What you could do instead is create a DataTemplate, not an actual instance of a MultiSelectItem. I'm not familiar with this control, but try:
<toolkit:MultiselectList Name="multiSelectionList">
<toolkit:MultiSelectList.ItemTemplate>
<DataTemplate>
<toolkit:MultiselectItem Content="{Binding Name}" />
</DataTemplate>
</toolkit:MultiSelectList.ItemTemplate>
</toolkit:MultiselectList>
I have a listbox where I create a Itemtemplate with a DataTemplate. I want to be able to write events for the checkboxes and buttons in the datatemplate but they do not seem to be firing.
Here is my xaml and basically I just tried to display a messagebox.show("worked") in the event function.
<ListBox x:Name="ListBox_Items" Margin="0,91,0,8" Foreground="#FF4BE5DB">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="700">
<CheckBox IsChecked="{Binding needPurchase}" Click="NeedPurchase_Click" Name="CheckBox_NeedPurchase"/>
<CheckBox IsChecked="False" Name="InCart"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding name}"/>
<TextBlock Text="{Binding storeLocation}"/>
</StackPanel>
<Button HorizontalAlignment="Right" Content="DELETE" Click="Button_Click" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Because the items are defined within a DataTemplate they are not hooked up to the code-behind for the parent class. If you want to handle events for templated items, then you should consider using commands instead. If you don't know what commands are (and therefore unlikely to know what MVVM is), then you should check out an explanation like this by Jeremy Likness.
I agree that using commands is the best approach.
However if you still want to assess controls placed inside the ItemTemplate/DataTemplate (and subscribe to some events), then you can do this by using the VisualTreeHelper.
For starters you need to remove the name from all the controls in the template. If you have 10 items in the list you will have 10 sets of controls with the same name which won't work.