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.


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


// 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.


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"/>

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">...
    <Set ShowPanel.Value="true"/>


Just wanna check if enums binding is available now in 0.8.4

Yes, this should work:

exports.vis = Observable("Hidden");


<Panel Visibility="{vis}" />