I am trying to display data using carousel view in my forms application. I am not sure what am I missing but data is not getting populated, I have followed almost all available samples but still I have not found any success. Please help me get out of this problem:
I am using the following code in my xaml file:
<forms:CarouselView x:Name="listview" ItemsSource="postIdList" HeightRequest="200" Margin="5">
<forms:CarouselView.ItemTemplate>
<DataTemplate>
<ContentPage >
<StackLayout >
<Label Text="{Binding .}" FontSize="20" TextColor="Black" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</DataTemplate>
</forms:CarouselView.ItemTemplate>
</forms:CarouselView>
And I am trying to populate the data in the following manner in .cs file:
List<string> postIdList = new List<string>
{
"Carousel", "Carousel", "carousel"
};
listview.ItemsSource = postIdList;
If I give a background colour for carousal view I am able to see that colour, but text is not getting displayed.
Please let me know my mistake.
In case of a ListView, you need an ObservableCollection instead of a List. Switch it around and see if it works?
On your XAML you are defining a <ContentPage> inside the <Datatemplate>. Replace the <ContentPage> with a <ViewCell> or a <Grid>
Here is a great example on how to use it, you need to keep in mind that CarouselView work like a ListView, it need to have a Datatemplate.
Related
I've following situation.
<ScrollView BackgroundColor="DeepPink">
...
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ContentView Opacity="{Binding ViewProvider.IsCancelling, Converter={StaticResource BoolToOpacityConverter}}" Content="{Binding ViewProvider.CurrentView}"/>
</Grid>
...
</ScrollView>
The Content View contains multiple elements and one of them is a StackLayout with BindableLayout.ItemsSource
<StackLayout BindableLayout.ItemsSource="{Binding Rings}" Margin="12,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
The Rings will be added by different actions while the View is open. As soon as this happens, the height of the ScrollViewer increases, but the parts below are cut off or just not rendered. (It cut's the height off, which the rings are using - I guess because the Grid doesn't resize? But why?)
I've tried to call InvalidateMeasure() and ForceLayout() after adding rings but without any changes. Any ideas?
Edit
As requested in the comments I've uploaded a simple demo on github to reproduce this issue.
https://github.com/Valronicon/ScrollViewerIssue
Thank you!
Edit 2
I was able to fix this by wrapping the ScrollViewer within an additional Grid. Don't know why it works, but it works...
As Rich Mentioned wrapping the scrollview in a grid seemed to solve this issue for me as well, so im posting it as an answer
<Grid>
<ScrollView>
...
</ScrollView>
</Grid>
I have a CarouselView and I want to have some animation after Items are scrolled manually (by swiping left or right on CarouselView). I want to know when the scroll animation is complete or ended. Is there any way, I did not find anything related to this in the Official Docs.
Here is my code
<CarouselView x:Name="carouselView" Scrolled="CarouselViewScrolled" Loop="False" HorizontalOptions="FillAndExpand" >
<CarouselView.ItemsSource>
<x:Array Type="{x:Type ContentView}">
<ContentView>
<!--Defining View 1-->
</ContentView>
<ContentView>
<!--Defining View 2-->
</ContentView>
<ContentView>
<!--Defining View 3-->
</ContentView>
</CarouselView.ItemsSource>
</CarouselView>
As far as I know, use CurrentItemChanged instead of Scrolled property of CarouselView.
Change your XAML as
<CarouselView x:Name="carouselView" CurrentItemChanged="CarouselViewItemChanged">
...
If you want to get current Item after Swiping to a new Item use carouselView.Position.
In your C# Code behind
void CarouselViewItemChanged(object sender, CurrentItemChangedEventArgs e)
{
Debug.WriteLine("Position: " + carouselView.Position);
}
Refer this for Official Documentation
I am using ViewCell to create rows in my table settings page. I have a setting to select a Light or Dark theme.
<ViewCell Height="50">
<StackLayout x:Name="darkTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<Label Text="Dark" XAlign="Center" FontSize="15"/>
<Label x:Name="darkThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12" HorizontalOptions="EndAndExpand"/
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell Height="50">
<StackLayout x:Name="lightTheme" VerticalOptions="FillAndExpand" Padding="20,0,20,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<Label Text="Light" XAlign="Center" FontSize="15"/>
<Label x:Name="lightThemeCheckmark" Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" XAlign="Center" IsVisible="false" FontSize="12"/>
</StackLayout>
</StackLayout>
</ViewCell>
Whenever I switch from dark to light theme, there is faint light line on the left side between my rows that I can't seem to get rid of. Please refer to the images below:
In my renderer I have set the following:
tableView.LayoutMargins = new UIEdgeInsets() { Left = 20 };
cell.SeparatorInset = new UIEdgeInsets() { Left = 20 };
cell.LayoutMargins = new UIEdgeInsets() { Left = 20 };
Anyone knows how to get rid of this line?
Edit:
I wanted it to look like below:
I am novice to xamarin but, According to this post you need to do this on the UITableView and on your UITableViewCell subclasses.
I hope this will help you. :)
Apologies in advance incase you have already considered this but I believe what you're looking for is 'TableView.SeparatorInset' this would apply to your renderer rather than the xaml your using in your PCL. You can find the documentation around styling the tableviews at this link.
E.G.
TableView.SeparatorInset.InsetRect(new CGRect(4, 4, 150, 2));
Moving the inset of the seperator will get around the problem I saw you mention in the comments of the other answer about the whole table shifting. Please let me know if you've tried this already, it's the simplest solution but there are other options available to you. (They just aren't as nice).
Edit: Example of a way of achieving your goals by creating your own seperators, not my favourite but would also resolve the issue you've highlighted as you'd have complete control over the styling of a seperator. Refer to this Link
I am trying to follow the Xamarin documentation about Embedded Images:
https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Embedded_Images
This is the code snippet that I use in my portable application:
var embeddedImage = new Image { Aspect = Aspect.AspectFit };
embeddedImage.Source = ImageSource.FromResource("<MyNamespace>.<MyFolder>.imageFileName.jpg");
listItem.EmbeddedImage = embeddedImage;
Now I am trying to bind it in XAML, as part of a ListView (note: the <Image Source="{Binding EmbeddedImage}" /> part is probably wrong) :
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee"
Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Image Source="{Binding EmbeddedImage}" /> // This is most likely wrong since it doesn't work
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've tested this with <Image Source="{Binding ImageUrl}" /> and it works, so the rest of the code seems to be working as it should.
Edit:
Someone suggested this post as a solution:
How to load an image to a ImageCell on Xamarin.Forms?
But the accepted answer there was:
The images go into your "native" projects
...but actually the Xamarin documentation says that it can be done inside the portable project (so you wouldn't need to copy the same images/icons through all the "native" projects).
I know that putting them in every subproject would probably work, but that's not the point of my question.
You can access the resource directly in xaml by using pack://application uri.
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee"
Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Image Source="pack://application:,,,/{AssemblyName};component/Images/MyImage.png" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've combed my hair out over this, and the problem is that Microsoft doesn't tell you the whole story in the Images docs. You have to go over to the Files docs to understand why it won't work.
Yes, you can use embedded resources in the shared project directory, but apparently under only one of two conditions:
You have to use a Markup Extension and then directly specify the resource path in Xaml, a la: <Image Source="{local:ImageResource ProjectName.Images.flower.jpg"/>
You write compiler directives in the code-behind that customize the beginning of the ResourceID per-platform.
Option 1 requires hard-coding the path, so you can't use a dynamically-assigned image, and Option 2 wrecks the whole point of trying to write cross-platform code.
WAY HUGE EDIT: May be solved
This post on the Xamarin forums made a huge difference for me: https://forums.xamarin.com/discussion/17953/helpful-shared-project-image-information
note: the first post basically gives you all the code you need, but a little bit down in the thread there's some advice about project configurations that may be necessary for it to work correctly.
It basically introduces some custom code that programmatically derives the resource ID during runtime, so it's cross-platform code that customizes itself to whatever platform is currently running it. Working beautifully for me! Here's the version of the suggested approach that I'm using:
using System.Linq;
using System.Reflection;
using System.Diagnostics;
using System;
namespace Helpers
{
public class EmbeddedSourceror
{
public static Xamarin.Forms.ImageSource SourceFor(string pclFilePathInResourceFormat)
{
var resources = typeof(EmbeddedSourceror).GetTypeInfo().Assembly.GetManifestResourceNames();
var resourceName = resources.Single(r => r.EndsWith(pclFilePathInResourceFormat, StringComparison.OrdinalIgnoreCase));
Debug.WriteLine("EmbeddedSourceror: resourceName string is " + resourceName);
return Xamarin.Forms.ImageSource.FromResource(resourceName);
}
}
}
This lets you write the Xaml code in a totally normal way, such as:
<Image
x:Name ="backingImage"
Aspect ="AspectFill" />
And in the code-behind all you have to do is:
backingImage.Source = EmbeddedSourceror.SourceFor("flower.jpg");
I'm trying to figure out how to print a ListView ItemTemplate using the uwp PrintHelper.cs sample. Everything works, except the print preview does not display items added to the ListView at runtime. I can add other controls such as a textbox, and the print preview will show it, so there must be something peculiar with printing databound ListView items at runtime, but I cannot find any information about it.
<ListView x:Name="ClipboardList"
xmlns:m="using:QuickieEdit.Models"
ItemsSource="{x:Bind ViewModel.MemoryItems}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="m:MemoryItem">
<StackPanel Orientation="Horizontal">
<Button x:Name="MemoryCopyBtn"
Content="Copy"
Click="How to Copy currently selected
MemoryListItem.Text?"/>
<TextBox x:Name="MemoryListItem"
Text="{x:Bind Memory, Mode=TwoWay}">
</TextBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
I cannot understand your exact query, but I think you may be facing situation where your ListView does not get updated with the model and hence does not show up while printing. You can use
ObservableCollection<Model> instead of List<Model>
This will solve your problem or if it does not please provide the c# code in detail as well
Cheers