Adaptive UI UWP - xaml

I am trying to learn about adaptive UI. I use bootstrap alot, but am in the process of designing a Windows 10 app with xaml. I am wanting the textboxes and textbloxks to adjust based on if the user shrinks the window or not. This is what I have, but it is not adapting nor is it responsive.
<Grid Grid.Row="1">
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,22,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxTitle" Margin="79,24,0,0" Grid.Row="1" Width="800" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,131,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Body" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxBody" Margin="79,133,-225,0" Grid.Row="1" Width="800" Height="500" TextWrapping="Wrap" AcceptsReturn="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button x:Name="btnSubmitArticle" Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="80,20,20,20" d:LayoutOverrides="Width"/>
</Grid>
Additional Question
How can I pull the text in the textbox all the way to the right of the window and have it respond correctly when the screen size changes.
<RelativePanel Margin="12,12">
<TextBlock x:Name="txtBoxDate"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="14"
TextAlignment="Right"
TextWrapping="Wrap"
Text="Title" />
</RelativePanel>
Can anyone point me in the right direction to making these elements repsonsive depending on screen size?

Assuming that the whole row stretches, the problem is that you're setting Width of those elements (and some weird Margins, probably because you dragged and dropped the controls from the toolbox). You can use a RelativePanel to nicely stack the items and keep them stretched from left to right inside the panel:
<RelativePanel Margin="12,0">
<TextBlock x:Name="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
TextWrapping="Wrap"
Text="Title" />
<TextBox x:Name="txtBoxTitle"
RelativePanel.Below="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
TextWrapping="Wrap" />
<TextBlock x:Name="SecondTextBlock"
RelativePanel.Below="txtBoxTitle"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
Margin="0,8,0,0"
TextWrapping="Wrap"
Text="Body" />
<TextBox x:Name="txtBoxBody"
RelativePanel.Below="SecondTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
Height="500"
TextWrapping="Wrap"
AcceptsReturn="True" />
<Button x:Name="btnSubmitArticle"
RelativePanel.Below="txtBoxBody"
Content="Submit"
Margin="0,8,0,0"
d:LayoutOverrides="Width"/>
</RelativePanel>

Related

Center text vertically (TextBlock)

I'm struggling to vertically center text using TextBlock. I know that it adds extra space above the space in case you use accents but why it isn't consistent with the space below then? There's a few extra pixels.
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Grid Padding="4,8" BorderThickness="8,0" Width="104">
<TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
<TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
</Grid>
<Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockRemoteScore" Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
</Grid>
</StackPanel>
I've played with Line Height and Text Line Bounds but I can't why a way to make the text still vertical centered once I change the font.
Updated code to reproduce issue:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
<TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
<TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
</StackPanel>
<Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
You should have a play with these two properties. In your case you are probably more interested in TextLineBounds.
<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />
Update
I am not sure if your screenshot is 100% accurate. I have used your code to produce the following pictures. Note I have scaled them up by 10 times.
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>
With TextLineBounds set to Tight
With TextLineBounds set to Full
Yes, on the first one, there's still a tiny little gap (about 0.3 epx) between the bottom edge of number 8 and the Line, but this is mostly due to layout rounding and effective pixel snapping. I don't think it's noticeable to human eyes. :)
P.S. You cannot purely rely on checking the visuals from Blend Designer as sometimes the artboard doesn't get updated on time to give you the correct result. You should always run your app and check from there.
I have tested your code and reproduced this behavior. If your have not set the height and width of TextBlock, it will set them based on your text font size automatically .
For example, If the FontFamily is Courier New and the font size is 25, and the actual width and height of TextBlock is 16.00244140625 , 29.3203125. It will generate deviation when you center the text vertically. However, you could manual correct it via modifying the Padding just like the follow

Items in a horizontal StackPanel position incorrectly on remote device (Windows Store App)

I'm developing a Windows Store App for Windows 8.1 for use with a specific kind of Surface Pro tablet.
While in the Designer, I lined up two TextBlocks exactly as I wanted them using a horizontal StackPanel and ran them in the Simulator (1920x1080) and they were aligned properly. When the same app was exported to the device (1920x1080), the text slanted downward, with each additional TextBlock bringing each TextBlock after it down by 2px.
How can I ensure that the items in the StackPanel don't move themselves downwards on my device? Thanks!
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,0,30,40" VerticalAlignment="Bottom">
<TextBlock x:Name="pageTitle" Text="" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" FontFamily="Global User Interface"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Height="30" Margin="20,0,0,0" VerticalAlignment="Bottom" Width="867">
<TextBlock Text="{Binding A}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Margin="14,6,12,0" Text="" FontSize="18" FontFamily="Segoe UI Symbol" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding B}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Text="{Binding C}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</StackPanel>

Strange issue with ScrollViewer in XAML

I am trying to place a ScrollViewer around a TextBlock in XAML (here, the textblock is called ImageText). Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,0,-22,0">
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="130,64,0,0" TextWrapping="Wrap" Text="Load the image here." VerticalAlignment="Top" Height="37" Width="555" FontSize="25"/>
<Button x:Name="LoadButton" Content="Load" HorizontalAlignment="Left" Margin="50,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="LoadButton_Click"/>
<Button x:Name="ExtractButton" Content="Extract" HorizontalAlignment="Left" Margin="240,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="ExtractButton_Click"/>
<Image x:Name="PreviewImage" HorizontalAlignment="Left" Height="296" Margin="76,292,0,0" VerticalAlignment="Top" Width="296"/>
<TextBlock x:Name="ExtractedTextBlock" HorizontalAlignment="Left" Margin="922,64,0,0" TextWrapping="Wrap" Text="Extracted Text:" VerticalAlignment="Top" FontSize="25" Width="173"/>
<ScrollViewer>
<TextBlock x:Name="ImageText" Margin ="922,100,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
However, when I try to run the program, it for some reason none of the buttons work i.e. I cannot click them, and when I remove the ScrollViewer, everything works fine. What am I doing wrong? Thanks in advance.
You placed the Margin in the TextBlock instead of the ScrollViewer, change to the following:
<ScrollViewer Margin ="922,100,0,0" >
<TextBlock x:Name="ImageText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
And now will work. Anyway instead of doing this like you did I encourage you to use Grid.Rows and Columns or RelativePanel (Windows 10 Apps)

How to expand Designer View with ScrollViewer in Visual Studio 2013?

I am adding more content than the Designer View sees in Visual Studio 2013 for Windows Phone 8. I added ScrollViewer within the Grid to be scrollable but it doesn't scroll neither does designer view and I cannot see the content but only see highlights of my content and move them about invisibility without seeing exactly where I would like it to be positioned. The last three buttons I put are not seen in designer view because the view is cut off from seeing it.
So, I would like a solution as to how I can work with the designer view that expands content larger than designer view on a single page?
Secondly, the ScrollViewer is not visible when applied to the Grid. Any solutions to make it work?
Thanks!
XAML Code Focus:
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="JP APPS" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="<Data Query>" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalScrollBarVisibility="Visible" Height="1000" Width="Auto">
<Grid>
<TextBlock x:Name="firstNameTBL" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="First Name:" VerticalAlignment="Top"/>
<TextBox x:Name="firstNameTB" HorizontalAlignment="Left" Height="72" Margin="0,42,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="lastNameTBL" HorizontalAlignment="Left" Margin="10,119,0,0" TextWrapping="Wrap" Text="Last Name:" VerticalAlignment="Top"/>
<TextBox x:Name="lastNameTB" HorizontalAlignment="Left" Height="72" Margin="0,151,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="emailAddressTBL" HorizontalAlignment="Left" Margin="10,228,0,0" TextWrapping="Wrap" Text="Email Address:" VerticalAlignment="Top"/>
<TextBox x:Name="emailAddressTB" HorizontalAlignment="Left" Height="72" Margin="0,260,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="dateOfBirthTBL" HorizontalAlignment="Left" Margin="10,337,0,0" TextWrapping="Wrap" Text="Date Of Birth:" VerticalAlignment="Top"/>
<toolkit:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="dateOfBirthPicker" ValueChanged="dateOfBirthPicker_ValueChanged" Margin="0,370,0,0"/>
<TextBlock HorizontalAlignment="Left" Margin="10,447,0,0" TextWrapping="Wrap" Text="Gender:" VerticalAlignment="Top"/>
<RadioButton Content="Male" HorizontalAlignment="Left" Margin="0,479,0,0" VerticalAlignment="Top"/>
<RadioButton Content="Female" HorizontalAlignment="Left" Margin="113,479,0,0" VerticalAlignment="Top"/>
<TextBlock Name="fingerprint" HorizontalAlignment="Left" Margin="10,551,0,0" TextWrapping="Wrap" Text="Fingerprint:" VerticalAlignment="Top"/>
<Button Content="SCAN HERE" HorizontalAlignment="Stretch" Margin="0,583,232,208" VerticalAlignment="Stretch"/>
<Button Content="Submit" HorizontalAlignment="Left" Margin="154,0,0,136" VerticalAlignment="Bottom"/>
<Button Content="Reset All" HorizontalAlignment="Left" Margin="10,0,0,131" VerticalAlignment="Bottom"/>
</Grid>
</ScrollViewer>
</Grid>
Full XAML Code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="JP APPS" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="<Data Query>" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--Height of the Grid has to be greater than the ScrollViewer's Height to make it scrollable.-->
<!--Removing the ScrollViewer's Height enables you to see the entire page in a transparent-like view-->
<ScrollViewer Height="605" Width="480" HorizontalAlignment="Left" Margin="0,0,0,-390" VerticalAlignment="Top" Grid.Row="1">
<Grid MinHeight="605" Height="1000">
<TextBlock x:Name="firstNameTBL" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="First Name:" VerticalAlignment="Top"/>
<TextBox x:Name="firstNameTB" HorizontalAlignment="Left" Height="72" Margin="0,42,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="lastNameTBL" HorizontalAlignment="Left" Margin="10,119,0,0" TextWrapping="Wrap" Text="Last Name:" VerticalAlignment="Top"/>
<TextBox x:Name="lastNameTB" HorizontalAlignment="Left" Height="72" Margin="0,151,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="emailAddressTBL" HorizontalAlignment="Left" Margin="10,228,0,0" TextWrapping="Wrap" Text="Email Address:" VerticalAlignment="Top"/>
<TextBox x:Name="emailAddressTB" HorizontalAlignment="Left" Height="72" Margin="0,260,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="dateOfBirthTBL" HorizontalAlignment="Left" Margin="10,337,0,0" TextWrapping="Wrap" Text="Date Of Birth:" VerticalAlignment="Top"/>
<toolkit:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="dateOfBirthPicker" ValueChanged="dateOfBirthPicker_ValueChanged" Margin="0,370,0,0"/>
<TextBlock HorizontalAlignment="Left" Margin="10,447,0,0" TextWrapping="Wrap" Text="Gender:" VerticalAlignment="Top"/>
<RadioButton Content="Male" HorizontalAlignment="Left" Margin="0,479,0,0" VerticalAlignment="Top"/>
<RadioButton Content="Female" HorizontalAlignment="Left" Margin="113,479,0,0" VerticalAlignment="Top"/>
<TextBlock Name="fingerprint" HorizontalAlignment="Left" Margin="10,551,0,0" TextWrapping="Wrap" Text="Fingerprint:" VerticalAlignment="Top"/>
<Button Content="SCAN HERE" HorizontalAlignment="Stretch" Margin="0,420,250,0" VerticalAlignment="Stretch" Height="250"/>
<Button Content="Submit" HorizontalAlignment="Stretch" Margin="0,0,250,94" VerticalAlignment="Bottom"/>
<Button Content="Reset All" HorizontalAlignment="Stretch" Margin="235,0,10,94" VerticalAlignment="Bottom"/>
</Grid>
</ScrollViewer>
</Grid>

Windows Store-app with login-screen

I need my program to start up with an login-screen, but I can not figure out how to make it look pretty.
I tried with a code, that looks like the following, but I do not think it is the "true way" to do it
<Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<TextBlock HorizontalAlignment="Left" Margin="647,31,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Margin="634,62,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Margin="647,128,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Margin="634,167,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="632,243,0,0" Grid.Row="1" VerticalAlignment="Top"/>
Can anybody tell me how to create a pretty login-screen as start-screen
I have though of a dialog, as it should not be possible to go back to it, but how can I create it with an empty background?
UPDATE
Thanks to DanielRozo in his answer below, my code now looks like this
<Popup IsOpen="True" Margin="200" Height="260" Width="900">
<Grid Height="250">
<TextBlock Style="{StaticResource HeaderTextStyle}" Text="Login" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Top" Height="50" />
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,63,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBox Name="InputUsername" Margin="0,63,0,0" HorizontalAlignment="Right" Height="40" Width="650"/>
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,138,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<PasswordBox Name="InputPassword" Margin="0,0,138,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="40" Width="650" />
<Button Name="Login" Content="" Margin="200,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
<Button Name="Cancel" x:Uid="LoginPopupCancel" Content="" Margin="300,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
</Grid>
</Popup>
But it does not work, when I rotate the screen, so I created this question
I also needs help to figure out how to set the page to a login-page
How about using the Popup class? I think it's a better approach of what you want. Something like:
<Popup Margin="200" IsOpen="True">
<Grid Margin="0" Height="322" Width="865">
<TextBlock Text="App Name Login" Style="{StaticResource HeaderTextStyle}" Margin="252,4,200,266"></TextBlock>
<TextBlock Text="User" Style="{StaticResource ResourceKey=SubheaderTextStyle}" Margin="244,63,498,223"/>
<TextBox x:Name="user" Margin="440,62,180,216"></TextBox>
<TextBlock Text="Pass" Style="{StaticResource ResourceKey=SubheaderTextStyle}" Margin="244,137,498,149"/>
<TextBox x:Name="pass" Margin="440,138,180,138"></TextBox>
<Button Name="Login" Content="Login" Margin="613,230,0,54"></Button>
<Button Name="Cancel" Content="Cancel" Margin="489,230,0,54"></Button>
</Grid>
</Popup>
Actually, I'd highly suggest the Web Auth Broker. If the user is auth'd using their LiveID, the WAB will provide you that credential, allowing you to not have to have credential re-entry for connected accounts. :)
I know that you've already marked another question as answer, but if you need to log in users into your app I think you should definitely take a look at the SplashScreen API. Overriding the default splashscreen, you'll have the users being always prompted with the username/password fields every time the app starts; moreover, you can never go back to the splashscreen, which is exactly what you say you need.
You should look at this sample: http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78 . I also suggest you to download Evernote from the market: trying an app made with the Splashscreen API may give you a better idea of what I'm saying.