State based Swipes (disable when opened enable when closed)

How-to Discussions
1

Hello, I’m currently facing a problem when trying to do a state-based swipe panel.

I have a Grid with name ReaderBottomBar that is only 15% of the height of the screen. When it gets swiped up it should open to 100% … but because there I want to put swipeable content I want to disable the swipe gesture when it’s opened. I was trying to have a WhileTrue with a ux:Name="expanded" that would act as a variable that changes.

The problem is that it seems that the WhileFalse/WhileTrue that works with the expanded element doesn’t seem to be working.

<Grid ux:Name="ReaderBottomBar" Dock="Bottom" ColumnCount="4" Height="15%" Background="#fff">
            <WhileTrue ux:Name="expanded" Value="false">
                <Change ReaderBottomBar.Height="100" Easing="CubicInOut" Duration="1" DelayBack="0"/>
            </WhileTrue>

            <!-- Swipe Up, should be enabled when expanded is false -->
            <SwipeGesture ux:Name="swipeUpReader" Direction="Up" Length="50" Type="Simple" />
            
                <Swiped Source="swipeUpReader">
                    <WhileFalse Value="{Property expanded.Value}">
                        <Set expanded.Value="true" />
                        <DebugAction Message="Swiped UP!" />
                    </WhileFalse>
                </Swiped>

            <!--Swipe down, should be enabled only when its opened...-->
            <SwipeGesture ux:Name="swipeDownReader" Direction="Down" Length="50" Type="Simple" />
            <Swiped Source="swipeDownReader">
                    <Set expanded.Value="false" />
            </Swiped>
            
            <Clicked>
                <WhileFalse Value="{Property expanded.Value}">
                    <Set expanded.Value="true" />
                    <DebugAction Message="Clicked!" />
                </WhileFalse>
            </Clicked>
        </Grid>

And the last question, I want that the SwipeDown gesture to be only in a small area of the top of the Grid Element. Thanks!

2

Hi Daniel,

took a stab at it, and made a slightly better version (with a couple neat tricks that you might find useful) of what you’re trying to make. Let me know if you have any further questions.

<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">
                    <StackPanel ItemSpacing="1">
                        <Each Count="30">
                            <Panel Height="56" Color="#fffa" />
                        </Each>
                    </StackPanel>
                </ScrollView>

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

Nice! Thanks! :smiley:

4

Daniel,
I found something I did before for another app, and made into a more generic example, it’s almost the same approach as Uldis, but using a single Active type SwipeGesture. So as I already took my time making it, why not share it here…

<App>
  <ClientPanel>
    <DockPanel Dock="Fill" ux:Name="parentContainer">

      <Panel ux:Name="hiddenBody" Dock="Bottom" Height="0%" Width="100%" Background="#F2F2F2">
        <WhileTrue ux:Name="enableContents">
          <ScrollView>
            <StackPanel ItemSpacing="5" Padding="5">
              <Each Count="30" Defer="Deferred">
                <Panel ux:Name="item" Height="40" Opacity="1" Width="100%">
                  <Rectangle CornerRadius="10" Layer="Background" Color="#BEBEBE"/>
                  <AddingAnimation>
                    <Change item.Opacity="0" Duration="0.1"/>
                    <Move Y="-0.4"  Duration="0.3" Easing="BounceOut" RelativeTo="Size"/>
                    <Scale Factor="0.1" Easing="BackOut" Duration="0.4"/>
                  </AddingAnimation>
                </Panel>
              </Each>
            </StackPanel>
          </ScrollView>
        </WhileTrue>
      </Panel>

      <Panel ux:Name="bottomPanel" Width="100%" Height="9%" Dock="Bottom" Alignment="Center" Background="#A3A3A3">
        <SwipeGesture Direction="Up" ux:Name="upSwipe" Type="Active" LengthNode="parentContainer" Length="250"/>
        <Text Value="SWIPE UP or CLICK" Alignment="Center"/>

        <!-- CLICK TO OPEN WHILE CLOSED -->
        <WhileSwipeActive Source="upSwipe" Invert="true">
          <Clicked>
            <Set upSwipe.IsActive="true"/>
          </Clicked>
        </WhileSwipeActive>

        <!-- CLICK TO CLOSE WHILE OPENED -->
        <WhileSwipeActive Source="upSwipe">
          <Clicked>
            <Set upSwipe.IsActive="false"/>
          </Clicked>
        </WhileSwipeActive>

      </Panel>

      <SwipingAnimation Source="upSwipe">
        <Change hiddenBody.Height="91%"/>
      </SwipingAnimation>

      <Swiped Source="upSwipe" How="ToActive">
        <Set enableContents.Value="True"/>
      </Swiped>

      <Swiped Source="upSwipe" How="ToInactive">
        <Set enableContents.Value="False"/>
      </Swiped>

    </DockPanel>
  </ClientPanel>
</App>
5

Thanks for sharing Igor! The more approaches, the better.