Xamarin iOS application infinitely suspended when CollectionView.IsVisible = false on start up.
on Android, It works. However, on iOS, setting CollectionView.IsVisible = false resulted in application freezed.
<StackLayout
Margin="0,20,0,0">
<Button
HorizontalOptions="CenterAndExpand"
WidthRequest="100"
Clicked="Button_Clicked"
Text="Click Me"/>
<CollectionView
x:Name="Collection"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Items}"
SelectionMode="Single"
IsVisible="False">
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="4"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Margin="10,10,10,10">
<Image
WidthRequest="50"
HeightRequest="50"
Source="{local:ImageResource CollectionView.Image.png}"/>
<Label
Text="{Binding Title}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Here is reproducible project.
There is a workaround to solve this for iOS, you could set Visiable of CollectionView after Layout is initialized.
For example, remove IsVisible="False" from Xaml, then set it in ContentPage.cs in OnAppearing method:
protected override void OnAppearing()
{
base.OnAppearing();
Collection.IsVisible = false;
}
The effect:
Related
I have a content page with the following data template for RadioButtons:
<DataTemplate x:Key="RadioTemplate">
<StackLayout Padding="0,2,0,0">
<StackLayout
Orientation="Horizontal" >
<Label
Text="{Binding Title}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<StackLayout
RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Margin="10,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged"
FlowDirection="LeftToRight">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
It is called from a collection view on the content page:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label
Text="Work Order Request"
HorizontalTextAlignment="Start"
HorizontalOptions="StartAndExpand"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="Large"/>
<Button Text="Back" Clicked="BackButton_Clicked" HorizontalOptions="End" />
</StackLayout>
<Label
Padding="0,2,0,0"
Text="Verify your data before submitting"
HorizontalTextAlignment="Start"
TextColor="White"
FontSize="Micro" />
</StackLayout>
</Frame>
<Label
Margin="10,0,0,0"
Grid.Column="0"
Text="SOME TEXT HERE"
HorizontalOptions="Start"
FontSize="Micro"/>
<CollectionView
ItemsSource="{Binding MainPageView.Fields}"
EmptyView="No fields for this screen."
ItemTemplate="{StaticResource templateSelector}"
SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>
<StackLayout Margin="10,0,10,5" Orientation="Vertical">
<Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
<validator:ErrorSummaryView
IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
Margin="0,0,0,5"/>
</StackLayout>
</StackLayout>
If I have the App.xaml.cs instantiate the view directly, it displays fine:
public App()
{
InitializeComponent();
MainPage = new MainPage(false);
}
However, if I change and add a landing page that has a button to redirect to that page:
<?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="Test.Ui.Dashboard">
<ContentPage.Content>
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<StackLayout>
<Label
Text="TEST DASHBOARD"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="Large"/>
<Label
Padding="0,2,0,0"
Text="Sample UI/UX Pages"
HorizontalTextAlignment="Start"
TextColor="White"
FontSize="Micro" />
</StackLayout>
</Frame>
<StackLayout Orientation="Horizontal">
<Button Text="Work Order" Clicked="WorkOrder_Clicked" HorizontalOptions="FillAndExpand" BackgroundColor="#2196F3" TextColor="White" FontAttributes="Bold" FontSize="Large" CornerRadius="10"/>
<Button Text="Randomized Field Order" Clicked="Randomized_Clicked" HorizontalOptions="FillAndExpand" BackgroundColor="#2196F3" TextColor="White" FontAttributes="Bold" FontSize="Large" CornerRadius="10" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Test.Ui
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Dashboard : ContentPage
{
public Dashboard()
{
InitializeComponent();
}
private void WorkOrder_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new MainPage(false));
}
private void Randomized_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new MainPage(true));
}
}
}
and change App.xaml.cs to
using Xamarin.Forms;
namespace Test.Ui
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage( new Dashboard());
}
protected override void OnStart()
{
// load up the style xaml files here
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
Now, when I click the Work Order button, the radio options aren't displayed. If I change the stacklayout for the radio options to veritical orientation, they do. So the data is there but the view isn't able to render when I'm in a NavigationPage. Thoughts? I'd really like to have my radio buttons be horizontal when there aren't many choices.
Thanks
In my data template, I had to add an explicit WidthRequest = 150
<StackLayout
RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Margin="10,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
VerticalOptions="Center"
IsClippedToBounds="False"
HeightRequest="27"
WidthRequest="150"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I guess the StackLayout wasn't able to calculate how wide to make each one. Will see if I can figure out a different way to do it so it adjusts for the width of the content.
collectionview contains a label and StackLayout and its contents. The label is showing but StackLayout contents not showing and only if maximizes the windows it appears in UWP.this strange behaviour only occurring in uwp, not happening with ios or android. used xamarin.forms 5.0.0.2337
<CollectionView
ItemsSource="{Binding Details}"
SelectionMode="None"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="20,0"
RowDefinitions="auto,auto">
<Label Text="DateTime" IsVisible="{Binding IsDateVisible}" />
<StackLayout Orientation="Horizontal"
Grid.Row="1"
IsVisible="{Binding IsDateVisible}">
<DatePicker Date="{Binding DateValue, Mode=TwoWay}"
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}"
/>
<TimePicker Time="{Binding TimeValue, Mode=TwoWay}"
IsVisible="{Binding IsDateVisible}"
HorizontalOptions="Start"
/>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
StackLayout and its contents not showing inside a collectionview if maximizes the windows it appears in UWP with Xamarin.Forms
It looks know issue for CollectionView, please vote up this report and Keep an eye on the following update, currently the workaround is use listview to replace.
<ListView SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20,0" RowDefinitions="auto,auto">
<Label IsVisible="true" Text="DateTime" />
<StackLayout
Grid.Row="1"
IsVisible="true"
Orientation="Horizontal">
<DatePicker
Format="MMMM dd, yy"
HorizontalOptions="Start"
MaximumDate="{x:Static sys:DateTime.Now}" />
<TimePicker HorizontalOptions="Start" IsVisible="true" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Latest Xamarin on Mac as of writing:
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Padding="10">
<Label Text="{Binding Summary}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="Medium" />
<Label Text="{Binding Reporter}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}" FontSize="Micro" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="{Binding Start}" FontSize="Medium" VerticalOptions="Center"/>
<Switch IsToggled="{Binding Result}" Toggled="Handle_Toggled" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
How do I get the bound item to a Switch control in a ListView. The item is in the list of items bound to the ListView, provided by the ViewModel. You can 'switch' the item's toggle without selecting the row.
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
// In this event handler, how do I get the bound item from the ListView??
}
Normally, what you'd need to do, is to react to the changes of property "Result" in your item class, and keep your logic out of the Page class.
If you need to handle in the event, you can do it this way:
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
var switch = sender as Switch;
var item = switch.Parent.BindingContext as ItemViewModel;
}
Replace ItemViewModel by your item's type.
This question already has an answer here:
Xamarin forms: Image is not showing in perfect circle
(1 answer)
Closed 4 years ago.
For the circle images, I am using Xam.Plugins.Forms.ImageCircle nuget package in my project, which is working fine in android and windows but showing an oval shape in IOS, screenshot adding below.
Added ImageCircleRenderer.Init(); in AppDelegate.cs
xmlns namespace added:
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
<ListView x:Name="MyTweetsTopics"
ItemsSource="{Binding AllItems,Mode=TwoWay}"
IsPullToRefreshEnabled="True"
HasUnevenRows="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="5"
Padding="5"
Orientation="Horizontal">
<controls:CircleImage
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="50"
BorderColor="#1C7DB4"
Aspect="AspectFill"
BorderThickness="2"
HeightRequest="50">
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding isProfileImageNull}" Value="True">
<Setter Property="Source" Value="dummy_profile.jpg"/>
</DataTrigger>
<DataTrigger TargetType="Image" Binding="{Binding isProfileImageNull}" Value="False">
<Setter Property="Source" Value="{Binding thumbnailImageUrl, Converter={StaticResource urlJoinConverter}}"/>
</DataTrigger>
</Image.Triggers>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="ShowTopicsProfile"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</controls:CircleImage>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Vertical">
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal">
<Label
Text="{Binding pageTitle}"
x:Name="pageTitle"
Font="Bold,17"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Center"/>
<StackLayout
Margin="0,10,0,0"
HorizontalOptions="EndAndExpand"
Orientation="Horizontal"
VerticalOptions="CenterAndExpand">
<Image
WidthRequest="20"
HeightRequest="20"
Margin="0,-5,0,0"
VerticalOptions="Center"
Source="ic_action_time.png"/>
<Label
Text="{Binding pageUpdatedDate, Converter={StaticResource cnvDateTimeConverter}}"
x:Name="tweetedTime"
Font="10"
Margin="-5,-5,0,0"
TextColor="Black"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Label
Text="{Binding modifier.fullname, StringFormat='Last modified by {0:F0}'}"
Font="10"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Label/>
</ListView.Footer>
</ListView>
Why in IOS only it is not working?
Thanks in advance
Could you give me your xml (listview) code so that I will able to solve your problem or if want to show Image from Cache you need to use FFImageLoading dll, it is available on nuget.
class CircleImage : CachedImage
{
public CircleImage()
{
LoadingPlaceholder = Glyphs.ImagePlaceholder;
ErrorPlaceholder = Glyphs.ImagePlaceholder;
DownsampleToViewSize = true;
Transformations = new List<FFImageLoading.Work.ITransformation>();
Transformations.Add(new CircleTransformation());
}
}
Use above control.
Im trying to show an Overlay with an activityIndicator by clicking an custom sync button in the toolbar. The Button makes an API call to get datas from my backend.
Im using Xamarin forms with the Prism Plugin
This is my MasterDetailPage Xaml
<MasterDetailPage.ToolbarItems >
<ToolbarItem Command="{Binding SyncCommand}" Icon="sync32.png">
</ToolbarItem>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master >
<ContentPage Title="Default"
BackgroundColor="Gray">
<StackLayout Padding="0,60,0,0">
<ListView x:Name="Menu"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"
ItemsSource="{Binding Items}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout MinimumHeightRequest="48"
Orientation="Horizontal"
Spacing="40">
<Label Text="{Binding TitleKey}"
TextColor="White"
FontSize="20"
VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<behaviors:ListViewItemSelectedBehavior Command="{Binding ChangePageCommand }"/>
</ListView.Behaviors>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<AbsoluteLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<ActivityIndicator
Color="#69d2e7"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
/>
</AbsoluteLayout>
</ContentPage>
</MasterDetailPage.Detail>
This is my MasterDetail xaml cs
public SMasterDetail()
{
InitializeComponent();
Menu.ItemSelected += async (s, e) =>
{
Menu.SelectedItem = null;
IsPresented = false;
await Task.Delay(200);
};
}
When im clicking on The Sync button in the toolbar the ViewModel gets the datas from the backend and populate an ObservableCollection. Im setting IsBusy to true and after that to false.
But I cant see the overlay. Is their any solution how to show the activityIndicator overlay on each page by clicking the sync button?