Minimize/maximize when toggling

How-to Discussions
1

Hi guys!

I have been scratching my head caused by a couple of challenges. Could someone please provide me a clue or two to these challenges?

1 - I am trying to make a panel appear/disappear when toggling a button. The problem is that I can not find the right way to make the panel disappear correctly. It is suppose to disappear the same way that the panel appeared.

I have tried to Change Height to the detailsFolder when toggling. However, the resize seem to happen “from the middle of the Panel”, resulting in an other issue where the Panel shrinks from both top and bottom.

2 - I would like to make sure that the detailsFolder never eats up more than 3/5 of the (bottom part of the) screen, no matter the count of the nanoItem.

I have tried to dock an empty Panel to the Top of the screen. However, detailsFolder does not seem to care about what space any top docked requires, and starts to overlay the top docked Panel instead.

Here you have a clip illustrating the issue:

<App>

	<Panel Background="#e7e9eaFF" Width="100%" Height="100%">

		<DockPanel>

			<!-- Navigator todo -->
			<Panel ux:Name="bottomPanel" Width="100%" Height="40" Color="Black" Dock="Bottom">
				<Text Value="BottomPanel" FontSize="16" Alignment="Center" Color="#FFF"/>
			</Panel>

			<!-- Content container -->
			<Rectangle ux:Name="detailsFolder" Dock="Bottom" Color="#FFF" CornerRadius="2,2,0,0" Margin="10,0,10,0">
				<StackPanel ux:Name="detailsContainer" Visibility="Collapsed" Margin="15">
						<Each "nanoItem" Count="6">
							<Grid ux:Name="NanoGrid" Columns="1*,80" Margin="0,10,0,10">
								<StackPanel Alignment="CenterLeft">
									<Text Color="#000" FontSize="16" TextWrapping="Wrap" Value="Info line" />
								</StackPanel>
								<Panel Alignment="Right">
									<Text Alignment="Center" Value="Value" FontSize="12" Color="#000" Margin="2,1,0,0" />
								</Panel>
							</Grid>
						</Each>
				</StackPanel>
				<LayoutAnimation>
					<Move Vector="1" RelativeTo="PositionChange" Duration="0.5" DurationBack="0.5"  />
				</LayoutAnimation>
			</Rectangle>

			<!-- Expandor button -->
			<Rectangle ux:Name="expandFolderButton" Dock="Bottom" Height="72" Width="72" CornerRadius="50,50,0,0" Color="#F44336FF" HitTestMode="LocalBounds">
				
				<Text Alignment="Center" FontSize="34" Value="+" Color="#FFF" />

				<Tapped>
					<Toggle Target="folderOpen" />
				</Tapped>

				<DropShadow />

				<LayoutAnimation>
					<Move Vector="1" RelativeTo="PositionChange" Duration="0.5" DurationBack="0.5" />
				</LayoutAnimation>

			</Rectangle>

			<WhileTrue ux:Name="folderOpen">
				<Change detailsContainer.Visibility="Visible"/>
			</WhileTrue>

		</DockPanel>

	</Panel>

</App>
2

Hey!

What a nice looking app concept you have there! Also, thanks for posting a complete reproduction, a pleasure to work with.

To the point: LayoutAnimation should only be used when you’re altering Layout properties, such as Width, Height and others that affect the actual layout of an element. Redrawing layout is also somewhat expensive, so you should not get too carried away with doing too much of that.
Here’s some good news: in your case, the layout doesn’t need to be changed at all - you only want to “move a thing off screen”, not alter its dimensions or anything.

Here’s something that solves all the issues you outlined, and adds some flexibility on top:

<App Background="#e7e9ea">
    <DockPanel>

        <!-- this docks to the bottom -->
        <Panel ux:Name="bottomPanel" Dock="Bottom" Height="40" Color="Black">
            <Text Value="BottomPanel" FontSize="16" Alignment="Center" Color="#FFF" />
        </Panel>

        <!-- this fills the remaining available space -->
        <Panel>

            <!-- this is 30% high (of direct parent), and aligned to the bottom -->
            <Panel Alignment="Bottom" Margin="10,0,10,0" Height="30%">

                <!-- this offsets the parent vertically by its full height -->
                <Translation ux:Name="bottomPanelTrans" Y="1" RelativeTo="Size" />
                <WhileTrue ux:Name="folderOpen">
                    <!-- change the translation to 0 -->
                    <Change bottomPanelTrans.Y="0" Duration="0.5" Easing="QuadraticOut" EasingBack="BounceIn" />
                </WhileTrue>

                <ScrollView>
                    <StackPanel Margin="15">
                            <Each Count="10">
                                <Grid Columns="1*,80" Margin="0,10">
                                    <Text Color="#000" FontSize="16" TextWrapping="Wrap" Value="Info line" Alignment="CenterLeft" />
                                    <Text Alignment="Right" Value="Value" FontSize="12" Color="#000" Margin="2,1,0,0" />
                                </Grid>
                            </Each>
                    </StackPanel>
                </ScrollView>

                <Rectangle Color="#FFF" CornerRadius="2,2,0,0" />
                <Rectangle Height="72" Width="72" CornerRadius="50,50,0,0" Color="#F44336" Alignment="TopCenter" Anchor="50%,100%">
                    <Text Alignment="Center" FontSize="34" Value="+" Color="#FFF" />
                    <Tapped>
                        <Toggle Target="folderOpen" />
                    </Tapped>
                    <Shadow />
                </Rectangle>
                
            </Panel>

            <!-- this panel is directly beneath the "overlay", but fills the entire height -->
            <Panel>
                <Text Value="the rest of the content" Alignment="Center" />
            </Panel>

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

Hope this helps!

3

Man, this is awesome!! I was just hoping for some guidence, but I did not expect this! It does exactly was it was suppose to 100%.

Thank you so much also for the explanation. I did realize that the way I was trying to solve it made everything “laggy”, so that you offered a better approach is highly appreciated. Also, it seems like I should have a closer look at Translation - thank you for the heads up!

You made my day!