RadioButtons and CheckBoxes not working properly on iOS and UWP - ios

I am working on a cross platform app using Xamarin in Visual Studio 2015. I am using XLabs.Forms v2.3.0- pre 05 and I am having problems with radio buttons and checkboxes.
Right now the checkboxes work fine on UWP but they won't show on iOS.
The radio buttons, on UWP won't work at all while on iOS only the texts gets displayed
See pictures below.
This is my code for checkboxes:
<ListView x:Name="lv_ReportQuestions">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Orientation="Vertical"
>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout WidthRequest="{Binding DisplayWidth}">
<Label HorizontalOptions="FillAndExpand" Text="{Binding ItemName}" VerticalOptions="Center" LineBreakMode="WordWrap"/>
</StackLayout>
<controls:CheckBox DefaultText="" WidthRequest="40" IsEnabled="false" IsVisible="true" Checked="true" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<Label HorizontalOptions="FillAndExpand" Text="{Binding SubText}" VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is my code for radio buttons:
<Label Text="Radio Buttons"/>
<Frame
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
OutlineColor="#000000"
>
<controls:BindableRadioGroup x:Name="ansPicker"
IsVisible="true"/>
</Frame>
ansPicker.ItemsSource = new[]
{
"Red",
"Blue",
"Green",
"Yellow",
"Orange"
};
I have tried to follow other possible fixes, but nothing worked for me.

Xamarin.Forms does not define any CheckBox control or radio button. You can use a Switch that should do what you expect. or use library such as this

Related

.NET MAUI on iOS: Image is not displayed in the list cell

In my mobile application, there's declared a list with images:
<ListView ItemsSource="{Binding PhotosCollection}"
SelectionMode="Single"
VerticalOptions="FillAndExpand"
SelectedItem="{Binding SelectedPhotoDocument}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="64" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Grid.Column="0"
Source="{Binding ThumbnailImageSource}"
HorizontalOptions="Start"
VerticalOptions="Center"
Aspect="AspectFit" />
<Label Grid.Column="1"
Grid.RowSpan="2"
Text="{Binding Description}"
FontAttributes="Bold"
HorizontalOptions="Start"
VerticalOptions="Center"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This list works perfectly on Android platform and displays images along with descriptions. But on iOS platform thumbnails are not being displayed. Only descriptions are shown.
How can I overcome this issue?
To fix this issue to get mobile app working as well as on iOS and on Android, I used ImageCell instead of Image and Label tags in the ListView data template declaration.
<ListView
ItemsSource="{Binding PhotosCollection}"
SelectionMode="Single"
VerticalOptions="FillAndExpand"
SelectedItem="{Binding SelectedPhotoDocument}">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell
ImageSource="{Binding ThumbnailImageSource}"
Text="{Binding Description}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Xamarin iOS Button Click when keyboard open

I have a basic Microsoft.UI.Xaml.Controls.Grid with a text field and a button in it.
XAML:
<Grid Margin="16"
CornerRadius="12"
Background="{StaticResource Color08Brush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
PlaceholderText="Write a messageā€¦"
Margin="12,12,4,12"
MaxHeight="92"
TextWrapping="Wrap"
Text="{Binding [Input], Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource ChatTextBoxStyle}" />
<Button Grid.Column="1"
Command="{Binding [SendMessage]}"
Style="{StaticResource EllipseButtonStyle}"
Background="{StaticResource Color11Brush}"
Width="44"
Height="44"
Margin="0,0,12,0"
IsTabStop="False">
<u:PathControl Style="{StaticResource ForwardArrowPathStyle}"
Width="8" />
</Button>
</Grid>
Everything works in Android. Having issues in iOS. When in the TextBox, the iOS keyboard opens as expected. You type some text and hit the Button to send the message. However, this merely dismisses the iOS keyboard and doesn't fire SendMessage
Tried using ios:VisualElement.CanBecomeFirstResponder="True" but same result on button click with keyboard open in iOS.
Thanks for any help!

Why does my page content start off the screen then adjust down?

I experience this issue only my Xamarin iOS project. The Android version works correctly.
I have a standard ContentPage that is pushed via PushAsync. When the page loads, the content loads off the screen then (it seems) after binding is finished moves down the page. I have attached a screen where it shows loading off the screen and one where it re-adjusts.
Content off the screen
After binding
XAML File
<ContentPage.Content>
<AbsoluteLayout>
<Frame Padding="10"
Margin="20, 20, 20, 20"
BackgroundColor="AliceBlue"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="SizeProportional">
<StackLayout Margin="10">
<Label Text="{Binding OutreachTitle}"
FontSize="Title"
TextColor="{StaticResource PrimaryTextColor}"
HorizontalOptions="Center" />
<controls:HorizontalRuleControl RuleColor="{StaticResource SecondaryColor}" />
<Label Text="{Binding OutreachText}"
Margin="0, 10, 0, 0"
TextColor="{StaticResource PrimaryTextColor}"
VerticalOptions="End"/>
</StackLayout>
</Frame>
</AbsoluteLayout>
</ContentPage.Content>
I did not reproduced the problem on my side. While I would recommend you to use StackLayout instead of AbsoluteLayout.
The problem is probably caused by resize of View in ContentPage, when you set SizeProportional of AbsoluteLayout, the size will following the changing of the View and that would cause the content loads off the screen:
<StackLayout>
<Frame Padding="10"
Margin="20, 20, 20, 20"
BackgroundColor="AliceBlue"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Margin="10">
<Label Text="{Binding OutreachTitle}"
FontSize="Title"
TextColor="Yellow"
HorizontalOptions="Center" />
<Label Text="{Binding OutreachText}"
Margin="0, 10, 0, 0"
TextColor="Green"
VerticalOptions="End"/>
</StackLayout>
</Frame>
</StackLayout>

Xamarin.Forms AbsoluteLayout issue on iOS

I'm new with xamarin and I'm trying to use a searchbar with a result listview (which is hidden) on top of a main listview (ie: mobile facebook friend search)
On iOS I'm not being able to tap on the main listview because the result listview is always on top of the other one even if it's not visible.
Here is the code:
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Padding="0,50,0,0">
<StackLayout Padding="20,0,0,10">
<Label Text="{Binding SelectedAddressString, StringFormat='BCLs near {0}'}" />
</StackLayout>
<ListView x:Name="iOSlstBCLs" ItemsSource="{Binding BCLList}" IsPullToRefreshEnabled="true" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Fill" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,1">
<SearchBar Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<ListView IsVisible="{Binding IsSuggestionListVisible, Mode=OneWay}" ItemsSource="{Binding SuggestionList}" SelectedItem="{Binding SelectedAddress}" VerticalOptions="Fill" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,AutoSize,AutoSize" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding formatted_address}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</AbsoluteLayout>
Any ideas?
From my experience, you should never use an Absolute Layout if at all possible. It seems like it would be better to use a Stack and place both of your other stacks within that. Then set the visibility as needed. I am not positive, but I am guessing that the Absolute Layout is messing you up.

Autocompletebox in wp7.5 toolkit shows wrongly

I am using autocompletebox toolkit from windowsphone7.5 version. It works well in wp7.1 toolkit.
If I use autocompletion with inner control margin it's not worked properly, it shows the result on the top,
Here I attached the autocompletion error screenshot.
This is the code :
<Grid Grid.Row="1" Height="76" VerticalAlignment="Top">
<toolkit:AutoCompleteBox VerticalAlignment="Bottom" Width="400" ValueMemberBinding="{Binding Title}" HorizontalAlignment="Left" Grid.Row="0" x:Name="acBox" Margin="10,0,10,0" ItemsSource="{Binding CategoryListitems}">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
</Grid>

Resources