is there CarouselView has event handler about itemselected like listview - xamarin

<ContentPage.ToolbarItems>
<ToolbarItem Clicked="ToolbarItem_Clicked"
Text="+ Search "
>
</ToolbarItem>
</ContentPage.ToolbarItems>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
<StackLayout Grid.Row="0" >
<CarouselView x:Name="carouselview"
PeekAreaInsets="50"
>
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20"
/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="500"
WidthRequest="500"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding NameProduct}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="xamarinremovebg.png"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</StackLayout>
This my code I want to use itemselected event in CarouselView.I mean item selected in listview.But there is none in CarouselView.All I want is when I click the item1 in CarouselView i want go to a detail page of item1 thank you so much for helping me.

There is no such a default event like in ListView . However we could add a TapGestureRecognizer on DataTemplate as a workaround .
in xaml
1.set the name of the ContentPage
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="xxx.MainPage"
x:Name="page"
>
Add TapGestureRecognizer
<DataTemplate>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ItemSelectedCommand,Source={x:Reference page}}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame>
//...
</Frame>
</StackLayout>
</DataTemplate>
in your ViewModel
public ICommand ItemSelectedCommand{ get; set; }
In the constructor:
ItemSelectedCommand= new Command((item)=>{
// item here is type of the model in the ItemSource of CarouselView
// var model = item as yourmodel
});

Related

How do I bind to MasterPage viewmodel inside a BindableLayout

I am trying to bind my Command property to the Command in my MasterDetailPage view model. I tried defining the name property for the master page and setting that as the reference source, but it does not seem to bind to the viewmodel. For context, the List MenuItems is a property in the same Viewmodel and the Title binds just fine. I believe I am not setting the Source for the command correctly, but not sure how to fix it. Also, I am using Prism, so the viewmodel is mapped in app.xaml already.
<MasterDetailPage
x:Class="MasterDetailPrism.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Name="menuMasterPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="225" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aqua" />
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding NavigateAsync, Source={x:Reference menuMasterPage}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
I was able to figure it out - I had to name the StackLayout, and then bind to the root of that as the source, not the contentpage or masterpage. In the code below, ItemsList.
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}" x:Name="ItemsList">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding BindingContext.NavigateAsync, Source={x:Reference ItemsList}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>

Xamarin Add dividing line into Grid

I have a problem. I want created this ListView using the following code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But now I want to add a line above the first Label tag. To create the line I want I use this code:
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:
The property 'View' is set more than once.
What am I doing wrong and how can I fix this?
I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned
the other things you could try
add another row to the Grid for the BoxView
place the Grid inside of a StackLayout with the BoxView

partial declartion must not specify different base class in Xamarin

I'm building a Xamarin Crossplatform App
For drawer menu I'm following this tutorial : https://www.youtube.com/watch?v=aYjK0cPjZMQ
But the problem is when I change my MainPage from ContentPage to MasterDetailPage it shows me this error:
MainPage.XAML :
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Last_MSPL"
x:Class="Last_MSPL.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Xam Buddy" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<StackLayout Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="#e8e8e8"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="{Binding Title}"
FontSize="Small"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Help me through this so I can move forward, Thanks!
I just Clean my project, rebuild and it works
because the generated .g.cs from the xaml has not been refreshed so it was giving this error

How to create ScrollView in my layout

I want my ScrollView to join my StackLayout and my list so I can scroll it down, an example I saw that worked out was the one below but I was not able to implement it at my command
The way it is now it's from a scrowview in the List
This example worked out
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.TitleIcon="logoD">
<ScrollView>
<StackLayout x:Name="topo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
<Image.Source>
<UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</Grid>
</StackLayout>
<ListView x:Name="list" ItemsSource="{Binding list}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Categoria}" TextColor="#38B6AB" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
You shouldn't put a ListView inside a ScrollView as they both implement scrolling. What you should do is use the Header template of the ListView to put your Grid there. That way it will scroll with the ListView.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.TitleIcon="logoD">
<ListView x:Name="list" ItemsSource="{Binding list}">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
<Image.Source>
<UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</Grid>
</DataTemplate
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Categoria}" TextColor="#38B6AB" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
I was able to implement with this same example command
<ContentPage.Content>
<ListView ItemsSource="{Binding MonkeysGrouped}"
ItemTapped="Handle_ItemTapped"
ItemSelected="Handle_ItemSelected"
HasUnevenRows="true"
GroupShortNameBinding = "{Binding Key}"
IsGroupingEnabled = "true"
GroupDisplayBinding = "{Binding Key}">
<ListView.Header>
<cv:CarouselView x:Name="CarouselZoos" ItemsSource="{Binding Path=BindingContext.Zoos, Source={x:Reference MonkeysPage}}" HeightRequest="200">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
<Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage
BorderColor="Aqua"
BorderThickness="3"
HeightRequest="66"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFill"
WidthRequest="66"
Grid.RowSpan="2"
Source="{Binding Image}"/>
<Label Grid.Column="1"
Text="{Binding Name}"
VerticalOptions="End"/>
<Label Grid.Column="1"
Grid.Row="1"
VerticalOptions="Start"
Text="{Binding Location}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

How to add sub menu items clicking on MenuItems in xamarin.forms MasterDetailPage

Hi I am trying to add submenu items When clicking on the Menuitems in MasterDatailPage.My master page xaml is like
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HomeMaster"
Title="Master"
Icon="hamburger.png">
<StackLayout>
<ListView x:Name="ListViewMenuItems"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemTapped="ListViewMenuItems_ItemTapped"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image
Grid.Column="1"
Grid.Row="2"
Source="User.png" HeightRequest="100" x:Name="userImg"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="10" Padding="20,10, 0, 0" IsVisible="{Binding IsExtraControlsVisible}">
<Label Text="Test Definition" FontSize="Medium" VerticalOptions="Center" TextColor="Black"/>
<Label Text="Maptest" FontSize="Medium" VerticalOptions="Center" TextColor="Black"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
in my .cs file ItemTapped is like
private void ListViewMenuItems_ItemTapped(object sender, ItemTappedEventArgs e)
{
var item = e.Item as MRPHomeMenuItem;
if (item.Id == 0)
{
item.IsExtraControlsVisible = true;
}
}
When i click on submenu items total cell is calling because of I given stack layout viewcell.How to add these submenu items in separate cells when clicking on Menuitems like this
What you need is a expandable ListView, to achieve this, we need to group the items of our list, means implementing the GroupHeaderTemplate of the ListView.
You may check the blogs here:
Xamarin.Forms Expandable ListView.
Expandable ListView in Xamarin Forms using Grouping.

Resources