To achieve tis function, we need to create a custom control. For example, add a bool
property to the cusotm Button
and Entry
. Then change the appearance of the two views based on the property changes using Triggers
.
Here is the sample code, you could refer to it.
public class CustomButton : Button
{
public bool IsClicked
{
set => SetValue(IsClickedProperty, value);
get => (bool)GetValue(IsClickedProperty);
}
public static readonly BindableProperty IsClickedProperty = BindableProperty.Create(nameof(IsClicked), typeof(bool), typeof(CustomButton), null);
public CustomButton()
{
this.Clicked += CustomButton_Clicked;
}
private void CustomButton_Clicked(object sender, EventArgs e)
{
IsClicked = true;
}
}
public class CustomEntry : Entry
{
public bool _IsFocused //because Entry already has IsFocused property, but the property only provides the get method
{
set => SetValue(_IsFocusedProperty, value);
get => (bool)GetValue(_IsFocusedProperty);
}
public static readonly BindableProperty _IsFocusedProperty = BindableProperty.Create(nameof(_IsFocused), typeof(bool), typeof(CustomEntry), propertyChanged: ValueChanged);
public CustomEntry()
{
this.Unfocused += CustomEntry_Unfocused;
}
private void CustomEntry_Unfocused(object sender, FocusEventArgs e)
{
_IsFocused = false;
}
private static void ValueChanged(BindableObject bindable, object oldValue, object newValue)
{
var customEntry = bindable as CustomEntry;
if ((bool)newValue)
{
customEntry.Focus();
}
}
}
page.xaml
<local:CustomButton x:Name="customButton">
<local:CustomButton.Triggers>
<DataTrigger TargetType="local:CustomButton" Binding="{Binding Source={x:Reference customEntry},Path=_IsFocused}" Value="False">
<Setter Property="IsClicked" Value="False"/>
</DataTrigger>
</local:CustomButton.Triggers>
</local:CustomButton>
<local:CustomEntry x:Name="customEntry">
<local:CustomEntry.Triggers>
<DataTrigger TargetType="local:CustomEntry" Binding="{Binding Source={x:Reference customButton},Path=IsClicked}" Value="True">
<Setter Property="_IsFocused" Value="True"/>
</DataTrigger>
</local:CustomEntry.Triggers>
</local:CustomEntry>