I want that when my image is loading then GIF image should be displayed but when image loading is completed then GIF should disappear.
But I don't know how to do. Please tell me the step by step procedure.
imageWave1.IsVisible = !imageWave1.IsLoading;
stackBehindImage.IsVisible = true;
imageWave1.IsVisible = true;
stackFrontImage.IsVisible = false;
Second Image is displaying where GIF should be displayed first then until the second image is Loading
<StackLayout x:Name="stackFrontImage" Padding="0" HeightRequest="100" Spacing="0" Margin="10" IsVisible="True">
<ffimageloading:SvgCachedImage HeightRequest="100"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Aspect="AspectFill"
x:Name="imageWave"
Source="outlet.gif"
IsVisible="True"
Margin="0"/>
</StackLayout>
<StackLayout x:Name="stackBehindImage" HeightRequest="100" Padding="0" Spacing="0" Margin="10" IsVisible="False">
<ffimageloading:SvgCachedImage x:Name="imageWave1"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Aspect="AspectFill"
HeightRequest="50"
Margin="0"/>
This is my XAML code.
I have written all these things but my both images(GIF and PNG) displaying together. please correct me what I am doing wrong here.
//This should be displayed when my imagewave1.source is Loading.
<StackLayout x:Name="stackFrontImage" Padding="0" HeightRequest="100" Spacing="0" Margin="10" IsVisible="True">
<ffimageloading:SvgCachedImage HeightRequest="100"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Aspect="AspectFill"
x:Name="imageWave"
Source="outlet.gif"
IsVisible="True"
Margin="0"
LoadingPlaceholder="imageWave1"
Finish="ImageWave_Finish"
DownloadStarted="ImageWave_DownloadStarted"/>
</StackLayout>
//This Should be displayed after loading itself and then GIF should disappear.
<StackLayout x:Name="stackBehindImage" HeightRequest="100" Padding="0" Spacing="0" Margin="10" IsVisible="False">
<ffimageloading:SvgCachedImage x:Name="imageWave1"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Aspect="AspectFill"
HeightRequest="100"
Margin="0"
Source="http://192.168.0.110/repos/xformsexperimental/RestApiTrain/images/mcdonalds.png"
LoadingDelay="5"/>
private void ImageWave_Finish(object sender, FFImageLoading.Forms.CachedImageEvents.FinishEventArgs e)
{
stackBehindImage.IsVisible = true;
}
private void ImageWave_DownloadStarted(object sender, FFImageLoading.Forms.CachedImageEvents.DownloadStartedEventArgs e)
{
stackBehindImage.IsVisible = false;
}
Here is the screenshot kindly check.
There is an property called LoadingPlaceholder you can use during the loading time of the image.
There are two events called DownloadStarted and Finish Occurs before/after every image loading. You can use these two events to control the visible ability of your second image.
For example:
<ffimageloadingsvg:SvgCachedImage HeightRequest="100"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Aspect="AspectFill"
x:Name="imageWave"
Source="outlet.gif"
IsVisible="True"
Margin="0"
LoadingPlaceholder="imageWave1"
Finish="ImageWave_Finish"
DownloadStarted="ImageWave_DownloadStarted"
/>
In code behind:
private void ImageWave_Finish(object sender, FFImageLoading.Forms.CachedImageEvents.FinishEventArgs e)
{
stackFrontImage.IsVisible = false;
}
private void ImageWave_DownloadStarted(object sender, FFImageLoading.Forms.CachedImageEvents.DownloadStartedEventArgs e)
{
stackFrontImage.IsVisible = true;
}
You should use like this:
<ffimageloading:CachedImage HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
LoadingPlaceholder = "loading.png"
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
</ffimageloading:CachedImage>
In this LoadingPlaceholder is what you can show the loading image, once the Source image is loaded it will automatically disappear.
try this for loading indicator
<Image x:Name="img" Aspect="AspectFill" />
<ActivityIndicator BindingContext="{x:Reference img}" IsRunning="{Binding IsLoading}" />
Related
I am trying to disable scrolling in my collection view. The reason why I want to do that is there is a scroll view already in my XAML code. When I try to scroll all page elements on the page, collection view elements are also scrolled themselves but I don't want that.
<ScrollView>
<StackLayout Padding="20" Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
<CollectionView x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
Having two scrolls on the same page is not the correct way.
Also if you just want to place items above/below your collectionView use the Header/Footer properties then!!
For instance, for the current design, your CollectionView could look something like below and work as you want it to.
<CollectionView Padding="20" x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.Header>
<StackLayout Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Note: you might have to adjust the margin and padding properties for it to look the exact same. My code is just an example.
For more information on CollectionView check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/
You can use InputTransparent.
In your case what I would do would be to wrap the CollectionView in a <ContentView> as:
<ContentView InputTransparent="True"
x:Name="content">
<CollectionView ItemsSource="{Binding Items}"...>
...
</CollectionView>
</ContentView>
Create a scroll event to your scroll view:
<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>
Then, with this event, make sure that the InputTransparent switches depending on the scroll position:
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = sender as ScrollView;
// Get the height of your scroll view
var contentSize = scrollView.ContentSize.Height;
// Get the max position of the scrollview
var maxPos = contentSize - scrollView.Height;
// Compare it to the current position
if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
{
// Switch input transparent value
content.InputTransparent = false;
}
else if (Convert.ToInt16(e.ScrollY) == 0)
{
content.InputTransparent = true;
}
}
This is perfectly fine to use two scrollable controls on the same page for what you want to do. And I don't think <CollectionView.Header> would give you the result you want.
I hope it was helpful! 🙂
I have a CollectionView on my project with the most stable version of Xamarin Forms that supports CollectionView (4.3.0.908675) with the following code below.
<CollectionView x:Name="ScrollButtons"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
HeightRequest="90"
SelectionMode="Single"
SelectionChangedCommand="{Binding MenuItemSelectedCommand}"
BackgroundColor="{DynamicResource BackgroundColorShell}">
<CollectionView.Footer>
<!--HACK to keep showing last item on CollectionView -->
<BoxView BackgroundColor="Transparent" HeightRequest="90" WidthRequest="50"/>
</CollectionView.Footer>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="1" HorizontalItemSpacing="5"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="90" HeightRequest="90" Padding="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
Grid.Row="0"
BorderColor="Black"
BackgroundColor="{Binding BackgroundColor}"
>
</Frame>
<StackLayout Padding="5" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding Text}"
TextColor="{Binding TextColor}"
LineBreakMode="WordWrap"
FontSize="{StaticResource BaseFontSize}"
x:Name="tileLabel">
</Label>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Image Source="{Binding SecondaryIconSource}"
HorizontalOptions="Start"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
IsVisible="{Binding IsSecondaryIconVisible}"
/>
<Image Source= "{Binding ImageIcon}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
x:Name="tileIcon">
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
OnMenuSelectedItemCommand
private async Task OnMenuItemSelected()
{
Console.WriteLine("OnMenuItemSelected");
await NavigationService.NavigateAsync($"{SelectedMenuItem.NavigationPath}");
HighlightedMenuItem = SelectedMenuItem;
SelectedMenuItem = null;
}
The CollectionView consists of a collection of BottomMenuItem class which inherits from BindableBase for Prism. My goal is to change the properties of a BottomMenuItem as its selected on the CollectionView. However, the collection view is acting weird and it only changes based on BottomMenuItem that is not currently in the screen. As shown below, it only works on the 5th item and beyond, items that are not initially loaded on the screen.
Any help would be greatly appreciated. Thank you!
I figured it out. The problem is that my code relies on the scrolling to an item in order for a selectedItem to be highlighted. I made an assumption that the bug is based on item cells that are initially loaded are not working but in reality it was items that doesn't need scrolling.
Based on my OnMenuItemSelected, I pass the highlighted item to the next page. Handle that logic with the OnNavigatingTo logic below.
public override async void OnNavigatingTo(INavigationParameters parameters)
{
base.OnNavigatingTo(parameters);
Console.WriteLine("OnNavigatingTo");
HighlightedMenuItem = parameters.GetValue<BottomMenuItem>("highlightedMenuItem");
foreach (var item in MenuItems)
{
item.IsActive = false;
}
if (HighlightedMenuItem != null)
{
Console.WriteLine("OnNavigatingTo HighlightedItem - {0}", HighlightedMenuItem.Text);
HighlightedMenuItem.IsActive = true;
}
}
I have face issue with grouped listview in xamarin forms wpf application. I have used group listview in one of the pages in the application, where if I click outside of the grouped listview, the application is crashed. Please suggest any idea to fix this crash. Thank you.
exception : An unhandled exception of type 'System.ArgumentOutOfRangeException' occurred in mscorlib.dll
Index was out of range. Must be non-negative and less than the size of the collection.
Image :
SampleCode :
Xaml :
<StackLayout HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">
<ListView x:Name="GroupedViewM" IsGroupingEnabled="true" ItemsSource="{Binding All}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemTapped="SelectedUserorChannel">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0,0,0,10">
<Label Text="{Binding Title}" TextColor="#e0e2e5" FontSize="22" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<Image x:Name="AddButton" IsVisible="{Binding AddChannelBtnVisibility}" Source="add.png" HeightRequest="20" WidthRequest="20" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" Margin="0,0,10,0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="CreateNewChannel"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="{Binding ProfileImage}" HorizontalOptions="Start" VerticalOptions="FillAndExpand" HeightRequest="20" WidthRequest="20"/>
<Label Text="{Binding FirstName}" TextColor="#e0e2e5" FontSize="Small" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand"/>
<Frame CornerRadius="5" BackgroundColor="#5e997c" Padding="8,0" IsVisible="{Binding MessageCountVisibility}" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand">
<Label Text="{Binding MessageCount}" TextColor="White" FontSize="15" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Xaml.cs
private void SelectedUserorChannel(object sender, ItemTappedEventArgs e)
{
try
{
var userModel = ((ListView)sender).SelectedItem as UserModel;
OpenUserOrGroupChat(userModel);
((ListView)sender).SelectedItem = null;
}
catch (Exception exception)
{
LoggingManager.Error(exception);
}
}
private async void CreateNewChannel(object sender, EventArgs e)
{
try
{
await Helper.NavigateToAsync(new CreateChannelView());
}
catch (Exception exception)
{
LoggingManager.Error(exception);
}
}`
Probably you are casting null with some datatype say UserModel.
i would suggest you to refactor your code with a null check in place
{
if (((ListView)sender).SelectedItem != null && ((ListView)sender).SelectedItem as UserModel userModel)
{
OpenUserOrGroupChat(userModel);
((ListView)sender).SelectedItem = null;
}
}
Try this setting Footer property of this ListView as:
<ListView x:Name="GroupedViewM" IsGroupingEnabled="true"
ItemsSource="{Binding All}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ItemTapped="SelectedUserorChannel"
Footer="">
</ListView>
I just can't understand why the background for my side menu on xamarin forms won't render the same on my xamarin.ios. Yet in other parts of the project my list views render and look the same when I use transparent backgrounds, I even tried copying and pasting the xaml code from other parts of the project where it does render the same, but still it does not work. In case anyone's wondering the side menu on ios was requested by the client.
Attached below I have 2 images showing how the side menu renders differently on the 2 platforms
Here's the Xaml code I'm using for my Side Menu:
<MasterDetailPage.Master>
<StackLayout Orientation="Vertical" BackgroundColor="Transparent" Spacing="0">
<StackLayout
HorizontalOptions="Fill"
Orientation="Horizontal"
VerticalOptions="Fill" BackgroundColor="Black" Padding="50, 50, 50, 50">
<StackLayout HorizontalOptions="Center" Orientation="Vertical">
<ffimageloading:CachedImage x:Name="ProfilePictureCircleImage"
LoadingPlaceholder="profile_image_placeholder.png"
ErrorPlaceholder="profile_image_placeholder.png"
DownsampleToViewSize="true"
FadeAnimationEnabled="true"
HeightRequest="65"
WidthRequest="65">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</StackLayout>
<StackLayout
HorizontalOptions="CenterAndExpand"
Orientation="Vertical"
VerticalOptions="CenterAndExpand">
<Label
x:Name="FullNameLabel"
FontSize="18"
HorizontalOptions="Center"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
<BoxView HeightRequest="2" BackgroundColor="#D90B31"/>
<ListView
x:Name="NavigationMenuItems"
ItemSelected="OnMenuItemSelected"
BackgroundColor="{StaticResource TileColour}"
RowHeight="60"
SeparatorVisibility="None"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for menu items -->
<StackLayout
Padding="20,10,0,10"
Orientation="Horizontal"
Spacing="20"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<local:TintedCachedImage TintColor="{StaticResource SideMenuIconColor}"
Source="{Binding Icon}"
VerticalOptions="Center"
DownsampleToViewSize="true"
HeightRequest="19"
WidthRequest="19"/>
<Label
FontSize="15"
Text="{Binding Title}"
TextColor="{StaticResource SideMenuTextColor}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage />
</MasterDetailPage.Detail>
above are pictures illustrating how it looks across the 2 platforms.
Found the solution to this question on another stackoverflow thread I had to use a custom renderer:
public class CustomSideMenuRenderer: TabletMasterDetailRenderer
{
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
var master = ViewControllers[0];
master.View.BackgroundColor = UIColor.Clear;
var detail = ViewController.ChildViewControllers[1];
}
}
https://www.nuget.org/packages/HorizontalListView1.1/
I used the above link and implemented Horizontal List. List is coming, it's scrolling horizontally. But, for Item click, I used two properties:
SelectedItem
SelectedItemChanged
But, still I did not get that how to do Item Click Event in this.
See the below code:
XAML:
<ScrollView Orientation="Horizontal" ><StackLayout Orientation="Horizontal">
<Controls:HorizontalListView x:Name="packages_listname" ListOrientation="Horizontal" >
<Controls:HorizontalListView.ItemTemplate SelectedItemChanged="Item_Changes">
<DataTemplate>
<Grid Grid.ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Orientation="Horizontal" Grid.Row="0" BackgroundColor="#282C2B" HeightRequest="60" Spacing="0" Padding="0" Margin="0">
<Label Text="{Binding Package_Name}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="White" Margin="0"/>
</StackLayout>
</Grid>
</DataTemplate>
</Controls:HorizontalListView.ItemTemplate>
</Controls:HorizontalListView>
</StackLayout>
</ScrollView>
</StackLayout>
Code.Cs:
packages_listname.ItemsSource = packageslist;
public void Item_Changes(object sender, EventArgs e){
// var obj = ((HorizontalListView)sender).SelectedItem as PackagesModelClass;
var obj = packages_listname.SelectedItem as PackagesModelClass;
switch (obj.Package_Name)
{
case "Corporate":
list_of_corporate.ItemsSource = GetData("Corporate");
break;
case "ValueAddGrid":
list_of_corporate.ItemsSource = GetData("ValueAddGrid");
break;
case "UtilityGrid":
list_of_corporate.ItemsSource = GetData("UtilityGrid");
break;
}
}