I want to implement a Carousel view swipe gesture recognizer left or right Swipes.
But ONLY tapped event can be recognized ,gesture events cannot be captured(not firing).
What i need is when user swipe left or right according to the swipe event i want to manage dot button opacity accordingly.
I saw some nuget packages already there to achieve this.I prefer not to use nuget packages.
I have tried the tapped event,tapped event is firing but not the gesture event
<CarouselView x:Name="CV" ItemsSource="{Binding People}" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Margin="10" >
<CarouselView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="Mandatory"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
<Grid>
<Grid.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_OnSwiped" />
<SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_OnSwiped"/>
<SwipeGestureRecognizer Direction="Up" Swiped="SwipeGestureRecognizer_OnSwiped" />
<SwipeGestureRecognizer Direction="Down" Swiped="SwipeGestureRecognizer_OnSwiped"/>
</Grid.GestureRecognizers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="person" VerticalOptions="Start"/>
<StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand">
<Label Text="{Binding}" FontSize="24" HorizontalOptions="EndAndExpand"/>
<Label Text="Company Address" HorizontalOptions="EndAndExpand"/>
<Label Text="City, State" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Yes,CarouselView have GestureRecognizers ,for example,
<CarouselView>
<CarouselView.GestureRecognizers>
<SwipeGestureRecognizer Swiped="OnSwiped" />
</CarouselView.GestureRecognizers>
</CarouselView>
method OnSwiped
private void OnSwiped(object sender, SwipedEventArgs e)
{
if (e.Direction == (e.Direction & SwipeDirection.Left))
{
}
}
Related
For example if we have a button on the mobile screen when we click on that button it will display dropdown menu,in that dropdown,clickable buttons will be displayed.
<Grid Grid.Row="1">
<Button Grid.Column="0" ClassId="Dropdowns" Text="Aktionen" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand" xct:SideMenuView.MenuAppearanceType="SlideInOut"/>
<RelativeLayout IsVisible="True" Grid.Column="0" ClassId="Dropdowns">
<Button Text="Reset" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Exit" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Logout" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
</RelativeLayout>
<Button Grid.Column="1" Text="{Binding UserNameText}" Style="{DynamicResource topActBtnStyle}" HorizontalOptions="EndAndExpand"/>
</Grid>
But all the buttons are displaying at the same place in row.column="0"
i want those buttons in drop down (Reset,Exit,Logout)
But all the buttons are displaying at the same place in row.column="0"
That's because you used RelativeLayout and didn't set the position for them.
But you can also use StackLayout to achieve this.
Please refer to the following code:
<StackLayout>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" ClassId="Dropdowns" Text="Aktionen" Clicked="Button_Clicked" FontSize="22" HorizontalOptions="StartAndExpand" xct:SideMenuView.MenuAppearanceType="SlideInOut"/>
<StackLayout x:Name="mStackLayout" Orientation="Vertical" IsVisible="false" Grid.Column="0" Grid.Row="1" ClassId="Dropdowns" >
<Button Text="Reset" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Exit" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Logout" FontSize="22" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<Button Grid.Column="1" Text="UserNameText" HorizontalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
And function Button_Clicked
private void Button_Clicked(object sender, EventArgs e)
{
mStackLayout.IsVisible = !mStackLayout.IsVisible;
}
Note:
I used StackLayout to achieve this function. Of course, you can also use RelativeLayout to achieve it. But for your requirement, I think StackLayout is a simpler way.
For more about RelativeLayout, you can check RelativeLayout .
Has anyone implanted something like the following, that could be of relevance to me? How can I put a frame that encompasses both the group and the items in the photo:
click to enlarge
I have a dirty but simple way:
When I make same forms I use ListView without grouping and ViewCell with RepeaterView. You need remember that it is not the best perfomance way.
If you want to design the UI like the screenshot your provided, using frame to crop image, you can take a look:
<CollectionView IsGrouped="true" ItemsSource="{Binding Animals}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Frame Padding="0"
Grid.RowSpan="2"
BorderColor="Black"
CornerRadius="50"
HeightRequest="40"
HorizontalOptions="Center"
IsClippedToBounds="True"
WidthRequest="40">
<Image
Aspect="AspectFill"
HeightRequest="100"
Source="{Binding ImageUrl}"
WidthRequest="100" />
</Frame>
<Label
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Location}"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label
BackgroundColor="LightGray"
FontAttributes="Bold"
FontSize="Large"
Text="{Binding Name}" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
About viewmodel class, you can take a look Xamarin.Forms CollectionView Grouping
We've got an simple collection view for horizontal items. See code below.
<CollectionView ItemsSource="{Binding Items}" ItemsLayout="HorizontalList" ItemSizingStrategy="MeasureFirstItem" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="Item_Tapped" CommandParameter="{Binding .}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image
Source="{Binding ImageUrl}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label
HorizontalOptions="Center"
Grid.Row="1"
Text="{Binding Title}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
On android this works great and I've got items stand neatly next to each other. On iOS the items are overlapping each other. Cannot find why this doesn't work on iOS.
In my Xamarin Forms app, I have a Syncfusion SfListView with an item template that contains a ffimageloading image control. The list view has an item tapped event that navigates to a details page. Upon navigating back, I have the list rebinding in the page's onappearing method. Sometimes, rather most of the time (not all the time) when you click a list item, navigate to the details page, and come back, the list will load with the item that you clicked, but the image in the row that you clicked is shrunken. I attached a pic. Here's the relevant code
<syncfusion:SfListView x:Name="CountriesListView" ItemTapped="SflistView_ItemTapped"
AutoFitMode="Height" ItemsSource="{ Binding CountryList }" VerticalOptions="FillAndExpand">
<syncfusion:SfListView.HeaderTemplate>
<DataTemplate>
......
</DataTemplate>
</syncfusion:SfListView.HeaderTemplate>
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame OutlineColor="Gray" Padding="2" HasShadow="True" HeightRequest="200">
<Grid RowSpacing="5" ColumnSpacing="0" Margin="10,5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="AUTO" />
</Grid.RowDefinitions>
<!--<Image Source="{Binding MainIMageURL}" Aspect="Fill" Grid.RowSpan="2">
</Image>-->
<ffimageloading:CachedImage Aspect="Fill" Grid.RowSpan="2"
FadeAnimationEnabled="true"
Source="{ Binding MainIMageURL }" />
<Image Source="{Binding ShadowOverlay}" Grid.RowSpan="2" Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" />
<Grid Margin="10,10,10,0" RowSpacing="10" ColumnSpacing="10" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO" />
<!--<RowDefinition Height="25" />-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="AUTO" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="Center"
VerticalOptions="End"
FontSize="25" LineBreakMode="NoWrap" TextColor="#FFFFFF">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="HelveticaNeue-Bold" />
<On Platform="Android" Value="sans-serif-medium" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
protected override void OnAppearing()
{
BindData();
}
private async Task BindData()
{
await LoadCountries();
}
private async Task LoadCountries()
{
try
{
CountriesListView.IsBusy = true;
Console.WriteLine("Getting countries");
await vm.RefreshDataAsync();
Console.WriteLine("Countries retrieved");
}
catch (Exception ex)
{
.......
}
finally
{
CountriesListView.IsBusy = false;
}
}
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.