How can I hide contentview using binding.How to use binding in On platform argument? please check following screen shot for issue.
In screeen shot example like showjoin isvisible true. then it's fine. but showjoin is false then by default contentview is displayed because of in onflatform is true.
please help me too sort-out this issue
If all you are wanting to do is hide the ContentView when your platform is Android, I would suggest using the OnPlatform in your xaml. Also, setting the IsVisible property of a ContentView twice won't work well usually.
Using your xaml from above:
<OnPlatform x:TypeArguments="View">
<On Platform="iOS">
<ContentView Margin="20,10,20,20" HeightRequest="40">
<!-- Rest of ContentView code -->
</ContentView>
</On>
<!-- You must specify an Android view -->
<On Platform="Android">
<!-- Use a simple boxview with height and width 0 to create an empty view -->
<BoxView HeightRequest="0" WidthRequest="0" IsVisible="False"/>
</On>
</OnPlatform>
This will only show the ContentView on your page when using iOS and nothing on Android.
a) Create one Boolean property in Viewmodel e.g. IsContentViewVisible
b) Bind this property to contentview IsVisible property e.g. IsVisible = "{Binding IsContentViewVisible}", also make sure Raisepropertychanged event should be in place.
c) As per your need you set the IsContentViewVisible property to False/true in your ViewModel
The question is not all to clear... but if you want to avoid the XAML OnPlatform override ( because it is not using Binding ), you can delete it in XAML and just add the correct logic in your ShowJoinButton bool property.
You can check platform in code ( even in your ViewModel ) like so:
if(Device.RuntimePlatform == Device.iOS) ...
If you still want to have everything in XAML, that is also possible of course.
You can use Binding inside OnPlatform, thing to take note is the type argument has to be BindingBase!
<OnPlatform x:TypeArguments="BindingBase" iOS="{Binding MyBool}" Android="{Binding MyBool}"/>
Below is the code to write binding in ViewModel class
private const string ShowJoinButtonPropertyName = "ShowJoinButton";
private bool showJoinButton = false;
public bool ShowJoinButton
{
get { return showJoinButton; }
set { SetProperty(ref showJoinButton, value, ShowJoinButtonPropertyName); }
}
Wherever you want to hide/show you need to use the below code
if (Device.RuntimePlatform == Device.Android)
{
ShowJoinButton = false;
}
else
{
ShowJoinButton = true;
}
Hope it helps!
Related
I want to utilise the auto-sizing feature of android textviews in my xamarin forms solution so that as the text length grows, the font sizes shrinks to never overflow the bounds of the label, and doesn't get truncated. I've created a custom Label control to do so and added an android custom renderer. It's not working in Android 7 and below. It is working in Android 8 and above.
According to the docs autosize support was introduced in android 8, but can be supported back to Android 4 with AppCompat.v4. However, my custom rendered label just renders the default font size in Android pre 8. It works fine in 8+ devices, the label text resizes as needed to not overflow the bounds. The accepted answer to this question with a similar issue on native android says it can be to do with not setting a width and height, I've tried setting widthrequest and heightrequest explicitly and it doesn't change anything. Also setting maxlines=1 doesn't change anything. An alternative thread suggests that custom fonts are the culprit. I created a vanilla forms solution using the default device font, and get the same effect.
My code:
internal class AutosizeLabelRenderer : LabelRenderer
{
#region constructor
public AutosizeLabelRenderer(Context context) : base(context)
{
}
#endregion
#region overridable
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || !(e.NewElement is AutoSizeLabel autoLabel) || Control == null) { return; }
TextViewCompat.SetAutoSizeTextTypeUniformWithConfiguration(Control, autoLabel.AutoSizeMinTextSize,
autoLabel.AutoSizeMaxTextSize, autoLabel.AutoSizeStepGranularity, (int)ComplexUnitType.Sp);
}
#endregion
}
public class AutoSizeLabel : Label
{
public int AutoSizeMaxTextSize
{
get => (int)GetValue(AutoSizeMaxTextSizeProperty);
set => SetValue(AutoSizeMaxTextSizeProperty, value);
}
public static readonly BindableProperty AutoSizeMaxTextSizeProperty = BindableProperty.Create(
nameof(AutoSizeMaxTextSize), // the name of the bindable property
typeof(int), // the bindable property type
typeof(AutoSizeLabel)); // the default value for the property
public int AutoSizeMinTextSize
{
get => (int)GetValue(AutoSizeMinTextSizeProperty);
set => SetValue(AutoSizeMinTextSizeProperty, value);
}
public static readonly BindableProperty AutoSizeMinTextSizeProperty = BindableProperty.Create(
nameof(AutoSizeMinTextSize), // the name of the bindable property
typeof(int), // the bindable property type
typeof(AutoSizeLabel)); // the default value for the property
public int AutoSizeStepGranularity
{
get => (int)GetValue(AutoSizeStepGranularityProperty);
set => SetValue(AutoSizeStepGranularityProperty, value);
}
public static readonly BindableProperty AutoSizeStepGranularityProperty = BindableProperty.Create(
nameof(AutoSizeStepGranularity), // the name of the bindable property
typeof(int), // the bindable property type
typeof(AutoSizeLabel)); // the default value for the property
//
}
Not working: Android 7 - text does not shrink
Working as expected: Android 8 and above
Xaml for above images:
<StackLayout HeightRequest="200" WidthRequest="100">
<Label Text="Fixed width and height, sentences get longer, text should shrink" />
<controls:AutoSizeLabel
AutoSizeMaxTextSize="50"
AutoSizeMinTextSize="8"
AutoSizeStepGranularity="1"
BackgroundColor="{StaticResource Shamrock}"
HeightRequest="40"
HorizontalOptions="Start"
MaxLines="1"
Text="A small sentence"
WidthRequest="200" />
<controls:AutoSizeLabel
AutoSizeMaxTextSize="50"
AutoSizeMinTextSize="8"
AutoSizeStepGranularity="1"
BackgroundColor="{StaticResource Shamrock}"
HeightRequest="40"
HorizontalOptions="Start"
MaxLines="1"
Text="A larger sentence that shrinks"
WidthRequest="200" />
<controls:AutoSizeLabel
AutoSizeMaxTextSize="50"
AutoSizeMinTextSize="8"
AutoSizeStepGranularity="1"
BackgroundColor="{StaticResource Shamrock}"
HeightRequest="40"
HorizontalOptions="Start"
MaxLines="1"
Text="An even larger sentence that shrinks more."
WidthRequest="200" />
</StackLayout>
TextView font size changes with the size of the control, which is new in Android 8.0 (API26),therefore, compatibility issues need to be considered when using the previous version.You could change the TextView to AppCompatTextView.
Change your
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || !(e.NewElement is AutoSizeLabel autoLabel) || Control == null) { return; }
AppCompatTextView appCompatTextView = new AppCompatTextView(_context);
appCompatTextView.Text = Element.Text;
appCompatTextView.SetMaxLines(1);
SetNativeControl(appCompatTextView);
TextViewCompat.SetAutoSizeTextTypeUniformWithConfiguration(Control,autoLabel.AutoSizeMinTextSize,autoLabel.AutoSizeMaxTextSize, autoLabel.AutoSizeStepGranularity, (int)ComplexUnitType.Sp);
}
Leo Zhu's answer got me most of the way there. There were a couple of extra steps I needed to take to get it fully working, so I'm posting the code as a separate answer here.
Differences between mine and Leo's answer:
Creating a new native control in scope like Leo suggested meant that it worked for a while but got disposed by the garbage collector and caused an exception when returning to the page after navigating away. To fix this I needed to override a property called ManageNativeControlLifetime to return false, and then manually manage disposing the object by overriding the dispose method and calling Control.RemoveFromParent();. This advice comes from a xamarin staff member in this thread.
Formatting and binding context are not automatically inherited when creating the new native control and need to be set manually. I needed to add those based on my needs using the android specific binding syntax. You may need to add other formatting and binding code based on your needs, I'm just doing font colour, gravity and binding context here.
I set the binding context with
appCompatTextView.SetBindingContext(autoLabel.BindingContext);
Once the binding context was set, I needed to add a new string property to my XF AutoSizeLabel class to pass in through XAML, then use it to set the binding path for the relevant property (In my case the text property). If more than one binding is required, you would need to add multiple new binding path properties for each required property. I set a specific binding like this:
appCompatTextView.SetBinding("Text", new Binding(autoLabel.TextBindingPath));
To facilitate this in my Xamarin Forms Xaml, my Xaml went from <Label Text="{Binding MyViewModelPropertyName}" /> to <controls:AutoSizeLabel TextBindingPath="MyViewModelPropertyName" />
Here's the full code of the renderer:
protected override bool ManageNativeControlLifetime => false;
protected override void Dispose(bool disposing)
{
Control.RemoveFromParent();
base.Dispose(disposing);
}
private AppCompatTextView appCompatTextView;
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || !(e.NewElement is AutoSizeLabel autoLabel) || Control == null) { return; }
//v8 and above supported natively, no need for the extra stuff below.
if (DeviceInfo.Version.Major >= 8)
{
Control?.SetAutoSizeTextTypeUniformWithConfiguration(
autoLabel.AutoSizeMinTextSize,
autoLabel.AutoSizeMaxTextSize, autoLabel.AutoSizeStepGranularity,
(int)ComplexUnitType.Sp);
return;
}
appCompatTextView = new AppCompatTextView(Context);
appCompatTextView.SetTextColor(Element.TextColor.ToAndroid());
appCompatTextView.SetMaxLines(1);
appCompatTextView.Gravity = GravityFlags.Center;
appCompatTextView.SetBindingContext(autoLabel.BindingContext);
appCompatTextView.SetBinding("Text", new Binding(autoLabel.TextBindingPath));
SetNativeControl(appCompatTextView);
TextViewCompat.SetAutoSizeTextTypeUniformWithConfiguration(Control, autoLabel.AutoSizeMinTextSize, autoLabel.AutoSizeMaxTextSize, autoLabel.AutoSizeStepGranularity, (int)ComplexUnitType.Sp);
}
I have a Xamarin.Forms app and want to set the NavigationBar to be translucent. But when I do, I get a strange behavior with the Xamarin views:
ListViews or TableViews behave correctly. But when I wrap them in a RefreshView, they are overlapped by the UINavigationBar.
-- TRANSLUCENCY WITHOUT REFRESHVIEW: OKAY
<ContentPage>
<ListView>
...
</ListView>
</ContentPage>
-- TRANSLUCENCY WITHOUT REFRESHVIEW: BUGGY
<ContentPage>
<RefreshView> <----
<ListView>
...
</ListView>
</RefreshView>
</ContentPage>
Am I missing something?
Repro on GitHub: https://github.com/awaescher/xamarin-repro
How to make a translucent NavigationBar: https://xamgirl.com/transparent-navigation-bar-in-xamarin-forms/
We can use navigationPage.BarBackgroundColor = Color.Transparent to achieve that .
NavigateFromMenu method modified as follow :
case (int)MenuItemType.TranslucentWithoutRefreshView:
MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),false));
break;
case (int)MenuItemType.TranslucentWithRefreshView:
MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),true));
break;
Then in CreateTranslucentNavigationPage method :
private Xamarin.Forms.NavigationPage CreateTranslucentNavigationPage(Xamarin.Forms.Page page, bool value)
{
var navigationPage = new Xamarin.Forms.NavigationPage(page);
if (value)
{
navigationPage.BarBackgroundColor = Color.Transparent;
navigationPage.BarTextColor = Color.Black;
}
//Xamarin.Forms.PlatformConfiguration.iOSSpecific.NavigationPage.SetIsNavigationBarTranslucent(navigationPage, true);
return navigationPage;
}
The effect :
My application viewModel responds to a user clicking a button to see test results:
private void AddDetailRows(List<QuizHistory> quizHistoryList)
{
quizDetails.Children.Clear();
quizDetails.Children.Add(AddData(quizHistoryList));
quizDetails.Children.Add(new LineTemplate());
}
Where quizDetails is the name of an element in the view.
But this doesn't work for me as the view model doesn't know what the view looks like and does not have access to the names of elements.
In a MVVM application, how is this problem solved?
You are completely right, that is not something that ViewModel is responsible of.
So, whatever you want to do with UI is not responsibility of the ViewModel.
If this is really the only option, then you can think of creating boolean properties in your VM and binding them to your views and then changing that boolean from false to true or vice versa on button click command which is binded to your VM.
To simplify it:
MyView.xaml
<StackLayout>
<Button Command="{Binding ShowHideQuizHistoryCommand}" ... />
<StackLayout x:Name="QuizHistory"
IsVisible={Binding ShowQuizHistory }>
//
</StackLayout>
</StackLayout>
MyViewModel.cs
private bool _showQuizHistory ;
public bool ShowQuizHistory
{
get { return _showQuizHistory ; }
set
{
_showQuizHistory = value;
OnPropertyChanged();
}
}
public ICommand ShowHideQuizHistoryCommand => new Command(() =>
{
ShowQuizHistory = !ShowQuizHistory;
});
So, this is just an example based on what you provided in question.
You can also use visual states, converters, triggers and behaviors in order to achieve this, but in my opinion this is the easiest way.
How to hide a button, a label or a grid cell on iOS and show it on android, I have a xamarin.forms app (portable), I know that I have to use on platform but how to access the visibility of the controls.
Thanks
If you want to do it on XAML, in order to hide a view on a specific platform, you can use this:
<Button>
<Button.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean"
iOS="false"
Android="true"/>
</Button.IsVisible>
</Button>
Hope it helps!
// IOS, Android, WP
SomeButton.IsVisible = Device.OnPlatform<bool>(false, true, true);
Or
if (Device.OS == TargetPlatform.Android)
{
SomeButton.IsVisible = true;
}
else
...
All of these answers seem to involve creating the control whether or not you actually need it and then setting IsVisible to false on the platforms you don't want it on. A better solution IMO is to only create the control in the first place if you do in fact need it. A first step would be to wrap it in a content view:
<ContentView>
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<Button Text="Something" ...etc... />
</OnPlatform.Android>
</OnPlatform>
</ContentView>
That's better, but it still creates a superfluous ContentView. Take it one step further and use OnPlatform to declare a ControlTemplate and you'll achieve the most optimal implementation across all platforms.
Like mindOfAi mentioned you can do this in XAML like this:
<Button>
<Button.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean"
iOS="false"
Android="true"/>
</Button.IsVisible>
</Button>
In code you can use the Device.OnPlatform or check the Device.OS property.
That would look like:
// ... Other code here
Device.OnPlatform(iOS: () => { myButton.IsVisible = false; });
// Or do this:
if (Device.OS == TargetPlatform.iOS)
myButton.IsVisible = false;
// ... Other code here
From Xamarin.Forms version 2.5.x this is done as per code below. Using a basic button as an example.
<Button Text="NFC Pairing" Command="{Binding YourVmCommand}">
<Button.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="iOS">true</On>
<On Platform="Android">false</On>
</OnPlatform>
</Button.IsVisible>
</Button>
Nigel
Expanding the solutions, you can also do xaml inline:
IsVisible="{OnPlatform iOS=true, Android=false}"
For anyone that stumbles upon this question seeking for the codebehind solution:
switch (Device.RuntimePlatform)
{
case Device.iOS:
//iOS specific code here
break;
case Device.Android:
//Android specific code here
break;
}
The Device class has the following Device constants:
Constants as shown from VS 2019 Intellisense.
I originally implemented this feature but simply adding an image to a button. Then I realized I could simply add a tap gesture to an image (w/o using a button). Any recommendations which is the best way to go and why? Thanks.
I use my own "OnClick" event for Image :) with a custom control:
public class MyImage : Xamarin.Forms.Image
{
public static BindableProperty OnClickProperty =
BindableProperty.Create("OnClick", typeof(Command), typeof(MyImage));
public Command OnClick
{
get { return (Command)GetValue(OnClickProperty); }
set { SetValue(OnClickProperty, value); }
}
public MyImage()
{
GestureRecognizers.Add(new TapGestureRecognizer() {Command = new Command(DisTap)});
}
private void DisTap(object sender)
{
if (OnClick != null)
{
OnClick.Execute(sender);
}
}
}
Then use it with MVVM like:
<local:MyImage Source="{Binding Img}" OnClick="{Binding ImgTapCommand}" />
It depends of visual effect you want to achieve.
If you use Button you'll have tapped animation (depens of platform) and specific buttton border. You have much less control how the image will look like (it's on the left side of button text).
If you use a plain TapGestureRecognizer you'll have a normal image with full control of aspect ratio/size etc.
You could use absolute layout, which can be used to place two elements above each other, make sure to make the button is the second element.
<AbsoluteLayout>
<Image Source="clock.png" AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional"/>
<Button AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional" BorderColor="Transparent" BackgroundColor="Transparent" Command="{Binding AlertMeCommand}"/>
</AbsoluteLayout>