Text Element not showing up

General
1

So I am making a view where you can browse images and I am planning on adding an overlay which is shown/hidden on click event, and on this overlay I need some text, but for some reason text element is just not shown, I have tried putting it in panel, rectangle or without. If I replace the text element with a different element like textbox or add a color to the panel/rectangle it is displayed how I expect it to be, but I just cant make the text element show up. Any Ideas? I presume that if the textbox shows up as expected and at the same place text element doesn`t it might be some property that textbox has which text has not.

Here is the code: (the text element with “ErrorText” does not show up )

  <Panel>

    <Panel Color="#f4d442" Padding="0, 10, 0, 0" Height="45" Alignment="Top">
    <Text Color="Black" TextAlignment="Center" FontSize="20" Padding="5">PlaceHolderText</Text>
    </Panel>

    <ScrollView AllowedScrollDirections="Horizontal">
    <StackPanel Orientation="Horizontal">

    <Panel>
     <Image File="../Assets/PlaceHolder.png" />

     <Panel Layer="Overlay">

       <Panel Layer="Background" Color="#d142f4" Opacity="0.6"/>
    <Rectangle>
      <Text>ErroText</Text>
    </Rectangle>

     </Panel>

   </Panel>
     <Image File="../Assets/PlaceHolder_2.png" />

    </StackPanel>
  </ScrollView>

  </Panel>
2

Ok, I am stuck. Even if I add background color to the text element it shows the rectangle in the right color but I can`t get the text to show up. Will put this aside until I get some ideas.

3

Hey,

you’re doing weird things there. Here, I made a complete, minimal reproduction of the issue you have, which actually allows you to see the problem:

<App>
    <Panel>
        <Panel Color="#f4d44250" Padding="0, 10, 0, 0" Height="45" Alignment="Top">
            <Text Color="Black" TextAlignment="Center" FontSize="20" Padding="5">PlaceHolderText</Text>
        </Panel>
        <ScrollView AllowedScrollDirections="Horizontal" Background="#f00">
            <StackPanel Orientation="Horizontal">
                <Panel Width="120">
                    <!-- <Image File="../Assets/PlaceHolder.png" /> -->
                    <Panel Layer="Overlay">
                        <Panel Layer="Background" Color="#d142f4" Opacity="0.6"/>
                        <Rectangle>
                            <Text>ErroText</Text>
                        </Rectangle>
                    </Panel>
                </Panel>
                <!-- <Image File="../Assets/PlaceHolder_2.png" /> -->
            </StackPanel>
        </ScrollView>
    </Panel>
</App>

Why this happens? Well, let’s break it down…

First, the second-level Panel and ScrollView occupy exactly the same available space, which is all of the screen in this case (the parent is a Panel, too).

Next, Inside of the ScrollView, you have a StackPanel with Orientation="Horizontal". That effectively means that all children of that StackPanel will try to take up as little space horizontally as possible. If there isn’t anything that makes the children to take up some space, they take up… nothing. So, in my reproduction, I explicitly set the Width of the Panel to 120.

Next, why are you fiddling with Layer="Overlay" and Layer="Background at all? I don’t see any reason why you’d need them here in the first place.

As a conclusion: it is not clear what you’re trying to make, so we can’t “fix” the code for you. I can only explain why it does what it does. You should spend some time familiarising yourself with how Layout works in Fuse.

4

Oh, and here’s how it looks if you run that code on your machine:

file
x6j0VEbRHjuO-image-1518195302088.54.06.png810×1420

5

Uldis, thanks, now I can fix it.

About the coding style issues…
I thought using Layer Background is the best way to add a background with opacity as opposed to making the whole element/contents of the element with set opacity. I found this solution for background a while back as suggestion in forums maybe something has been changed since then.

6

Visuals with Layer set to either Background or Overlay simply do not contribute to the size of the parent layer. For example, you can use Layer="Background" on a child inside of a StackPanel, and it will not participate in the stacking; it will be put “behind” everything else [that is inside of that StackPanel].

This does not necessarily mean that it is the only, or the right way to draw something in background.

Your approach should differ on a case-by-case basis. To come up with the right approach, you first need to understand how layout works in Fuse, so please spend some time on the link I shared before.