Transparent bottom panel with PageControl

How-to Discussions
1

Hi,

I’m trying to display a ScrollView that goes beneath a transparent Panel.

I manage to do that easily, this way :

<ClientPanel>
    <ScrollView Layer="Background">...</ScrollView>
    <Panel Dock="Bottom" Opacity="0.9">...</Panel>
</ClientPanel>

But when moving the ScrollView part (with other elements) to a separate ux file using PageControl, like :

MainView.ux

<ClientPanel>
    <PageControl ux:Name="pages">
        <Page ux:Name="List">
            <List />
        </Page>
    </PageControl>

    <Panel Dock="Bottom" Opacity="0.9">...</Panel>
</ClientPanel>

List.ux

<DockPanel ux:Class="List">
    <ScrollView Layer="Background">...</ScrollView>
</DockPanel>

The ScrollView does not go under the bottom panel anymore, negative margin bottom make it overlap the Panel despite the Dock="Bottom" attribute.

How should I fix my List to make it occupy the space under the bottom Panel ?

2

I’ll try to help.

In the first example, you’re adding the ScrollView to the Background of the ClientPanel (which is a DockPanel).

When you refactor the code, all of a sudden you’re adding the ScrollView to the Background-layer of your List. As this is nested in the PageControl makes it occupy the main client area of the ClientPanel. This means that they will not overlap.

You could try setting the PageControl to be in Layer Background as a quick fix, as this will push the PageControl to the Background layer of the ClientPanel but I personally prefer to create stacks of overlapping elements using nested Panels. Having the PageControl as the Background of the ClientPanel is almost certainly not what you want (as the bounds of the control will match the bounds of the ClientPanel, not the visible bounds of the ClientPanel).

This will stack things differently. I would try to do something like:

<ClientPanel>
    <!-- The order of the panels in this panel will dictate stacking -->
    <Panel>        
        <!-- #1 on top, this used to be docked to bottom in the ClientPanel -->
        <Panel Alignment="Bottom" Opacity="0.9">...</Panel> 
        <!-- #2 below #1, This used to have content layered in background -->
        <PageControl ux:Name="pages">
            <Page ux:Name="List">
                <List />
            </Page>
        </PageControl>
    </Panel>
</ClientPanel>

In Fuse, the order of the controls in a panel is the same as in Photoshop, the controls listed on the top will appear on the top.

I hope this is helpful. If it is not, I probably need to see a full example, and/or a specification.

3

In Fuse, the order of the controls in a panel is the same as in Photoshop, the controls listed on the top will appear on the top.

Ho! I totally missed that concept from the doc and now it suddenly make so much more sense :smiley:

I hope this is helpful.

Very helpful, thanks a lot !