Xamarin Forms 布尔绑定在视图加载时不起作用

Question

I have a simple View showing two barcodes in one place. For this I am using ZXing library. The idea is to switch visibility between these two barcodes. So when the view loads, it should display one barcode and after the button click it should switch to another.

So both of these barcode have IsVisible property binded to a ViewModel property. One is set to true, other to false.

Problem is that after view loads there is no barcode visible and only after the button click it starts to work. So logic and binding is OK but the view is not displaying anything on the first run.

ViewModel (simplified):

    private bool _IsQR;
    public bool IsQR
    {
        get => _IsQR;
        set
        {
            SetProperty(ref _IsQR, value);
        }
    }

    private bool _Is128;
    public bool Is128
    {
        get => _Is128;
        set
        {
            SetProperty(ref _Is128, value);
        }
    }


    public ICommand ToogleCode { private set; get; }

    public BarcodeViewModel()
    {
        IsQR = false;
        Is128 = true;
        ToogleCode = new Command(ToogleCodeHandler);
    }

    private void ToogleCodeHandler()
    {
        Is128 = !Is128;
        IsQR = !IsQR;
    }

View (simplified):

<Grid x:DataType="vm:BarcodeViewModel">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Label Grid.Row="0" Text="{Binding Code}" 
               LineBreakMode="NoWrap"
               HorizontalOptions="Center" 
               VerticalOptions="Center"
               FontSize="Large"
               FontAttributes="Bold"
               Padding="0,0,0,10"/>

        <Button Grid.Row="1" Text="Change" Command="{Binding ToogleCode}"/>

        <zxing:ZXingBarcodeImageView Grid.Row="2"
                                     BarcodeValue="{Binding Code}" 
                                     BarcodeFormat="QR_CODE" 
                                     IsVisible="{Binding IsQR, Mode=TwoWay}">
            
            <zxing:ZXingBarcodeImageView.BarcodeOptions>
                <zxcm:EncodingOptions Width="500" Height="500" />
            </zxing:ZXingBarcodeImageView.BarcodeOptions>
            
        </zxing:ZXingBarcodeImageView>

        <zxing:ZXingBarcodeImageView Grid.Row="2"
                                     BarcodeValue="{Binding Code}" 
                                     BarcodeFormat="CODE_128"
                                     Rotation="90"
                                     VerticalOptions="Center"
                                     HorizontalOptions="Center"
                                     IsVisible="{Binding Is128, Mode=TwoWay}">
            
            <zxing:ZXingBarcodeImageView.BarcodeOptions>
                <zxcm:EncodingOptions Width="1920" Height="1080" />
            </zxing:ZXingBarcodeImageView.BarcodeOptions>
            
        </zxing:ZXingBarcodeImageView>


    </Grid>

This is not the first time I saw this. Once I was filling the CollectionView and it did not show anything until I set one property in the OnAppearing() event in the ViewModel. But here I can not make it work.

EDIT: It is not working only for the Barcode (128). If I set QR = true and 128 = false it works as it should. Problem is therefore related to ZXingBarcodeImageView

Answer 1

I have made an sample to test, and when I clicked button, the command Binding doesn't work. If you want to use command Binding in your button, you can use eventtocommandbehavior class. I think you may be able to use ButtonClicked Event in your view, such as:

MainViewModel viewModel;

public MainPage()

{

InitializeComponent();

viewModel = (MainViewModel)this.BindingContext;

}
private void Button_ Clicked(object sender, EventArgs e)

{

viewModel. IsQR = ! viewModel.IsQR;

viewModel. Is128 = ! viewModel.Is128;

}

Answer 2

Give a default value to the bool value:

   public BarcodeViewModel()
    {
        Is128 = True;
        IsQR = False;
        ToogleCode = new Command(ToogleCodeHandler);
    }

Answer 3

I have solution. Problem is not in the data binding but in the ZXingBarcodeImageView element. It seems that when Background property is not null, it works as it should. So data binding is ok.

I am unable to delete this question.