LoginPage.ux
<Panel ux:Class="LoginPage">
<Router ux:Dependency="router" />
<Panel>
<DockPanel>
<!-- MAIN MENU UI-->
<Panel ux:Name="loggedInView" Opacity="0" IsEnabled="false">
<DockPanel>
<!-- SIDE MENU BUTTON -->
<UserEvent ux:Name="requestMenu"/>
<OnUserEvent EventName="requestMenu">
<Set edge.Active="menu"/>
</OnUserEvent>
<UserEvent ux:Name="dismissMenu"/>
<OnUserEvent EventName="dismissMenu" Handler="{dismissMenu}"/>
<EdgeNavigator ux:Name="edge">
<AppMenu Edge="Left" ux:Name="menu" router="router">
<ActivatingAnimation>
<Change block.Visibility="Visible"/>
<Change block.Color="#0008"/>
</ActivatingAnimation>
</AppMenu>
<Panel>
<Rectangle Layer="Overlay" Visibility="Collapsed" Color="#0000" ux:Name="block"/>
<ApplicationTop router="router"/>
</Panel>
<Panel ux:Name="sideMenuCircle" Width="42" Height="42" Alignment="TopLeft" Margin="15" IsEnabled="false">
<DockPanel>
<StackPanel Margin="0,9,0,0">
<Rectangle Width="30%" Height="1" Color="#fff" Margin="0,5,0,0"/>
<Rectangle Width="50%" Height="1" Color="#fff" Margin="0,5,0,0"/>
<Rectangle Width="30%" Height="1" Color="#fff" Margin="0,5,0,0"/>
</StackPanel>
<Circle Color="main" />
</DockPanel>
</Panel>
<Panel ux:Name="searchCircle" Width="42" Height="42" Alignment="TopRight" Margin="15" Clicked="{gotoSearch}" >
<DockPanel>
<Image Width="30" Height="30" File="../Assets/search.png" Alignment="Center" Color="#eeeeee" />
<Circle Color="main" />
</DockPanel>
</Panel>
<Grid RowCount="3">
<!-- Main Center 2 - While Trigger -->
<DockPanel Row="2">
<Panel Color="#fff">
<Panel Color="#fff" Width="350">
<DragToggle />
</Panel>
</Panel>
</DockPanel>
<!-- Main center 1 - Top Categories -->
<DockPanel Background="#ddd" Row="1">
<TopCategories />
</DockPanel>
<!-- Main Top - Main Pictures -->
<Grid Rows="1*,auto,100" Row="0">
<Video ux:Name="CVideo" Layer="Background" File="../Assets/header.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" Opacity="1" />
<SemiBold ux:Name="COOKEAT" Value="COOKEAT" FontSize="25" Alignment="Center" Color="main" Margin="0,20,0,0" Opacity="0" />
<Icon.Cloud IconColor="#fff" Width="30" Height="30" X="20" Y="40" />
<Circle ux:Name="profile" Width="100" Height="100" Opacity="0">
<Scaling ux:Name="profileScaling" Factor="0.1" />
</Circle>
<Grid ux:Name="topTextGrid" RowCount="2" ColumnCount="3" Padding="20,0" Opacity="0">
<ExBold ColumnSpan="3" Value="오늘의 추천 메뉴" FontSize="17" Color="#fff"/>
</Grid>
</Grid>
</Grid>
</EdgeNavigator>
<!-- Main Bottom - Fotter Menu -->
<FooterMenu Dock="Bottom" />
</DockPanel>
</Panel>
<BottomBarBackground Dock="Bottom" />
</DockPanel>
<!-- snippet-begin:ScaleGuide -->
<Panel ux:Name="ScaleGuide" Width="500%" Height="500%" Alignment="Center" HitTestMode="None" BoxSizing="FillAspect" Aspect="1" />
<!-- snippet-begin:LoadingWhileTrue -->
<WhileTrue ux:Name="loading">
<Change changeWidth.Value="true" DelayBack="0" />
<Change loadCircle.Value="true" DelayBack="0" />
<Change scaleAndFade.Value="true" Delay="2.5" DelayBack="0" />
<Change showLoggedIn.Value="true" Delay="3.0" />
</WhileTrue>
<WhileTrue ux:Name="changeWidth">
<Change rectNormalScale.Width="60" Duration=".5" DurationBack="0" Easing="CircularInOut" />
</WhileTrue>
<WhileTrue ux:Name="loadCircle">
<Change text.Opacity="0" Duration="0.2" DurationBack="0" />
<Change loadingCircle.Opacity="1" Duration="0.3" Delay="0.2" DelayBack="0" DurationBack="0" />
<Spin Target="loadingCircle" Frequency="2" />
<Cycle Target="loadingCircle.LengthAngleDegrees" Low="30" High="300" Frequency="0.7" />
</WhileTrue>
<WhileTrue ux:Name="scaleAndFade">
<Change loadingCirclePanel.Opacity="0" Duration="0.1" />
<Change loadingButton.Opacity="1" Duration="0.01" />
<Change rectNormalScale.Opacity="0" Duration="0.01" />
<!-- snippet-begin:LoadingButtonScaleAnimation -->
<Scale Target="loadingButton" Factor="3" RelativeTo="SizeFactor" RelativeNode="ScaleGuide" Delay="0.01" Duration="0.7" Easing="ExponentialInOut" DurationBack="0" />
</WhileTrue>
<!-- snippet-begin:ShowLoggedInWhileTrue -->
<WhileTrue ux:Name="showLoggedIn">
<Change loggedInView.Opacity="1" Delay="0.1" Duration="0.65" DurationBack="0.35" DelayBack="0.2" Easing="CubicInOut" />
<Change sideMenuCircle.Opacity="1" Delay="0.1" Duration="0.65" DurationBack="0.7" DelayBack="0.3" Easing="CubicInOut" />
<Change COOKEAT.Opacity="1" Duration="0.3" Delay="0.3" />
<Change topTextGrid.Opacity="1" Duration="0.3" Delay="0.3" />
<Change loggedInView.IsEnabled="true" />
<Change sideMenuCircle.IsEnabled="true" />
</WhileTrue>
<!-- 로그인 화면-->
<Grid ux:Name="startPage" Rows="1.5*,auto,1*" Padding="40,0">
<WhileKeyboardVisible>
<Move Target="mark" Y="-200" Duration=".6" Easing="ExponentialInOut"/>
<Move Target="loginArea" Y="-200" Duration=".6" Easing="ExponentialInOut"/>
</WhileKeyboardVisible>
<Rectangle Layer="Background" Color="#fff" />
<Panel Row="2" Width="150" Height="60">
<Text ux:Name="text" Alignment="Center" Value="Sign in" FontSize="18" Color="#fff" />
<Panel ux:Name="loadingCirclePanel">
<Circle ux:Name="loadingCircle" Width="70%" Height="70%" Opacity="0" StartAngleDegrees="0" LengthAngleDegrees="90">
<Stroke Width="1" Brush="#fff" />
</Circle>
</Panel>
<Clicked>
<Toggle Target="loading" />
</Clicked>
<Rectangle ux:Name="rectNormalScale" CornerRadius="30" Color="main" Width="300" Height="60" />
<Circle ux:Name="loadingButton" Opacity="0" Alignment="Center" Layer="Background" Width="240" Height="240" Color="main">
<Scaling Factor="0.25" />
</Circle>
</Panel>
<Image ux:Name="mark" File="../Assets/logo.png" Width="120" Height="120" Row="0" Margin="40" />
<Grid ux:Name="loginArea" Row="1" Padding="0,20" RowCount="2" Columns="auto,1*" Height="160" MaxWidth="400">
<Image Row="0" Column="0" File="../Assets/user_icon.png" Width="20" Height="20" Margin="10,0,30,0" Alignment="Left" Color="sub" />
<TextInput Row="0" Column="1" PlaceholderText="Username" PlaceholderColor="color3" TextColor="sub" CaretColor="color4" />
<Rectangle Row="0" Column="0" Alignment="Bottom" ColumnSpan="2" Height="1" Color="color4" />
<Image Row="1" Column="0" File="../Assets/password_icon.png" Width="20" Height="20" Margin="10,0,30,0" Alignment="Left" Color="sub" />
<TextInput Row="1" Column="1" PlaceholderText="Password" PlaceholderColor="color3" TextColor="sub" CaretColor="color4" IsPassword="true" />
<Rectangle Row="1" Column="0" Alignment="Bottom" ColumnSpan="2" Height="1" Color="color4" />
</Grid>
</Grid>
</Panel>
</Panel>