<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LeaveManagerApp.UpcomingLeavesPage"
xmlns:controls="clr- namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
>
<Grid >
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
>
</controls:Calendar>
</Grid>
How to fit calendar to screen size in xamarin form ,
i am using calendar control of xamarin form ,tried HeightRequest but its not working.
This is not a default Xamarin.Forms control, it originates from here: https://github.com/rebeccaXam/XamForms.Controls.Calendar
It looks like the control is rendered with a fixed height. Searching through the issues, I found this one: https://github.com/rebeccaXam/XamForms.Controls.Calendar/issues/54
You can influence the height of a row with this code:
yourCalendar.OnEndRenderCalendar += (sender, e) =>
{
(calendar.Content as StackLayout).Children.Last().HeightRequest = 500;
};
The only thing you need to do is determine the right height, build something yourself for it or open an issue on the repo.
You should post a full XAML code but as per Xamarin standard how to expand full view of child control. Check the below code.
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</controls:Calendar>
</Grid>
And also it's depend on Xamarin Layout which layout you are using for XAML design. And how to use XAML extensible language in Xamarin form Please check the link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/
Related
I am using CarouselView to display data, do I use SnapPointsAlignment property for it:
<CarouselView x:Name="_data" PeekAreaInsets="40" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" SnapPointsType="Mandatory" SnapPointsAlignment="Start" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
.....
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
I made AutoPlay for it:
...
Device.StartTimer(TimeSpan.FromSeconds(6), (Func<bool>)(() =>
{
_data.Position = (_data.Position + 2) % _listProd.Count;
return true;
}));
In the example I use SnapPointsAlignment="Start". However when I display my first data it stays in the middle. I searched in the documentation. However, still not found the solution described
What I look forward to
Note that I don't want to use CollectionView, because I have a hard time looping it
I am using XF 5.0.0.2291. Looking forward to everyone's help. Thank you
I have a search bar in Xamarin.Forms, and in version 3.4 it used to look like this:
But after I updated to Xamarin.Forms 4.4.0.991477, it looks like this:
I think what happened is the searchbar decided to create an outline around it, but didn't get rid of the underline it used to have so now the bottom lines are overlaying. I've seen suggestions of using a custom renderer but that seems overkill + I wouldn't know how to get rid of an element I don't know the keyword of..
Can someone help me either get rid of the border or the underline?? I'd like to know both if possible.
Thanks! (This is the android app, running Android 9)
edit: Forgot to add code
<SearchBar Placeholder="Search"
FontSize="Medium"
HeightRequest="50"
Text="{Binding SearchText}"/>
iOS and Android implementations for SearchBar are diferent, in iOS the SearchBar doesn't have the underline, and the underline can't be remove on Android unless you use a Custom Renderer, and it's not that overkill, is quite simple actualy.
1 - Create a folder for your custom controls and create a class and extend it from SearchBar like this:
MyApp.Mobile > Create The Folder Here > SearchBarNoUnderline.cs
public class SearchBarNoUnderline : SearchBar
{
}
After this, you only need the Custom Renderer for Android.
2 - Create a folder for your Android Custom Renderers in your Android Project and create a class that extends from Android SearchBarRenderer, like this:
MyApp.Android > Create The Folder Here > SearchBarNoUnderlineRenderer.cs
using MyApp.Mobile.Controls;
using MyApp.Mobile.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(SearchBarNoUnderline), typeof(SearchBarNoUnderlineRenderer))]
namespace MyApp.Mobile.Droid.CustomRenderers
{
public class SearchBarNoUnderlineRenderer : SearchBarRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
var plate = Control.FindViewById(plateId);
plate.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
}
And that's it! now you can use you custom SearchBar in you XAML like this:
<controls:SearchBarNoUnderline Placeholder="Search"
FontSize="Medium"
HeightRequest="50"
Text="{Binding SearchText}"/>
And don't forget to add the reference for your custom controls folder:
xmlns:controls="clr-namespace:MyApp.Mobile.Controls"
And to remove the Border of the SearchBar, i use this little trick:
<StackLayout Spacing="0" BackgroundColor="Red" Padding="0">
<controls:SearchBarNoUnderline Placeholder="Search"
FontSize="Medium"
BackgroundColor="Transparent"
HeightRequest="50"
Text="{Binding SearchText}"/>
</StackLayout>
Now your border should disapear, and you can use the parent StackLayout to define the BackgroundColor for your SearchBar
I want to set a background image to my Grid in code behind. I found in internet that we can do using XAML like this.
<?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="Pages.PhotoPage">
<Grid >
<Image Source="background.png" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid >
But how can I set this in code behind. I cannot see anyImage or BackgroundImage property for Grid. Please help me.
Thanks
You can just create an empty Image element in the Grid and set it.
<Grid>
<Image x:Name="BackgroundImage" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid>
And now set it in code:
backgroundImage.Source = ...;
If you are building the whole UI in code, you can do this as well:
var myGrid = new Grid();
var backgroundImage = new Image();
backgroundImage.Source = ...;
myGrid.Children.Add( backgroundImage );
If your Grid has multiple rows and columns, you will want to set the Grid.ColumnSpan and Grid.RowSpan properties on the image to make it span the whole grid.
I'm trying to implement a carousel view that, when a user selects an image from a list, the Carousel View shows that image from the selected index on start.
My Attempt:
In my code I'm setting the Position field to the selected index, but its not working for me. I also don't see any other fields associated with CarouselView that would move to a selected index from an index number or matching object (unless I missed something).
Heres my code so far:
public partial class ImagePreview : ContentPage
{
int index;
public ImagePreview(Picture photo, int i)
{
InitializeComponent();
this.index = i;
photo_carousel.Position = index;
photo_carousel.ItemsSource = App.rug.photos;
}
}
Heres the backend:
<ContentPage.Content>
<cv:CarouselView x:Name="photo_carousel">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUri}"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
<Label TextColor="White" Text="{Binding Date}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding Length}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</ContentPage.Content>
There is currently a bug in the Xamarin.Forms Carousel View on iOS where it does not scroll to the position on initial load. This is a bug in the library Xamarin have provided.
The pull request which fixes this can be found here: https://github.com/xamarin/Xamarin.Forms.CarouselView/pull/9
They have planned to make the CarouselView stable by February 2017:
CarouselView v1 Stable - Feature CarouselView was introduced at
Xamarin Evolve 2016 and has been in prerelease ever since. v1 brings
stability and performance improvements.
Instead of:
photo_carousel.Position = index;
photo_carousel.ItemsSource = App.rug.photos;
Try with:
photo_carousel.ItemsSource = App.rug.photos;
photo_carousel.Position = index;
Every time you set the ItemSource, Position will be set to default value of 0
In a ContentPage I have a ListView inside a StackLayout inside a ScrollView. The ListView is populated (ItemSource is set) in the ContentPage when OnAppearing gets called and I can see that the list is populated in the emulator. The StackLayouts orientation is Vertical and below the ListView I have a Button.
My problem is that no matter how many elements the ListView has, it gets the height of 53.33. I would like the height of the ListView to match the total height of the items in it. By setting HeightRequest I can set the height of the ListView to anything I want, but since I do not know the height of the items inside the ListView the result is most often that the distance to the button below it is incorrect and therefore looks ugly. I have tried to set VerticalOptions on both the ListView and the StackLayout to Startand other settings, but this does not change the height from 53.33 (and if I try to combine using HeightRequest and Start it turns out that HeightRequest wins out).
How can I solve this?
(please excuse the cross posting from Xamarin forum)
With the new BindableLayout feature in Xamarin Forms 3.5 you can easily use the ItemsSource on StackPanel.
So, basically you can write something like this:
<StackLayout BindableLayout.ItemsSource="{Binding list}">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
You can read more about it here: https://blog.xamarin.com/xamarin-forms-3-5-a-little-bindable-love/
The solution in my case was to put the ListView inside a StackLayout and then put that StackLayout inside the main StackLayout. Then I could set the VerticalOptions = LayoutOptions.FillAndExpand on the inner StackLayout (the one containing the ListView) with the result that the ListView got the space it needed (which of course varies depending on the data).
Here is the main code:
listView.ItemsSource = alternativeCells;
listView.ItemSelected += ListViewOnItemSelected;
var listStackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
listStackLayout.Children.Add(listView);
_stackLayout.Children.Add(listStackLayout);
As you see, I added a new StackLayout with the only purpose of putting the ListView inside it. Then I put that listStackLayout inside the main _stackLayout.
See the post on this Xamarin forum post for more information
I ran into the same problem, and for me this worked like a charm:
listView.HasUnevenRows = true;
(http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/listview/#Display_Rows_with_Variable_Heights)
I had the same problem, and this was the only thing I did that solved for me (in XAML):
<StackLayout Orientation="Vertical"
VerticalOptions="Fill"
HorizontalOptions="StartAndExpand">
<ListView VerticalOptions="FillAndExpand"
RowHeight="<some row height>">
</ListView>
</StackLayout>
Hope it works!
Below code worked for me,
protected override void OnAppearing()
{
base.OnAppearing();
listViewOrderCloths.HeightRequest = model.ListOrderedCloths.Count*100)/2 ;
}
I had a similar struggle, with a slightly different solution. First, setting a RowHeight on the ListView seemed to be pivotal. Second, I was running into a binding + timing issue. If the ListView was displayed and had no contents, it was set to a default height (showing the empty space). If I moved away from this page and came back, the size was fine.
So my approach was to bind the ListView's visibility to the presence (or lack of) something being bound to. Then when data came back, the ListView became visible and had the proper size.
<ListView x:Name="lvSettlements" ItemsSource="{Binding RecentSettlements}" VerticalOptions="FillAndExpand" RowHeight="25" IsVisible="{Binding RecentSettlements, Converter={StaticResource nullConverter}}">
...SNIP...
</ListView>
On Android, my table created in code was leaving gaps above and below it.
This fixed it...
HeightRequest="1000000"
I think I have the hackiest solution.
The accepted answer wasn't applicable to my situation, where my ListView might be longer then the length of the display, hence it needs be placed within a ScrollView, which brings back the empty space.
They way I solved this, was to have top level StackLayout and then place the ListView in an immediate ScrollView, like the following XAML:
<?xml version="1.0" encoding="utf-8" ?>
<local:ContentPage>
<StackLayout x:Name="entirePage">
<ScrollView VerticalOptions="FillAndExpand"
Orientation="Vertical">
<ListView x:Name="listView" ItemsSource="{Binding Items}"
Margin="0">
<!-- ListView Stuff -->
</ListView>
</ScrollView>
</StackLayout><!--entirePage-->
</local:ContentPage >