CODEWITHSUNDEEP
mvvmuwpviewmodeluwp-xamlconverters
Itay Tur
Itay Tur

Reputation: 1729

uwp - Boolean to visibility converter doesn't work

I don't understand why something so simple cause me this much trouble but still. I have this converter:

public class BoolToVisibleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool && (bool)value)
            return Visibility.Visible;

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return (value is Visibility && (Visibility)value == Visibility.Visible);
    }
}

and this view model:

public class LoginViewModel: INotifyPropertyChanged
{
    private bool isHowToVisibile;

    public bool IsHowToVisible
    {
        get { return isHowToVisibile; }
        set { isHowToVisibile = value; Notify(nameof(IsHowToVisible)); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void Notify(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void ShowHowTo()
    {
        IsHowToVisible = true;
    }
}

In the XAML I have a button that activate ShowHowTo and change IsHowToVisible to true, and a StackPanel that its visibility I bind to the view model property IsHowToVisible, it looks like this:

<AppBarButton Label="How To Play" Icon="Help" Click="{x:Bind loginViewModel.ShowHowTo}"/>

<StackPanel Name="HowTo" Grid.ColumnSpan="3" Grid.RowSpan="6" Visibility="{x:Bind loginViewModel.IsHowToVisible,Converter={StaticResource boolToVis},Mode=OneWay}">
    <Button Name="CloseHowTo" Content="Close" Click="CloseHowTo_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10"/>
    <Image  Source="Assets/HowTo.jpg"  Stretch="Fill" Margin="10,10,10,10"/>
</StackPanel>

XAML knows the converter by this:

xmlns:con="using:MyApp.Converters"

<Page.Resources>
    <con:BoolToVisibleConverter x:Key="boolToVis"/>
</Page.Resources>

The button works. Walking with the debugger shows that the property in the view model do change to true, and the PropertyChanged event does fire. But that's it. I put a break point in the converter and it doesn't get there.

I tried to rebuild and deploy, change the mode to Mode=TwoWay, nothing helps.

What am I doing wrong?

Upvotes: 2

Views: 1837

Answers (1)

Breeze Liu - MSFT
Breeze Liu - MSFT

Reputation: 3808

In my test, your above code works well, please make sure your can Go to Definition (or F12) when you focus on the <con:BoolToVisibleConverter /> xaml.

On the other way, if your app target on Windows 10 version 1607 and later, you can delete your BoolToVisibleConverter code and don't need to use the Convert in your xaml. Since starting in Windows 10, version 1607, the XAML framework provides a built in Boolean to Visibility converter. The converter maps true to the Visible enumeration value and false to Collapsed so you can bind a Visibility property to a Boolean without creating a converter. Note that this is not a feature of function binding, only property binding. To use the built in converter, your app's minimum target SDK version must be 14393 or later. You can't use it when your app targets earlier versions of Windows 10.

If you still have this issue, you can create a minimal sample that could reproduce it.

Upvotes: 6

Related Questions