We Keep Coding

Add Page Carrousel

I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help

You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q

Xamarin Forms How can I inject a ContentPage into Frame element?

I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?

As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.

Change CollectionView EmptyView Text Color

I'm trying to change a CollectionView's EmptyView Text's font color. It seems to automatically change from black to white when switching between the native device's Light theme and Dark theme. TextColor is not an attribute, unfortunately.
I'm new to Xamarin.Forms, I'd like to apologize, first, if I haven't displayed enough code, please let me know if there's anything else you need.
My code is located in the AppShell.xaml
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid HeightRequest="{Binding ShellHeight}"
ColumnSpacing="0"
RowSpacing="0"
RowDefinitions="Auto, Auto"
ColumnDefinitions="45, Auto">
<CollectionView
Margin="15,0,0,0" Grid.Row="1" Grid.Column="0"
Grid.ColumnSpan="2" Grid.RowSpan="2"
ItemsSource="{Binding ShellModelList}"
SelectionMode="Single"
EmptyView="No items to display" //<-- trying to change this text's color
SelectionChanged="OnCollectionViewSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="1"
RowSpacing="10"
ColumnDefinitions="25, Auto"
RowDefinitions="35">
<Image Grid.Column="0">
<Image.Source>
<FontImageSource
x:Name="imgMenuItem"
FontFamily="{StaticResource NextupFont}"
Glyph="{Binding IconName}"
Color="{StaticResource NuCyanBlue}"
Size="8" />
</Image.Source>
</Image>
<Label x:Name="lblMenuItem"
Grid.Column="1"
Margin="10,0,0,0"
Text="{Binding Text}"
TextColor="{AppThemeBinding Light={DynamicResource NuCyanBlue}, Dark={DynamicResource NuBlack}}"
FontSize="12"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>

Well, I think what you should be doing is creating your custom EmptyView.
<CollectionView.EmptyView>
<StackLayout
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label
FontAttributes="Bold"
FontSize="18"
TextColor="Black"
HorizontalTextAlignment="Center"
Text="No items to display" />
</StackLayout>
</CollectionView.EmptyView>
Good luck! feel free to get back if you have any queries.

Image With buttons inside [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have a listview with images and i need to have buttons inside the images and a label below the image, I tried with relative and absolute layouts , but dont understand how to do it.
Have some code alredy done, but the buttons do not stay in the centered in relation with the image and before image is loaded the background stays blue.
here is a example:
What have done so far:
Code:
<Grid Padding="0">
<ListView x:Name="CoversListview" SeparatorVisibility="None" ItemsSource="{Binding Covers}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<!--left, top, right, bottom-->
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<AbsoluteLayout x:Name="ViewLayout" BindingContext="{Binding Item1}" Padding="10,10,0,0" >
<StackLayout Orientation="Vertical" BackgroundColor="#01426A">
<ffimageloading:CachedImage x:Name="CoverShow" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
</TapGestureRecognizer>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
</StackLayout>
<AbsoluteLayout x:Name="ViewControls" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<customRenders:MyButton x:Name="ShowButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" CornerRadius="16" FontSize="12" BorderWidth="0" Clicked="Button_OnClicked_ShowItem1"/>
<customRenders:MyButton x:Name="DownButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" CornerRadius="16" FontSize="12" BorderWidth="0" Clicked="Button_OnClicked_DownItem1"/>
</Grid>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="FrameItem" Grid.Column="2" IsVisible="{Binding IsVisible}" BindingContext="{Binding Item2}" Padding="0,10,0,0" >
<StackLayout Orientation="Vertical" BackgroundColor="#01426A">
<ffimageloading:CachedImage x:Name="CoverShow2" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
</TapGestureRecognizer>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
</StackLayout>
<AbsoluteLayout x:Name="ViewControls2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<customRenders:MyButton x:Name="ShowButtonFrame3" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" VerticalOptions="Center" CornerRadius="16" FontSize="10" BorderWidth="0" Clicked="Button_OnClicked_ShowItem2"/>
<customRenders:MyButton x:Name="DownButtonFrame3" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" CornerRadius="16" FontSize="10" HeightRequest="34" BorderWidth="0" Clicked="Button_OnClicked_DownItem2"/>
</Grid>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

You should add the TapGestureRecognizer on an Image and attach a Command to it, as given below:
<Grid>
<Image Source="myImage.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ImageTapCommand}"
CommandParameter="Id or ImageName or any Parameter goes here" />
</Image.GestureRecognizers>
</Image>
<Button Text="MyButton" IsVisible="{Binding ButtonVisibility, Mode=TwoWay}" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
In Your ViewModel or Model:
private bool _buttonVisibility;
public bool ButtonVisibility
{
get { return _buttonVisibility; }
set { _buttonVisibility = value; OnPropertyChanged(nameof(ButtonVisibility)); }
}
private Command<string> _ImageTapCommand;
public Command<string> ImageTapCommand
{
get
{
return _ImageTapCommand ?? (_ImageTapCommand = new Command<string>((str) => ImageTapCommandExecute(str)));
}
}
void ImageTapCommandExecute(string str)
{
//Here str is whatever you passed with CommandParameter.
//When your Image is tapped, button gets visible
ButtonVisibility = true;
}
This is just a rough code I provided to you for what you want to achieve. May this help you.

CarouselView not showing the data

I am trying to display a CarouselView inside a TabbedPage. I already added the (prerelease-)packages to the Project. Here is my xaml file:
<control:CarouselView x:Name="CVMain"
HeightRequest="150" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Label HorizontalOptions="Center"
Text="Just a test :)"
VerticalOptions="Center" />
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
(control: xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView")
The label doesn't show up when I launch my app. The carousel still exists tho, I can confirm that by adding the BackgroundColor="Green"attribute to the CarouselView.
What am I missing?
Edit: As suggested, I placed the Label inside a Grid, but without any success (I also added an Image):
<control:CarouselView x:Name="CVMain" HeightRequest="150">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.RowSpan="2"
Aspect="AspectFill"
Source="{Binding ImageBase64,
Converter={StaticResource Base64ToImageConverter}}" />
<StackLayout Grid.Row="1">
<Label Text="Test123" />
</StackLayout>
</Grid>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>