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.
Related
I am making an App that has the same header on every screen, so I created a ControlTemplate for that part of the app, put some buttons on it and that works. I am pretty happy with it.
Three screens have almost identical footer, only different text color and images. I made another ControlTemplate for the footer, and I would like to manipulate the IsVisible property on the images with bindings, according to what page is currently dislayed, but I am not able to figure out how to do it.
I know that I need to write a converter, I did that, that doesn't seem to be complicated, but I can't figure out a way to actually bind the values in those properties.
Both of ControlTemplates are defined on the application level.
This is an example of how I use them, maybe this is wrong:
<ContentView ControlTemplate="{StaticResource Header}">
<!--This is the actuall page content-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Content of the page!-->
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"/>
<!--Footer of the page!-->
<ContentView ControlTemplate="{StaticResource BuySellPayFooter}"
Grid.Row="1"/>
</Grid>
</ContentView>
I need to bind properties of some class in the footer. How to do it? Is it achievable?
I use ControlTemplate to show an ActivityIndicator on every page.
For property IsVisible of the indicator, I bind it with property IsBusy of the
page.
And this is how I bind it in the XAML of the ControlTemplate:
IsVisible="{TemplateBinding BindingContext.IsBusy}"
If I want to change the color of the indicator on each page, I can define BusyColor property for the page and binding it:
Color="{TemplateBinding BindingContext.BusyColor}"
In Xamarin Forms i want show multiple image (2) in a row: this is an example of what i'd like to do:
In many Q&A i've seen the use of XLabs gridview but the project is no longer maintained.
I think that i can create a custom cell with a stacklayout inside a row but the recycle policy work? And how can i handle the item tapped if i have two column per row?
Thanks
Alessandros answer should work, but if you want to roll something yourself without any third party controls, keep reading:
Recycling will still work if you use a Custom ViewCell. So I would suggest doing that and adding two items in a custom model and render them in one cell at a time.
Now for handling taps: Override the ItemSelected event on your ListView and set the ListView.SelectedItem to null. Then inside your custom ViewCell, add a TapGestureRecognizer to each of the separate models. One thing to note, is that the Command on your TapGestureRecognizer will bind to your individual list item, so you need to set it relative to the BindingContext of the ListView:
<ListView x:Name="MyListView" ...>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item1Command}"/>
</Image.GestureRecognizers>
</Image>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item2Command}"/>
</Image.GestureRecognizers
</Image>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can take a look to this FlowListView.
I have never used it but sounds good.
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Label HorizontalOptions="Fill" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding Title}"/>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
I want to design a UI for tablets (Android & iOS) with Xamarin.Forms where I want to have multiple ContentPages on one screen. I know how to achieve this for Android by using Fragments (afaik for iOS it's UISplitViewController).
How can I achieve this with Xamarin.Forms?
P.s. I definitely don't want a TabbedPage!
As far as I know you can't put multiple ContentPage items on the screen, at least not within the out-of-the-box Xamarin.Forms.
You can, however, put multiple ContentView items on the screen and you can reuse the ContentView items in stand-alone pages as well.
Essentially you can describe what you'd want to see on a single page as a ContentView and then make a page that just includes that
PhotoItem.xaml:
<ContentView>
<Grid>
<Image Source="{Binding MyImageSource}"/>
</Grid>
</ContentView>
PhotoBucket.xaml:
<ContentPage xmlns:local="namespace;assembly">
<ContentPage.Content>
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<ListView>
... on list item tap do Navigation.PushAsync(new PhotoItemPage{BindingContext = itemTapped} );
</ListView>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<Grid> // Add two columns
<ListView Grid.Column="0">
... on list item tap do PhotoItem.BindingContext = itemTapped
</ListView>
<local:PhotoItem Grid.Column="1"/>
</OnIdiom.Tablet>
</OnIdiom>
</ContentPage.Content>
</ContentPage>
PhotoItemPage.xaml:
<ContentPage xmlns:local="namespace;assembly">
<local:PhotoItem>
</ContentPage>
You can't have multiple pages, use content views for it. Or custom renderers
I want to have some interactive item I can click and fire event within header of ExpanderView. This is a normal behavior for item, but I cannot get it working in header.
In my case I have Image with MouseLeftButtonDown
Any ideas ?
Thanks,
Michal
You can change the look and content of the header by changing the HeaderTemplate of the ExpanderView. The HeaderTemplate takes a DataTemplate which can take any controls you which to place.
<toolkit:ExpanderView>
<toolkit:ExpanderView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"/>
<Button Content="Click Me!" Grid.Column="1"
<!-- Use click event to handle within code behind -->
Click="OnHeaderBuittonclick"
<!-- Use command to handle within view model -->
Command="{Binding DoSomethingCommand}"
/>
</Grid>
</DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>
</toolkit:ExpanderView>
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