Binding Visibility by Observable

I want to make the dockpanel is hidden at first and make it visible later, but I failed to bind the Visibility through JS.

UX:

<DockPanel ux:Name="popup" Visibility="{popup.vis}" > ...

JS:

// Try to hidden it at first
var popup_vis = Observable("Hidden"); // Not work

var popup_vis = Observable(Hidden); // Not work

// Try to make it visible by clicking an item inside EACH.
function clickToVisible(args)
{
    ...
    popup_vis = Visible; // Not work
    popup_vis = Visibility.Visible; // Not work
    popup_vis.value = Visible; // Not work
    popup_vis.value = Visibility.Visible; // Not work
    ...
}

I can’t use Clicked and Set because I have to do click from each item thus can’t access the non-global resource popup_vis.

How to make it be possible? Thank you.

Hi!

Support for binding enums by observable is on the way, probably in the next release :slight_smile:

Sorry for the confusion!

In the meantime you can do this with an intermediary using a boolean binding.

<DockPanel ux:Name="popup" Visibility="Hidden" >
...
<WhileTrue Value="{showPanel}">
    <Change popup.Visibility="Visible"/>
</WhileTrue>

You can then modify the showPanel variable.

You can also generally achieve this via UX alone, since you can do a clicked handler like this:

<WhileTrue ux:Name="ShowPanel">...
<Clicked>
    <Set ShowPanel.Value="true"/>

@Anders

Just wanna check if enums binding is available now in 0.8.4

Yes, this should work:

exports.vis = Observable("Hidden");

And

<Panel Visibility="{vis}" />