将IsVisible属性绑定到我的VIewModel

Question

我有一些输入，并且我希望显示该输入的取消按钮。

这是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>

如您所见，Imusing EventToCommand Behavior可以正常工作（它进入我的命令方法）。在我的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; }
    }

流程如下：

1. 在页面加载时，首先设置SetDefaultContent（）=> CancelButtonIsVisible = true;
2. 针对条目，隐藏取消按钮OnSearchBarFocused（）=> CancelButtonIsVisible = false;

显然，SetDefaultContent 正在工作。

我的聚焦方法不起作用，当我没有聚焦时，仍然有可见的取消按钮。

有什么建议吗？

Answer 1

选项1

更简单的选择是使用命名引用将“取消”按钮上的IsVisible属性绑定到条目（mainEntry）控件上的IsFocused属性。

<Button Text="Cancel" 
     IsVisible="{Binding IsFocused, Source={x:Reference mainEntry}, 
                     Converter={StaticResource NegateBooleanConverter}}" />

您可以实现一个转换器，该转换器将为您取反布尔值。另外，您也可以使用触发器。

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;
    }
}

选项2

另一个选择是将IsFocused与view-model属性绑定。

在viewmodel中使用setter创建属性

public bool IsEntryFocused
{
   set
   {
      CancelButtonIsVisible = !value;
   }
}

并在视图中设置绑定

<controls:StandardEntry
     x:Name="mainEntry"
     ...
     IsFocused="{Binding IsEntryFocused}"