Binding IsVisible property to my VIewModel - xamarin

Question

I have some entry, and on focus of that entry I want to show my cancel button.
Here is the xaml:
<RelativeLayout>
<controls:StandardEntry
x:Name="mainEntry"
BackgroundColor="White"
BorderColor="Gray"
BorderThickness="0"
CornerRadius="15"
Placeholder="Search..."
TextColor="LightGray"
HeightRequest="10"
Padding="35,0"
FontSize="Default"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0,Constant=40}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.7,Constant=0}">
<Entry.Behaviors>
<behavior:EventToCommandBehavior EventName="Focused" Command="{Binding SearchBarFocusedCommand}"/>
<behavior:EventToCommandBehavior EventName="Unfocused" Command="{Binding SearchBarUnfocusedCommand}"/>
</Entry.Behaviors>
</controls:StandardEntry>
<Image
Source="Invest_Search_Icon.png"
VerticalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=mainEntry, Property=X,Factor=1,Constant=10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mainEntry, Property=Y,Factor=1,Constant=10}"/>
<Image
Source="Invest_Search_Icon.png"
VerticalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=mainEntry, Property=Width,Factor=1,Constant=-25}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mainEntry, Property=Y,Factor=1,Constant=10}"/>
<Button
Text="Cancel"
TextColor="Gray"
IsVisible="{Binding CancelButtonIsVisible}"
BackgroundColor="White"
VerticalOptions="Start"
CornerRadius="10"
HeightRequest="40"
Margin="0,0,50,0"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=mainEntry, Property=Width,Factor=1,Constant=20}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mainEntry, Property=Y,Factor=1,Constant=0}"/>
</RelativeLayout>
As you see Imusing EventToCommand Behavior, which is work ok (it enters into my command methods). In my VM:
public class InvestViewModel : BaseViewModel, INotifyPropertyChanged
{
public InvestViewModel()
{
SetDefaultContent();
SearchBarFocusedCommand = new Command(() => OnSearchBarFocused());
}
private void OnSearchBarUnfocused()
{
CancelButtonIsVisible = false;
}
private void OnSearchBarFocused()
{
CancelButtonIsVisible = false;
}
private void SetDefaultContent()
{
CancelButtonIsVisible = true;
}
private bool cancelButtonIsVisible;
public bool CancelButtonIsVisible
{
get => cancelButtonIsVisible;
set
{
cancelButtonIsVisible = value;
RaisePropertyChanged(() => CancelButtonIsVisible);
}
}
public ICommand CancelClickCommand { get; set; }
public ICommand SearchBarFocusedCommand { get; set; }
}
So the flow:
On page loading, first SetDefaultContent() => CancelButtonIsVisible = true;
On Entry focused, hide cancel button OnSearchBarFocused() => CancelButtonIsVisible = false;
Apparently, SetDefaultContent is working.
It doesnt work my focus method, when I focused nothing happens, there is still visible cancel button.
Any suggestions?

Answer 1

Option-1
The simpler option would be to bind IsVisible property on 'Cancel' button to IsFocused property on entry (mainEntry) control using named reference.
<Button Text="Cancel"
IsVisible="{Binding IsFocused, Source={x:Reference mainEntry},
Converter={StaticResource NegateBooleanConverter}}" />
You can implement a converter that will negate the boolean value for you. Alternatively you can use triggers as well.
public class NegateBooleanConverter : IValueConverter
{
public object Convert (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
public object ConvertBack (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
}
Option-2
Another option is to bind IsFocused with a view-model property.
Create a property with setter in viewmodel
public bool IsEntryFocused
{
set
{
CancelButtonIsVisible = !value;
}
}
and set up the binding in view
<controls:StandardEntry
x:Name="mainEntry"
...
IsFocused="{Binding IsEntryFocused}"