c# - modal - xamarin forms master page
Xamarin.Forms.CarouselView no funciona en iOS (3)
He intentado implementar Xamarin.Forms.CarouselView para usar en iOS y Android usando Xamarin.Forms en Visual Studio. Funciona perfectamente en Android, pero no funciona en iOS. En iOS muestra la primera diapositiva, pero no me permite deslizar hacia la derecha o hacia la izquierda para cambiar la diapositiva actual. He instalado el paquete NuGet en los proyectos de iOS y Android. El XAML se ve así:
<cv:CarouselView ItemsSource="{Binding Slider}" x:Name="CarouselSlider">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<!--<RowDefinition Height="Auto"/>-->
</Grid.RowDefinitions>
<Image Grid.RowSpan="1" Aspect="AspectFill" Source="{Binding ImageUrl}" />
<StackLayout BackgroundColor="#7F000000" Padding="12" VerticalOptions="Center" TranslationY="100">
<Label TextColor="White" Text="{Binding Title}" FontSize="26" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding TextBody}" FontSize="16" HorizontalOptions="Center" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
Y el backend se ve así:
public partial class MainPage : ContentPage
{
public System.Collections.ObjectModel.ObservableCollection<SliderContent> Slider { get; set; }
public MainPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
Slider = new System.Collections.ObjectModel.ObservableCollection<SliderContent>
{
new SliderContent
{
Id = 1,
ImageUrl = "https://thumb9.shutterstock.com/display_pic_with_logo/1975943/561919966/stock-photo-brutal-strong-athletic-men-pumping-up-muscles-workout-bodybuilding-concept-background-muscular-561919966.jpg",
Title = "Aliquam et neque arcu",
TextBody = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor erat arcu, vitae accumsan odio iaculis et."
},
new SliderContent
{
Id = 2,
ImageUrl = "https://ifitlife.files.wordpress.com/2014/06/20140604-155437-57277345.jpg",
Title = "Donec lobortis sodales dui",
TextBody = "Morbi congue scelerisque vulputate. Vestibulum sit amet hendrerit justo. Nulla facilisi."
},
new SliderContent
{
Id = 3,
ImageUrl = "https://uproxx.files.wordpress.com/2013/05/dmx-black.jpg?quality=100&w=650",
Title = "Vestibulum arcu elit",
TextBody = "Aliquam in maximus ante. Suspendisse facilisis posuere nulla quis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
}
};
Grid dotsGrid = DotsIndicator;
dotsGrid.HorizontalOptions = LayoutOptions.CenterAndExpand;
dotsGrid.ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
dotsGrid.RowDefinitions = new RowDefinitionCollection
{
new RowDefinition { Height = new GridLength(6, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(6, GridUnitType.Star) }
};
int counter = 0;
foreach (var i in Slider)
{
Button label = new Button();
if (Slider.First() == i)
{
label = new Button
{
BackgroundColor = Color.White,
BindingContext = i,
VerticalOptions = LayoutOptions.Fill,
WidthRequest = 20,
HeightRequest = 20,
BorderRadius = 30
};
}
else
{
label = new Button
{
BackgroundColor = Color.Gray,
BindingContext = i,
VerticalOptions = LayoutOptions.Fill,
WidthRequest = 20,
HeightRequest = 20,
BorderRadius = 30
};
}
dotsGrid.Children.Add(label, counter, 1);
counter++;
}
DotsIndicator = dotsGrid;
this.BindingContext = this;
CarouselSlider.ItemSelected += CarouselSlider_ItemSelected;
}
private void CarouselSlider_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as SliderContent;
foreach (var i in DotsIndicator.Children)
{
i.BackgroundColor = Color.Gray;
if (i.BindingContext == item)
{
i.BackgroundColor = Color.White;
}
}
return;
}
}
¿Hay algún problema conocido al utilizar Xamarin.Forms.CarouselView en iOS o me falta algo?
He utilizado Xamarin.Forms CarouselView para varios proyectos iOS, funciona bien. Debajo está mi código de muestra, y por favor mira mi blog para más detalles. Espero eso ayude.
Instale el paquete CarouselView Nuget en todos sus proyectos (PCL, Android, iOS y Windows). Como CarouselView se encuentra en un ensamblaje por separado, agregue el espacio de nombres de CarouselView en la raíz de su página Xaml y úselo en su página de esta manera;
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XYZ.Mobile.App.Controls.ValidationControls.Confirmation"
xmlns:valueconverters="clr-namespace:XYZ.Mobile.App.ValueConverters"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">
<StackLayout Grid.Row="1"
Orientation="Vertical">
<cv:CarouselView x:Name="ConfirmationQuestionsCarousel"
ItemsSource="{Binding ConfirmationQuestions}">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<!--You can now add other Xamarin controls in to your CarouselView-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.ColumnSpan="2"
Text="SOME TEXT"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.ColumnSpan="2"
Text="{Binding Question}"/>
<Button Grid.Row="2"
Grid.Column="0"
Text="No"
StyleId="No"
CommandParameter="false"
Command="{Binding ToggleAgree}"
Clicked="OnQuestionAnswered"
BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}, ConverterParameter=''Invert''}"/>
<Button Grid.Row="2"
Grid.Column="1"
Text="Yes"
StyleId="Yes"
CommandParameter="true"
Command="{Binding ToggleAgree}"
Clicked="OnQuestionAnswered"
BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}}"/>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
</ContentView>
Además; Cuando usé el CarouselView de Xamarin.Forms por primera vez, tuve algunos problemas al obtener el elemento Count of the CarouselView. Necesitaba esta información de recuento para pasar al siguiente elemento correctamente. Cada vez que traté de obtener la información de ConfirmationQuestionsCarousel.Count, recibí un error de "Miembro desconocido", así que finalmente utilicé el siguiente código para obtener la información de conteo.
private void OnQuestionAnswered(object sender, EventArgs args)
{
var buttonClicked = sender as Button;
var buttonClickedAnswer = buttonClicked.StyleId;
// Ugly way to get the count
//var s = new List<object>(ConfirmationQuestionsCarousel.ItemsSource.Cast<object>()).Count;
// Better way to get the count
int count = 0;
foreach (var item in ConfirmationQuestionsCarousel.ItemsSource)
{
count++;
}
// This is to set the Carosel''s Position - this is unfinished code, I put it here only as an example
ConfirmationQuestionsCarousel.Position = 3;
}
Obtuve tu código y pude compilarlo y ejecutarlo, y el CarouselView funcionó tanto en iOS como en Android.
Aquí se muestra la transición entre dos vistas:
Asegúrese:
- Tener la última versión de la biblioteca 2.3.0-pre2.
- Instala la biblioteca en tus 3 proyectos (Formularios, iOS y Android)
Nota: utilicé la última versión de Xamarin Forms (2.3.4.247)
También es una buena forma de que descubras si hay algún problema conocido con una biblioteca visitando el proyecto github.
Resolví el problema al colocar una etiqueta StackLayout alrededor de la vista de carrusel.