Carousel view does not return anything - xamarin

I'm implementing a carrousel in my project, but the way I'm implementing it is not returning me anything, to some error in my code? Am I forgetting any options? Reference Xamarin.Forms.CarouselView is already attached
OBS: I am developing crossplataform
<?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="Hanselman.Portable.Views.PodcastPage" Title="{Binding Title}"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
Icon="{Binding Icon}" IsBusy="{Binding IsBusy}"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand">
<cv:CarouselView x:Name="car" HeightRequest="200">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical">
<Image Aspect="AspectFit" Source="{Binding imgs}"/>
</StackLayout>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</AbsoluteLayout>
</ContentPage>
public class Dados
{
public string imgs { get; set; }
}
public PodcastPage()
{
InitializeComponent();
List<Dados> lista = new List<Dados>();
lista.Add(new Dados
{
imgs = "car1.png",
});
lista.Add(new Dados
{
imgs = "car2.png",
});
lista.Add(new Dados
{
imgs = "car3.png",
});
car.ItemsSource = lista;
}

<cv:CarouselView x:Name="MainCarouselView" HeightRequest="100">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="jose" FontSize="50" TextColor="Black"/>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
I tried without image only with the label inside and showing me my name, even so it does not return anything to me, but when I remove the carousel it works, seeing that I verified that my error is in my carousel, it is not an image question

Related

How To Display list view item pop up in xamarin form

Hello Developer I want to display pop in my page. The given image link red portion I want to display please help me out how can I do that in xamarin form
Hello Xamarin developer I have attach one image link in this question .This image red mark portion I want display on my page how can I do that
Not sure what is the content of your ListView, but here's the simple example of pop up with ListView in it, so you can adapt it as you like.
XAML:
<?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="TestPopUp.MainPage">
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="Pop up!" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Clicked="Button_Clicked" />
</StackLayout>
<ContentView x:Name="popupView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Frame CornerRadius="10" Padding="0" BorderColor="LightGray">
<StackLayout Orientation="Vertical" HeightRequest="300" WidthRequest="200" BackgroundColor="White">
<ListView SeparatorVisibility="None" ItemsSource="{Binding MyList}" VerticalScrollBarVisibility="Never">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage>
C#:
public partial class MainPage : ContentPage
{
public ObservableCollection<string> MyList { get; set; } = new ObservableCollection<string>();
public MainPage()
{
InitializeComponent();
MyList.Add("Item 1");
MyList.Add("Item 2");
MyList.Add("Item 3");
MyList.Add("Item 4");
MyList.Add("Item 5");
MyList.Add("Item 6");
MyList.Add("Item 7");
BindingContext = this;
}
private void Button_Clicked(object sender, EventArgs e)
{
popupView.IsVisible = true;
}
}
This will give you output like this:
So, when you want to show this pop up, just put popupView.IsVisible = true in code behined.

Xamarin.Forms GestureRecognizers not working on Command

Code in the xaml page:
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<CollectionView ItemsSource="{Binding MeniElementi}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Padding="10" WidthRequest="140" HeightRequest="140">
<Frame BackgroundColor="AliceBlue" WidthRequest="120" HeightRequest="120" HasShadow="True" CornerRadius="10" Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<StackLayout>
<Image Source="http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png" WidthRequest="70" HeightRequest="70" >
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding LoadElements}"
/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Title}" HeightRequest="50" WidthRequest="100" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</StackLayout>
</Frame>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Code in xaml.cs:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Menu: ContentPage
{
MenuViewModel viewModel = new MenuViewModel();
public Menu()
{
InitializeComponent();
BindingContext = viewModel;
}
}
Code in viewmodel.cs
public class MenuViewModel :BaseViewModel, INotifyPropertyChanged
{
public Command LoadElements { get; set; }
public ObservableCollection<Meni> MeniElementi { get; set; }
public MenuViewModel()
{
LoadElements= new Command(execute: async () => await ExecuteElements());
MeniElementi = new ObservableCollection<Meni>() {
new Meni(){Title="Transatcions" ,Picture="xxx"},
new Meni(){Title="Transatcions" ,Picture="xxx"},
};
}
async Task ExecuteElements()
{
try
{
await Application.Current.MainPage.Navigation.PushAsync(new InfoPage());
}
catch (Exception ex)
{
Debug.WriteLine(ex);
}
finally
{
}
}
LoadElements Command not fired. Loading starting menu , showing menu elements just command not working to navigate to another page. Using Xamarin.Forms.Command. On other pages working normal with Command
You could reset the binding path of the tap . So that you can handle the logic in the same command .
in the ContentPage (which contains the CollectionView)
<?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:Name="Page" //set the name of page
x:Class="xxx.xxxPage">
<TapGestureRecognizer Command="{Binding Source={x:Reference Page},Path=BindingContext.LoadElements}"
you need to call the command on the ViewModel of the Page for that you need to do this:-
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoadElements, Source={x:Reference Name=ThisPage}}" />
</Image.GestureRecognizers>
And put x:Name="ThisPage" in the ContentPage tag of the xaml at the top of the page.
Let me know if you face difficulties.

СarouselView does not display content

СarouselView does not display content. I have the following code in the AppShell.axml
for the whole day I can’t figure out how to make this work. Help make a working code.
<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"
xmlns:local="clr-namespace:test.Views"
BackgroundColor="Azure"
x:Class="test.AppShell">
<CarouselView HorizontalOptions="Center" NumberOfSideItems="1">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="11111111111"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage>
I have the following code in the AppShell.axml.cs
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace test
{
public partial class AppShell : ContentPage
{
public AppShell()
{
InitializeComponent();
}
}
}
I tried such an example and it works, but I need the option to work from above.
<CarouselView>
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
Firstly why you place a carsouselView in the Appshell.xaml? I think the AppShell.Xaml is only to set the App configurations.
you can write code in the AppShell.xaml to layout the App menu or flylayout.
if you do not specify a ItemsSource to CarouselView It will not renderer.
you can make the ItemsSource by BindingContext.
Do you want to achieve the result like following GIF?
If so, you could show the content in the CarouselView by DataBinding.
Step 1: Create a Model for your CarouselView, I create it like following code.
public class MyModel
{
public string Name { get; set; }
}
Step 2: create a viewModel for your CarouselView(we can add the content that we want them to display).
public class MyModelView: BaseViewModel
{
public ObservableCollection<MyModel> MyModels { get; set; }
public MyModelView()
{
MyModels = new ObservableCollection<MyModel>();
MyModels.Add(new MyModel() { Name="test1"});
MyModels.Add(new MyModel() { Name = "test2" });
MyModels.Add(new MyModel() { Name = "test3" });
MyModels.Add(new MyModel() { Name = "test4" });
MyModels.Add(new MyModel() { Name = "test5" });
MyModels.Add(new MyModel() { Name = "test6" });
}
}
Step 3: please add the ItemsSource for your CarouselView and binding the properties for xamarin forms control(Label)
<CarouselView HorizontalOptions="Center" NumberOfSideItems="1" ItemsSource="{ Binding MyModels}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Step 4: backend code for your CarouselView.To bind your ModelView for layout.
BindingContext = new MyModelView();
Here is an example project. you can refer to it.
https://github.com/851265601/MyShellCarouselView

How to set BindingContext of MasterDetailPage.Master

I have a MasterDetailPage.Master and a Login page. After the login I call a WebService that returns a filled class to me, and its working, even the BindingContext is getting the values, but the fields on the Page are empty. How do I set the binding context of the MasterDetailPage.Master if it is rendering before the Login page?
This is for a profile page in the MasterDetailPage.Master, using a WebService to fill the binding. I already tried to call a new instance of the MasterDetailPage on the OnDesappearing of the Login page, but not success.
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:views="clr-namespace:HCTaNaMao.Views"
x:Class="HCTaNaMao.Views.MainPage">
<MasterDetailPage.Master>
<views:InformacoesUsuario />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:Menu />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MasterDetailPage.Master.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HCTaNaMao.Views.InformacoesUsuario"
Title="Dados do Usuário">
<TabbedPage.Children>
<ContentPage Title="Usuário">
<StackLayout Padding="0,50,0,0">
<Image BackgroundColor="LightGray" HorizontalOptions="Center" Source="HC_logo.png"></Image>
<Frame
OutlineColor="Silver"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Fill"
Margin="15">
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center">
<Label x:Name="lblNome" Text="{Binding nome}" FontSize="18" HorizontalTextAlignment="Center"></Label>
<BoxView Color="Gray" HeightRequest="1" HorizontalOptions="Fill"/>
<Label x:Name="lblProntuario" Text="{Binding prontuario}" FontSize="18" HorizontalTextAlignment="Center"></Label>
<BoxView Color="Gray" HeightRequest="1" HorizontalOptions="Fill"/>
<Button x:Name="btnEditar" Text="Perfil" TextColor="White" WidthRequest="110"
HorizontalOptions="Center" BackgroundColor="SteelBlue" BorderRadius="20"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
<ContentPage Title="Perfil">
<Frame
OutlineColor="Silver"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Fill"
Margin="15">
<StackLayout>
<TableView>
<TableRoot>
<TableSection Title="Dados Pessoais">
<EntryCell x:Name="cellNome" Placeholder="Nome"
Text="{Binding nome}" IsEnabled="True"></EntryCell>
<EntryCell Placeholder="Data de Nascimento" x:Name="cellNasc"
Text="{Binding data_nascimento}" IsEnabled="True"></EntryCell>
<EntryCell Placeholder="CPF" Keyboard="Numeric" x:Name="cellCpf"
Text="{Binding cpf}" IsEnabled="True"></EntryCell>
<EntryCell Placeholder="CNS" Keyboard="Numeric" x:Name="cellCns"
Text="{Binding cns}" IsEnabled="True"></EntryCell>
</TableSection>
</TableRoot>
</TableView>
<Button Text="Editar"
IsVisible="False">
</Button>
<Button x:Name="btnSalvar"
Text="Salvar"
IsVisible="True" TextColor="White" WidthRequest="110"
HorizontalOptions="Center" BackgroundColor="SteelBlue" BorderRadius="20"></Button>
</StackLayout>
</Frame>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
MaterDetailPage.xaml.cs
namespace HCTaNaMao.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class InformacoesUsuario : TabbedPage
{
HCTMWebService service = new HCTMWebService();
HCTMPacienteDTO paciente;
public InformacoesUsuario ()
{
InitializeComponent();
btnEditar.Command = new Command(() => this.CurrentPage = this.Children[1]);
btnSalvar.Command = new Command(() => this.CurrentPage = this.Children[0]);
paciente = service.InformacoesPaciente(Login.seq_cliente);
BindingContext = paciente;
}
}
}
I expect MasterPage fields are filled by the Binding
How do I set the binding context of the MasterDetailPage.Master if it is rendering before the Login page?
About binding context of MasterDetailedPage.Master, I do one sample, you can take a look:
MainPage:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
public partial class MainPage : MasterDetailPage
{
public MainPage()
{
InitializeComponent();
masterPage.listView.ItemSelected += OnItemSelected;
if (Device.RuntimePlatform == Device.UWP)
{
MasterBehavior = MasterBehavior.Popover;
}
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null)
{
Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
masterPage.listView.SelectedItem = null;
IsPresented = false;
}
}
}
MasterPage:
I don't understand why your masterPage is TabbedPage, I think it should be contentpage,that has Listview to display detailed page title.
<ContentPage
x:Class="MasterDetailPageNavigation.MasterPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="using:MasterDetailPageNavigation"
Title="Personal Organiser"
Padding="0,40,0,0"
IconImageSource="hamburger.png">
<StackLayout>
<ListView
x:Name="listView"
x:FieldModifier="public"
ItemsSource="{Binding items}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
public partial class MasterPage : ContentPage
{
public ObservableCollection<MasterPageItem> items { get; set; }
public MasterPage()
{
InitializeComponent();
//load data from service or other.
items = new ObservableCollection<MasterPageItem>()
{
new MasterPageItem(){ Title="Contacts", IconSource="contacts.png",TargetType=typeof(ContactsPage)},
new MasterPageItem(){Title="TodoList",IconSource="todo.png",TargetType=typeof(TodoListPage)},
new MasterPageItem(){Title="Reminders",IconSource="reminders.png",TargetType=typeof(ReminderPage)}
};
this.BindingContext = this;
}
}
About MasterDetailedPage, I suggest you can take a look:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/master-detail-page

Binding Xamarin XAML to code behind properties (ListView)

I want to bind my code-behind property, which is a list, to a XAML ListView. However, my ListView is never populated and I have no idea why.
<?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="BLEPl.EvaluationPage"
Title="Evaluation">
<ContentPage.Content>
<StackLayout Padding="0,20,0,20">
<ListView HasUnevenRows="True" IsVisible="True" x:Name="TableLayout" ItemsSource="{Binding Path=SensorValues}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label Style="{StaticResource TitleLabel}" Grid.Column="0" Grid.Row="0" Text="Zeitstempel: " />
<Label Style="{StaticResource DataLabel}" Grid.Column="1" Grid.Row="0" Text="{Binding TimeStamp}" />
<Label Style="{StaticResource TitleLabel}" Grid.Column="0" Grid.Row="1" Text="Wert: " />
<Label Style="{StaticResource DataLabel}" Grid.Column="1" Grid.Row="1" Text="{Binding Value}" />
<Label Style="{StaticResource TitleLabel}" Grid.Column="0" Grid.Row="2" Text="Sensor: " />
<Label Style="{StaticResource DataLabel}" Grid.Column="1" Grid.Row="2" Text="{Binding Sensor.Name}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EvaluationPage : ContentPage
{
private ObservableCollection<SensorValue> SensorValues = new ObservableCollection<SensorValue>();
public EvaluationPage ()
{
InitializeComponent ();
using (var context = new BlepContext(true))
{
var repo = new BLEPRepository(context);
SensorValues = new ObservableCollection<SensorValue>(repo.GetAllSensorValues());
}
}
}
When I run this, my ListView doesn't contain any items. I do not get errors and my app compiles fine. Am I doing something wrong here?
<ListView HasUnevenRows="True" IsVisible="True" x:Name="TableLayout" ItemsSource="{Binding SensorValues}">
you can only bind to public properties, and you need to set a BindingContext for the page
// needs to be a PUBLIC PROPERTY
public ObservableCollection<SensorValue> SensorValues { get; set; }
public EvaluationPage ()
{
InitializeComponent ();
// set the BindingContext
this.BindingContext = this;
using (var context = new BlepContext(true))
{
var repo = new BLEPRepository(context);
SensorValues = new ObservableCollection<SensorValue>(repo.GetAllSensorValues());
}
}

Resources