PullToReload issue

I realise this is not totally the intended way of using PullToReload, but should be doable?

See below sandbox code. Main screen (green) opens a fullscreen scrollable “modal” (yellow) which is closed by pulling out of bounds through PullToReload.

This works first time. But second time you open the same modal, it seems to be stuck on Loading state and therefor doesn’t trigger to close the same way as first.

<App>
<Page>

<Panel Color="Green">

<ScrollView ux:Name="closeable" Width="100%" Height="100%" Visibility="Hidden">

<PullToReload ux:Name="PTR">
<State ux:Binding="Pulling">
<Set Status.Value="Pulling" />
</State>
<State ux:Binding="PulledPastThreshold">
<Set Status.Value="PulledPastThreshold" />
<Set closeable.Visibility="Hidden" />
</State>
<State ux:Binding="Loading">
<Set Status.Value="Loading" />
</State>
<State ux:Binding="Rest">
<Set Status.Value="Rest" />
</State>
</PullToReload>

<Panel Color="Yellow" Width="100%" Height="100%">
<Text ux:Name="Status" Alignment="Center" />
</Panel>
</ScrollView>

<Button Text="Open">
<Clicked>
<Set closeable.Visibility="Visible" />
</Clicked>
</Button>

</Panel>

</Page>
</App>

Hi Znoopykid,

I recalled that recently we built something similar in this thread. I then took the same concept and added a Scrolled trigger to it, et voila :

<App>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <Panel>
            <DockPanel Height="80%" Color="#faa" Alignment="Bottom" Anchor="50%,height(bottomReaderHeader)">

                <Translation ux:Name="bottomReaderTrans" Y="0" RelativeTo="Size" RelativeNode="bottomReaderContent" />

                <WhileTrue ux:Name="expanded">
                    <Change bottomReaderTrans.Y="-1" Duration="0.36" Easing="CubicInOut" />
                </WhileTrue>

                <Panel ux:Name="bottomReaderHeader" Dock="Top" Color="#aaf" Height="96">
                    <Clicked>
                        <DebugAction Message="Clicked!" />
                        <Toggle Target="expanded" />
                    </Clicked>

                    <SwipeGesture ux:Name="swipeUpReader" Direction="Up" Length="50" Type="Simple" />
                    <SwipeGesture ux:Name="swipeDownReader" Direction="Down" Length="50" Type="Simple" />

                    <Swiped Source="swipeUpReader">
                        <DebugAction Message="Swiped UP!" />
                        <Set expanded.Value="true" />
                    </Swiped>
                    <Swiped Source="swipeDownReader">
                        <DebugAction Message="Swiped DOWN!" />
                        <Set expanded.Value="false" />
                    </Swiped>
                </Panel>

                <ScrollView ux:Name="bottomReaderContent">
                    <Scrolled To="Start" Within="-80">
                        <DebugAction Message="Scrolled too far down!" />
                        <Set expanded.Value="false" />
                    </Scrolled>
                    <StackPanel ItemSpacing="1">
                        <Each Count="30">
                            <Panel Height="56" Color="#fffa" />
                        </Each>
                    </StackPanel>
                </ScrollView>

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

Thanks tons for the quick reply!

Very elegant solution, and above and beyond what I needed.