How to make draggable element to be on top of everything

How-to Discussions
1

Repo: https://github.com/poul-kg/ActionDrawerExperiments1

How to reproduce:

  • clone the repo
  • run fuse preview
  • click “Show” button on the screen, a panel will appear from the bottom
  • try to drag yellow squares up and down
  • they appear below buttons and below panel which appears from the bottom (see image)

I was able to make square to go above the ScrollView by setting ClipToBounds="false"

I also set Z-Offset for Draggable square to 10 and 0 for bottom panel, but it didn’t help.

Problem:

file
8txJEWHyaVrO-image-1501232812380.png748×1328

MainView.ux

<App>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <ScrollView ux:Name="Scroll" Height="100%">
            <StackPanel Height="100%" Alignment="Bottom">
                <Rectangle Layer="Background">
                    <Stroke Width="2" Color="#f00" />
                </Rectangle>
                <Each Count="2">
                    <Rectangle Height="32" Margin="5" Color="#fcc">
                        <Text Alignment="Center">Hide</Text>
                        <Clicked>
                            <Toggle Target="expanded" />
                        </Clicked>
                    </Rectangle>
                    <Rectangle Height="32" Margin="5" Color="#ccf">
                        <Text Alignment="Center">Show</Text>
                        <Clicked>
                            <Toggle Target="expanded" />
                        </Clicked>
                    </Rectangle>
                </Each>
                <!-- Horizontal Scroll -->
                <ScrollView AllowedScrollDirections="Horizontal" ClipToBounds="false">
                    <StackPanel Orientation="Horizontal" >
                        <Each Count="10">
                            <!-- Hellow Square -->
                            <Panel Width="64" Height="64" Margin="10" ZOffset="10">
                                <Rectangle Layer="Background" Color="#fd2" CornerRadius="10" />
                                <Draggable />
                            </Panel>
                        </Each>
                    </StackPanel>
                </ScrollView>
            </StackPanel>
        </ScrollView>
        <WhileTrue ux:Name="expanded">
            <Move Y="-1 * height(Drawer)" Target="Scroll" Duration=".3" />
            <Move Y="-1 * height(Drawer)" Target="Drawer" Duration=".3" />
        </WhileTrue>
        <Panel ux:Name="Drawer" Alignment="Bottom" Y="height(Drawer)" >
            
            <!-- <LayoutAnimation>
                <Resize X="1" Y="1" RelativeTo="SizeChange" Duration="0.25"/>
                <Move X="1" Y="1" RelativeTo="PositionChange" Duration="0.25"/>
            </LayoutAnimation> -->
                        
            <DockPanel Color="#faa" ZOffset="0">
                <Panel ux:Name="Header" Dock="Top" Color="#aaf" Height="96">
                    
                    <SwipeGesture Direction="Down" ux:Name="swipeDown" Length="1" />
                    
                    <Swiped Source="swipeDown">
                        <DebugAction Message="Swipe DOWN!" />
                        <Toggle Target="expanded" />
                    </Swiped>
                </Panel>

                <ScrollView ux:Name="bottomReaderContent">
                    <StackPanel ItemSpacing="1">
                        <Each Count="3">
                            <Panel Height="56" Color="#fffa" />
                        </Each>
                    </StackPanel>
                </ScrollView>

            </DockPanel>
        </Panel>
    </DockPanel>
</App>
2

ZOffset works on siblings within a single parent. Getting that right allows you to put the yellow draggables on top of the show/hide buttons.

ScrollView by default clips to bounds, which you already worked out for the inner horizontal scrollview. Do the same for the outer vertical scrollview and you’re done.

There, I fixed those things, and a few more:

<App>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <ScrollView ux:Name="Scroll" ClipToBounds="false">
            <StackPanel Alignment="Bottom">
                <Rectangle Layer="Background">
                    <Stroke Width="2" Color="#f00" />
                </Rectangle>
                <Each Count="2">
                    <Rectangle Height="32" Margin="5" Color="#fcc" ZOffset="1">
                        <Text Alignment="Center">Hide</Text>
                        <Clicked>
                            <Toggle Target="expanded" />
                        </Clicked>
                    </Rectangle>
                    <Rectangle Height="32" Margin="5" Color="#ccf" ZOffset="1">
                        <Text Alignment="Center">Show</Text>
                        <Clicked>
                            <Toggle Target="expanded" />
                        </Clicked>
                    </Rectangle>
                </Each>
                <!-- Horizontal Scroll -->
                <ScrollView AllowedScrollDirections="Horizontal" ClipToBounds="false" ZOffset="2">
                    <StackPanel Orientation="Horizontal" >
                        <Each Count="10">
                            <!-- Hellow Square -->
                            <Panel Width="64" Height="64" Margin="10">
                                <Rectangle Layer="Background" Color="#fd2" CornerRadius="10" />
                                <Draggable />
                            </Panel>
                        </Each>
                    </StackPanel>
                </ScrollView>
            </StackPanel>
        </ScrollView>
        <WhileTrue ux:Name="expanded">
            <Move Target="Scroll" Y="-1" RelativeTo="Size" RelativeNode="Drawer" Duration=".3" />
            <Move Target="Drawer" Y="-1" RelativeTo="Size" Duration=".3" />
        </WhileTrue>
        <Panel ux:Name="Drawer" Alignment="Bottom" Y="height(Drawer)">
            
            <!-- <LayoutAnimation>
                <Resize X="1" Y="1" RelativeTo="SizeChange" Duration="0.25"/>
                <Move X="1" Y="1" RelativeTo="PositionChange" Duration="0.25"/>
            </LayoutAnimation> -->
                        
            <DockPanel Color="#faa">
                <Panel ux:Name="Header" Dock="Top" Color="#aaf" Height="96">
                    
                    <SwipeGesture Direction="Down" ux:Name="swipeDown" Length="1" />
                    
                    <Swiped Source="swipeDown">
                        <DebugAction Message="Swipe DOWN!" />
                        <Toggle Target="expanded" />
                    </Swiped>
                </Panel>

                <ScrollView ux:Name="bottomReaderContent">
                    <StackPanel ItemSpacing="1">
                        <Each Count="3">
                            <Panel Height="56" Color="#fffa" />
                        </Each>
                    </StackPanel>
                </ScrollView>

            </DockPanel>
        </Panel>
    </DockPanel>
</App>