How do I properly use WhileCount and WhileEmpty?

How-to Discussions
1

I’m trying to display results in a StackPanel if they exist and a “No results” message in a regular Panel otherwise.

The following code doesn’t show me either output:

<ScrollView>
    <WhileCount Items="{result}" GreaterThan="0">
        <StackPanel>
            <Each Items="{result}">
                <Text Value="{title}" />
            </Each>
        </StackPanel>
    </WhileCount>

    <WhileEmpty Items="{result}">
        <Panel>
            <Text Value="No results." />
        </Panel>
    </WhileEmpty>
</ScrollView>

Am I doing something wrong here?

2

I haven’t tested this, but I have a feeling the ScrollView doesn’t play too nicely with having potentially more than one child.

Can you give something like this a shot?

<ScrollView>
  <StackPanel>
    <Each Items="{result}">
      <Text Value="{title}" />
    </Each>

    <WhileEmpty Items="{result}">
      <Panel>
        <Text Value="No results." />
      </Panel>
    </WhileEmpty>
  </StackPanel>
</ScrollView>

Notice everything’s inside the StackPanel now, and I also removed the WhileCount tag since Each will simply yield no children in that case.

3

That solution works, so it sounds like your theory is correct.

However, I intentionally want a StackPanel only when there are results so the “No Results” text can be centered and its Panel can take up the rest of the space. So instead I am going with:

<WhileCount Items="{result}" GreaterThan="0">
    <ScrollView>
        <StackPanel>
            <Each Items="{result}">
                <Text Value="{title}" />
            </Each>
        </StackPanel>
    </ScrollView>
</WhileCount>

<WhileEmpty Items="{result}">
    <ScrollView>
        <Panel>
            <Text Value="No results." />
        </Panel>
    </ScrollView>
</WhileEmpty>

A bit inelegant to have two ScrollViews there but I can live with it. :slight_smile: Thanks!

4

Alternatively, you can place both WhileCount and WhileEmpty inside another Panel within a ScrollView like this:

<ScrollView>
  <StackPanel>
    <WhileCount ...>
      ...
    </WhileCount>

    <WhileEmpty ...>
      ...
    </WhileEmpty>
  </StackPanel>
</ScrollView>

Then you shouldn’t have to have two separate ScrollView's.