I have a stepper and i want to add new entry field when the value increment or delete entry on value decrement , i manged to do that but the UI won't refresh directly after the value of the stepper change (i need to click on other UI element first) then the fields will appear , and after clicking in other UI element the stepper will work properly (adding and deleting functionality) which i don't know why it's happening ?!! .
EDIT :
It's look like the problem is with having scroll view .. if i remove it the new fields will added or deleted directly .. but still don't know why .
The xaml page
<ScrollView>
<StackLayout x:Name="StackLayout">
<Label Text="عدد العناصر المراد اضافتها (اقصى عدد في المرة الواحدة 30)"></Label>
<Stepper Maximum="30"
Minimum="2"
Increment="1"
ValueChanged="Stepper_OnValueChanged"
Value="2"></Stepper>
<StackLayout x:Name="EntryStackLayout">
<Entry></Entry>
<Entry ></Entry>
</StackLayout>
</StackLayout>
</ScrollView>
Code Behind
public partial class AddNewListOfItemsPage : ContentPage
{
public AddNewListOfItemsPage ()
{
InitializeComponent();
}
private void Stepper_OnValueChanged(object sender, ValueChangedEventArgs e)
{
if (e.NewValue > e.OldValue)
{
EntryStackLayout.Children.Add(new Entry());
}
else
{
var childCount = EntryStackLayout.Children.Count;
EntryStackLayout.Children.RemoveAt(childCount - 1);
}
}
}
Ok i found that adding a stackLayout before the scrollView fix the problem
<StackLayout>
<ScrollView>
<StackLayout x:Name="StackLayout">
<Label Text="عدد العناصر المراد اضافتها (اقصى عدد في المرة الواحدة 30)"></Label>
<Stepper Maximum="30"
Minimum="2"
Increment="1"
ValueChanged="Stepper_OnValueChanged"
Value="2"></Stepper>
<StackLayout x:Name="EntryStackLayout">
<Entry></Entry>
<Entry ></Entry>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
I had a similar problem. Size of elements deep inside ScrollView was not refreshed after layout change (on Android < 4.3).
Specifying height of ScrollView helped (specifying either one of the following for ScrollView in XAML helped):
VerticalOptions="FillAndExpand"
HeightRequest="100"
Related
Right now my ContentView (acts like a pop up window) stacks on top of my grid, see code below:
<StackLayout>
<ContentView>...</>
<StackLayout>
<Grid>...</>
</StackLayout>
</StackLayout>
The grid is a form, so when I press a button in my form, I want a new pop up window (the contentview) to be above the grid, in the center of the screen. The idea is that you can still see some of the form behind the contentview.
How do I put contentview in the front and not stacked on top of my grid?
Here's my contentview
<ContentView x:Name="popupAddDetails" AbsoluteLayout.LayoutBounds="0,0,1,1"
VerticalOptions="Center" HorizontalOptions="Center">
PS: I'm new to this environment and still learning. Thankful for any help
I tried to make a stacklayout above my first stacklayout with my grid in it and then set vertical and horizontal attributes in my contentview to center. But it just stacked upon my inner stacklayout.
You could simply use Xamarin Community Toolkit Popup to make it.
First of all, add a new Nuget named Xamarin.CommunityToolkit to your project.
Then, create a popup page which will be shown when you click a button. This is much similar to creating a ContentPage.
<?xml version="1.0" encoding="UTF-8" ?>
<xct:Popup
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ContentDemo.CommunityPopupPage"
xmlns:xct="clr- namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit">
<StackLayout WidthRequest="200" HeightRequest="200"BackgroundColor="Red"HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="hello"/>
</StackLayout>
</xct:Popup>
The .cs may be something like this:
using Xamarin.CommunityToolkit.UI.Views;
namespace ContentDemo
{
public partial class CommunityPopupPage : Popup
{
public CommunityPopupPage()
{
this.Size = new Size(300, 300); //you could change the size of the popup
InitializeComponent();
}
}
}
Finally, you may want to open this popup page via a button clicked event. Don't forget to add this line:
using Xamarin.CommunityToolkit.Extensions;
void Button_Clicked(System.Object sender, System.EventArgs e)
{
App.Current.MainPage.Navigation.ShowPopup(new CommunityPopupPage());
}
I created this demo and it worked well. You could refer to Xamarin Community Toolkit Popup and Getting Started with the Xamarin Community Toolkit for more information.
====================update =====
2.Using outer layout as a Grid instead of a StackLayout might be an alternative. Just something like this:
<Grid x:Name="outerGrid" VerticalOptions="Center" > //this grid includes the grid and the contentview to be shown
<Grid x:Name="innerGrid">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
</Grid>
<ContentView>
... // design the content
<ContentView />
</Grid>
In this way, the ContentView will be placed above the innerGrid. But I prefer using a popup page.
Hope it works for you.
TLDR
CollectionView broken in iOS, cant find any solution online. Weak Google fu or just not seeing the answer.
The problem
I have a CollectionView (Lets call it A) that contains items that are only strings values for filtering on a different CollectionView (Lets call it B) containing results from selecting a filter option in CollectionView A.
I have 3 different filtering options: "All", "Close to you", "Online" in CollectionView A.
The problem is that on iOS when I select for example filter option "All" in CollectionView A for the first time on the page it does the filtering and shows the results in CollectionView B, when I choose for example filtering option "Online" in CollectionView A it filters and shows the results in CollectionView B.
But when I choose filtering option "All" for the second time in CollectionView A its not responding, no event triggers, no commands runs and its not disabled. It is only showing, but I cant do anything with it.
Expected result
Can reselect the previous item on iOS, in Android no problem.
Actual result
Cant reselect previous item on iOS, need to back to previous page in stack and then navigate back to page to reset filtering.
The xaml markup
This is the xaml markup for the CollectionView A as explained above, the only holding string values to filter on.
<CollectionView ItemsSource="{Binding FilterLocations}"
Grid.Row="2"
SelectedItem="{Binding SelectedFilterLocation}"
SelectionMode="Single"
HeightRequest="50">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="10" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<StackLayout xct:TouchEffect.NativeAnimation="True">
<Frame BorderColor="{StaticResource BorderColor}"
x:Name="subCategoryFrame"
Padding="14, 10">
<Label Text="{Binding .}"
x:Name="subCategoryName"
FontFamily="{StaticResource FontPoppinsLight}"
TextColor="{StaticResource PrimaryAlt}" />
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Header>
<BoxView WidthRequest="0"
HeightRequest="1"
BackgroundColor="Transparent" />
</CollectionView.Header>
<CollectionView.Footer>
<BoxView WidthRequest="{StaticResource NormalSpacingDouble}"
HeightRequest="1"
BackgroundColor="Transparent" />
</CollectionView.Footer>
</CollectionView>
The CollectionView A is in SelectionMode:Single, and the SelectedItem is bound to a ICommand on its bound ViewModel. And in the ViewModel the selection of a item in CollectionView A will trigger a filtering in CollectionView B
What I done so far
I set up so if a item in the CollectionView A is disabled it become Red, but it dont become Red.
I have tried to add a event in the Code behind, to try and set SelectedItem to null, but that back fired and just made all events go twice, one for selecting the item on the screen and second for altering the SelectedItem in the code behind.
Code:
private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (Device.RuntimePlatform == Device.iOS)
{
var collectionView = sender as CollectionView;
if (collectionView == null) return;
if (collectionView.SelectedItem != null)
{
collectionView.SelectedItem = null;
}
}
}
(I know it is a big no no to do logic stuff in the Code Behind that is not design logic, but I need to get this solved or have a quick and dirty fix because of time pressure.)
Sorry for the wall of text
Use a TapGestureRecognizer.
Below, MyItemCommand is defined in MyViewModel and {Binding .} refers to the item selected in ItemsSource.
<DataTemplate ...>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}},
Path=MyItemCommand}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
...
First Bind the collection view into the event selectionchange.
<CollectionView ItemsSource="{Binding FilterLocations}"
Grid.Row="2"
SelectedItem="{Binding SelectedFilterLocation}"
SelectionMode="Single"
HeightRequest="50"
SelectionChanged="collection_SelectionChanged">
then inside the event put selected item to null.
private async void collection_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
try
{
var Sender = sender as CollectionView;
if (Sender.SelectedItem == null)
return;
Sender.SelectedItem = null;
}
catch (Exception ex)
{
}
}
I have a webview When this webview is tapped I need to make visible of a button the problem Is Gesture recognition is not working
my Xaml
<customRenderer:CustomWebView Uri="{Binding SelectedJournal.Uri}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="CustomWebView" AbsoluteLayout.LayoutBounds="0,50,1,1" AbsoluteLayout.LayoutFlags="SizeProportional" >
<customRenderer:CustomWebView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped2" NumberOfTapsRequired="1" ></TapGestureRecognizer>
</customRenderer:CustomWebView.GestureRecognizers>
</customRenderer:CustomWebView>
<customRenderer:NavigationImageButton ItemTapped="FullScreenOnTapped" Source="full.jpg" AbsoluteLayout.LayoutBounds="0.5,1,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional" HeightRequest="60" WidthRequest="60" x:Name="FullScreenBtn" IsVisible="False" >
In the code behind i called like this
private void TapGestureRecognizer_OnTapped2(object sender, EventArgs e)
{
FullScreenBtn.IsVisible = true;
}
This should work but this is not working
also my custom rendering web view class
public class CustomWebView : WebView
{
public static readonly BindableProperty UriProperty = BindableProperty.Create<CustomWebView, string>(p => p.Uri, default(string));
public string Uri
{
get { return (string)GetValue(UriProperty); }
set { SetValue(UriProperty, value); }
}
}
How to Achive this
Instead of using the gesture recognizer on your webview, you can use the 'Focused' event of your view to display your button. You can do something like this:
var wb = new WebView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = "https://stackoverflow.com/questions/56320611/webview-gesturerecognition-not-working-in-xamarin-forms",
};
wb.Focused += (s, e) =>
{
//Handle your logic here!
wb.Unfocus();
};
Here, Unfocus() is used if you wish to implement your logic everytime the webview is tapped.
A WebView is used in my application to display formatted text. Tapping the text should open an editor to modify the text. The suggested Focused event works on Android but not iOS (as of iOS 15.0 simulator at least). I found the solution in the comments for https://bugzilla.xamarin.com/42/42596/bug.html#c4. Adding an empty label to the xaml as a transparent overlay of the WebView registers the tap event and enables the gesture recogniser.
<Grid HeightRequest="132">
<WebView Grid.Column="0" Grid.Row="0"
Source="{Binding FormattedDescription, Converter={tr:StringToWebViewSourceConverter}}"
HeightRequest="132"/>
<Label Grid.Column="0" Grid.Row="0" Text=""
HeightRequest="132" HorizontalOptions="Fill">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding EditDescriptionCommand}"/>
</Label.GestureRecognizers>
</Label>
</Grid>
I have a ListView in my XAML in which I show some data from my database, the problem is that in the meantime the ActivityIndicator show up as excpected, but when I set it to False, the content that is suppose to show up, doesn't. I don't know if I'm using the ActivityIndicator wrong, how I suppose to use it then?
XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage...">
<ActivityIndicator x:Name="load1" Color="Red" IsRunning="true" />
<ContentPage.Content>
<ListView x:Name="XPS" ItemTapped="OnItemSelected"
...
</ListView>
</ContentPage.Content>
</ContentPage>
CS:
load1.IsRunning=false;
It looks like you're using ContentPage incorrectly. That page only supports having 1 child element (named Content). You're trying to define 2 different Content on 1 ContentPage. Xamarin.Forms just throws away your ListView so it will never show up.
So now you might wonder... How is that thing even useful? Good question! When you need to put multiple Views in 1 ContentPage you need to use a Layout. Xamarin.Forms has a bunch of layouts available that all behave differently - see https://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/ for some more details there.
Let's check out some code.... (I haven't actually tested this, I'm typing it directly into here, so you might need to fix some things...)
An updated ContentPage XAML:
<ActivityIndicator x:Name="load1" Color="Red" IsRunning="true" />
<ContentPage.Content>
<StackLayout x:Name="Layout">
<ActivityIndicator x:Name="load1" Color="Read" IsRunning="true"/>
<ListView x:Name="XPS" ItemTapped="OnItemSelected" Opacity="0"
...
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Now for some Code Behind...
public void LoadYourStuff()
{
LoadSomeTotallyAwesomeData();
WriteSomeTotallyAwesomeDataIntoAFancyListView();
PerhapsDoMoreFancyThings();
Layout.Children.Remove(load1);
XPS.Opacity = 1.0;
}
in your xmal file put :
<ActivityIndicator x:Name="popupView" VerticalOptions="Center" HorizontalOptions="Center" Color="DarkBlue" IsRunning="True" IsVisible="false" IsEnabled="True" />
when need this in C# code :
popupView.IsVisible = true;
.
.
.
.
.
.
popupView.IsVisible = false;
I try to render a list of clickable items in a view. I would like to add a button with an image and a white border (the first one). I discovered that the buttons in my StackLayout/ViewCell can't render a border.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="*.PlacesPage"
Title="TEST">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Content>
<Grid>
<ListView x:Name="lvPlaces" ItemsSource="{Binding Places}" SeparatorColor="Gray" SeparatorVisibility="Default" RowHeight="120" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Button HorizontalOptions="Center" VerticalOptions="Center" BorderWidth="3" BorderColor="White" Text="IMG"></Button>
<Button Text="{Binding Name}" BorderWidth="0" FontSize="20" BackgroundColor="Transparent" Clicked="OnButtonClickedPlace"></Button>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ContentPage.Content>
I'm using Xamarin.Forms 2.3, and I was also trying to create a button, with no border radius, a background color set to white, and a border color & width, and none of the above answers worked for me.
Actually I still had to set the BorderRadius to 1 (my width was 2), AND add another workaround that I just cannot understand :
In my Android project, I added a Custom renderer, for Button, with nothing in it. Absolutely nothing.
So the behavior of Xamarin forms, is different on Android when you use the Default renderer, and when you use a custom renderer that inherits from the default renderer, and yet with no line of code in it.
My Renderer:
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(GenericButtonRenderer))]
namespace Express.CustomRenderers
{
public class GenericButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer
{
}
}
There seems to be a issue in Xamarin.Forms where Button borders don't show on Android when the ButtonRadius is 0. (It doesn't appear that this issue is fixed as of Xamarin.Forms v2.0.0.6482.) It's not ideal since it will slightly change the look of the button, but you can work around it by setting BorderRadius = 1 for just Android, or all platforms, giving a slightly perceptible rounding to the corners.
Workaround (code)
// HACK: fixes a bug where border doesn't work without a radius.
yourButton.BorderRadius = Device.OnPlatform<int>(iOS: 0, Android: 1, WinPhone: 0);
Workaround (XAML)
<Button
x:Name="YourButton"
Text="Some Button Text"
TextColor="Black"
Clicked="OnClickedDiscover"
BackgroundColor="Aqua"
BorderColor="Red"
BorderWidth="1">
<Button.BorderRadius>
<!-- HACK: fixes a bug where border doesn't work without a radius. -->
<OnPlatform x:TypeArguments="x:Int32">
<OnPlatform.Android>1</OnPlatform.Android>
</OnPlatform>
</Button.BorderRadius>
</Button>
Are you using Android? If yes, then:
On Android this property will not have an effect unless
VisualElement.BackgroundColor is set to a non-default color.
In Xamarin.Forms 2.5.0, the patch has been reverted :
"Revert "Fix border on android buttons (#941)" (#1192)"
You have to use a custom renderer for now...
This bug has been fixed in the last version of Xamarin Forms 2.4.0 :
> 36031 - "Button border not drawn on Android without a BorderRadius" (PR)
in Android project go to MainActivity and change it to be inhereted
from
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
to
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
now you won't have issue to use the Border
<Button Text="test" TextColor="White"
BackgroundColor="#FFA733" BorderRadius="15"
BorderColor="White" BorderWidth="2" HorizontalOptions="FillAndExpand" />
Got the some problem. I did two things to solve it:
I don't set background color to the buttons for Android (only for iOS)
<Setter Property="BackgroundColor">
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>Transparent</OnPlatform.iOS>
</OnPlatform>
</Setter>
Manually setting a background drawable to the buttons
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2px" android:color="#ffffff" />
</shape>
I found this solution, don't know why is working but it works.
In PCL
namespace xxx.Renderers
{
public class WhiteButton : Button
{
public WhiteButton()
{
}
}
}
Then you have to make the render in android and DO NOTHING
[assembly: ExportRenderer(typeof(WhiteButton), typeof(WhiteButtonRenderer))]
namespace xxxx.Droid.Renderers
{
public class WhiteButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var newElement = e.NewElement as WhiteButton;
if (newElement != null)
{
}
}
}
}
}
Then you only have to call instantiate the button and do the border that you want
var myButton = new WhiteButton()
{
BackgroundColor = Color.Transparent,
TextColor = Color.White,
Text = "Desconectarse",
BorderRadius = 45/2,//rounded border Heightbutton/2
BorderWidth = 2,
BorderColor = Color.White
};
If nobody knows why is working please explain me , I have tried the same but with no render only using the class Button normally and if I do this I don't get the expected result.
in Android project create ButtonRenderer and paste code
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (Control != null)
{
var roundableShape = new GradientDrawable();
roundableShape.SetShape(ShapeType.Rectangle);
roundableShape.SetStroke((int) Element.BorderWidth,Element.BorderColor.ToAndroid());
roundableShape.SetColor(Element.BackgroundColor.ToAndroid());
roundableShape.SetCornerRadius(Element.BorderRadius * Resources.DisplayMetrics.Density);
Control.Background = roundableShape;
Control.TransformationMethod = null;
Control.Elevation = 0;
}
base.OnElementPropertyChanged(sender, e);
}