Drag and drop component between pages

How-to Discussions
1

Hi guys,

I was asked to do a Proof of Concept for a mobile app for tablets and one of the functionalities of this app is that we can drag a component between pages.

Just like this in the video:

Drag to other page

My question is if this is possible to implement and what would be the best way to do it. Can someone help me?

I’ve tried with Page Control and Point Attraction to change the page and I was successful but the component doesn’t pass to the other page.

Thank you.

2

Hi Ana,

if you’re saying that you have a part of your PoC working, could you please share the code so we can help you with it?

3

Hello Uldis,

so just to see if it was possible I combined this examples:

which resulted in:

<App Background="#eee">

    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <Grid Dock="Top" ColumnCount="2" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                	<PointAttractor ux:Name="centerAttract" Radius="10" Strength="10" />
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation">
            <Page ux:Name="page1" Background="#eee">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page1Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 1</WelcomeText>
                <Panel Width="60" Height="60" Layer="Overlay">
			        <Circle Color="#42A5F5" />
			        <Draggable />
			        <EnteredForceField ForceField="centerAttract">
			        	<DebugAction Message="Here" />
                        <Set navigation.Active="page2" />
			        </EnteredForceField>
			    </Panel>
            </Page>
            <Page ux:Name="page2" Background="#abb7b7">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page2Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 2</WelcomeText>
            </Page>
        </PageControl>

    </DockPanel>
</App>

This has three problems:

  • The circle is behind the Tabs, I want it to be in front of it.
  • I can change the tab but the circle is kept on the first tab page.
  • I can no longer go back to page 1.

Any idea how can I implement this?

Thanks.

4

We’ve played around with it a little, and here’s something you can try:

<App Background="#eee">
    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn" />
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center" />

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <Grid Dock="Top" ColumnCount="2" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <PointAttractor ux:Name="page1Attract" Radius="60" Strength="60" />
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                    <PointAttractor ux:Name="page2Attract" Radius="60" Strength="60" />
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation" Active="page1">
            <Page ux:Name="page1" Background="#eee">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page1Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 1</WelcomeText>
            </Page>
            <Page ux:Name="page2" Background="#abb7b7">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page2Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 2</WelcomeText>
            </Page>
        </PageControl>

        <Panel Width="60" Height="60" Alignment="Center" Layer="Overlay">
            <Circle Color="#42A5F5" />
            <Draggable />
            <EnteredForceField ForceField="page1Attract">
                <Set navigation.Active="page1" />
            </EnteredForceField>
            <EnteredForceField ForceField="page2Attract">
                <Set navigation.Active="page2" />
            </EnteredForceField>
        </Panel>
    </DockPanel>
</App>