how to show/hide a panel inside a scrollview

How-to Discussions
1

I have an scroll view that cotains

1: a Panel that will be shown or not depending on something 2: the result of a query

    <ScrollView>
        <StackPanel>
            <Panel ux:Name="Panel1">
            </Panel>

            <Each...>
            </Each>
        </StackPanel>
    </ScrollView>

The problem i have is that if i hide “panel1” nothing appears but it shows an empty space. I guess i have to remove the panel instead of hidding it (as i want it to be inside the scroll)… or maybe i have to attack it from a different angle…

any help?

thnx.

2

Have you tried giving Panel1 the Visibility attribute? To hide it:

<Panel ux:Name="Panel1" Visibility="Collapsed"/>

To show it:

<Panel ux:Name="Panel1" Visibility="Visible"/>

I think that should make it act as if it doesn’t exist when hidden. As for hiding/showing on the result of a query, if you’re talking a JavaScript query then you could databind it like so:

<JavaScript>
    Panel1Visibility = Observable("Visible");

    if (query == true) {
        Panel1Visibility.value = "Visible";
    } else {
        Panel1Visibility.value = "Collapsed";
    }

    module.exports = {
        Panel1Visibility : Panel1Visibility
    };
</JavaScript>

<Panel ux:Name="Panel1" Visibility="{Panel1Visibility}"/>
3

Thnx very much!!

4

What about hiding/showing as the result of Clicking an image or button?

5 
<JavaScript>
  Panel1Visibility = Observable("Visible");

function click () {

if (Panel1Visibility.value == "Visible") {

Panel1Visibility.value = "Collapsed";

}

else {

Panel1Visibility.value = "Visible";

}

}


module.exports = {

Panel1Visibility : Panel1Visibility,

click: click

};

</JavaScript>

<Panel ux:Name="Panel1" Visibility="{Panel1Visibility}" />

<Button Clicked="{click}" />