Well I have an each command that displays the circles and when I navigate away from the home page and back to it, the circles dissappear. I am able to drag the blue circle in the corner for it to reappear but that shouldn’t be happening. Here’s a video of it.
and the code:
<Panel ux:Class="HomePage">
<Router ux:Dependency="router" />
<JavaScript File="Test.js" />
<Panel>
<LinearNavigation ux:Name="navigation">
<NavigationMotion GotoEasing="QuadraticOut" GotoDuration=".5" />
</LinearNavigation>
<SwipeNavigate SwipeDirection="Left" />
<Each Count="9">
<Media />
</Each>
</Panel>
<Panel ux:Class="Media" ux:Name="self" Opacity="0.4">
<ActivatingAnimation>
<Change self.Opacity="1" Duration="0.5" />
</ActivatingAnimation>
<EnteringAnimation>
<Move X="-.88" RelativeTo="ParentSize" Duration="0.5" />
</EnteringAnimation>
<ExitingAnimation>
<Move X=".88" RelativeTo="ParentSize" Duration="0.5"/>
</ExitingAnimation>
<SwipeGesture ux:Name="swipeUp" Direction="Up" Type="Active" />
<SwipingAnimation Source="swipeUp">
<Move Target="topLayer" Y="-.3" RelativeTo="Size" Duration="2.8" />
<Scale Target="MainMedia" Factor="0.8" Easing="QuadraticInOut" Duration="2.9"/>
<EnteringAnimation>
</EnteringAnimation>
</SwipingAnimation>
<WhileInactive Threshold="0.2">
<SetSwipeActive Target="swipeUp" Value="false" />
</WhileInactive>
<Panel ux:Name="topLayer" >
<Circle ux:Name="ProfilePic" Color="Blue" Layer="Overlay" Height="16.5%" Width="16.5%" Opacity="1" Alignment="Left" X="8%" Y="12.5%">
<Stroke Color="Black" Width="1.4" />
<DropShadow Distance="1.5" Spread=".3" />
</Circle>
<Circle Height="70%" Width="70%" Layer="Overlay" X="15.5%" ux:Name="MainMedia" Y="15%" Color="Purple" />
<Rectangle Width="100%" Color="Red" Layer="Background" Opacity="0" Height="50%" />
</Panel>
<Panel ux:Name="botLayer">
</Panel>
</Panel>
<Panel Color="Yellow" Height="12%" Alignment="Top">
</Panel>
<Panel Color="Yellow" Height="12%" Alignment="Bottom">
</Panel>
</Panel>
& the navigation
<DockPanel>
<Panel Height="12%" Dock="Bottom">
<StackPanel Orientation="Horizontal">
<Button Text="Home" Clicked="{navHome}"/>
<Button Text="Alerts" Clicked="{navAlerts}"/>
<Button Text="Profile" Clicked="{navProfile}"/>
</StackPanel>
</Panel>
</DockPanel>
var Observable = require('FuseJS/Observable');
function navHome() {
router.goto("Home");
}
function navAlerts() {
router.goto("Alerts");
}
function navProfile() {
router.goto("Profile");
}
module.exports = {
navHome:navHome,
navAlerts:navAlerts,
navProfile:navProfile
};