I want to add a refresh button to my app so that I don't always have to quit the app to clear the data.
I have tried a RefreshRequested, but I can't make it work.
C# code:
private void RefreshButtonClick(object sender, RoutedEventArgs e)
{
RefreshContainer.requestRefresh();
}
<RefreshContainer>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="910" Height="383" Margin="0,0,0,0">
<RelativePanel
HorizontalAlignment="Center" BorderBrush="DarkOliveGreen" BorderThickness="8" Background="FloralWhite" Height="356" VerticalAlignment="Center" Width="871" Margin="0,0,0,0" Visibility="Visible" RequestedTheme="Default">
<AppBarButton x:Name="RefreshButton" Click="RefreshButtonClick"
Icon="Refresh" Label="Refresh" HorizontalAlignment="Left" Margin="155,178,0,0" VerticalAlignment="Top"/>
<TextBlock x:Name="timerLabel" HorizontalAlignment="Left" Text="00:00:00" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="72" FontWeight="Normal" TextAlignment="Center" Width="328" Margin="272,90,0,0"/>
<Button Name="startButton" Background="MediumSeaGreen" Foreground="White" Content="Start" HorizontalAlignment="Left" Click="Button_Click_Start" VerticalAlignment="Top" Margin="311,219,0,0"/>
<Button Name="stopButton" Background="MediumSeaGreen" Foreground="White" Content="Pause" HorizontalAlignment="Left" Click="Button_Click_Pause" VerticalAlignment="Top" Margin="398,219,0,0" RenderTransformOrigin="1.373,0.57"/>
<Button Name="resetButton" Background="MediumSeaGreen" Foreground="White" Content="Reset" HorizontalAlignment="Left" Click="Button_Click_Reset" VerticalAlignment="Top" Margin="498,219,0,0" RenderTransformOrigin="1.373,0.57"/>
<Button Name="restButton" Content="Parametres" HorizontalAlignment="Left" Click="Button_Click_Rest" VerticalAlignment="Top" Margin="698,192,0,0" RenderTransformOrigin="1.373,0.57"/>
<TextBlock Name="Round" Text="Nombre Round" HorizontalAlignment="Left" Height="20" Margin="382,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140" TextDecorations="Underline"/>
</RelativePanel>
</Grid>
</RefreshContainer>
I expect the app data to refresh
Refresh Button UWP
I tested your code, the problem is you have not set a scroll-able control as RefreshContainer's content. Base on #Stuart Smith provided document, you could realize refresh feature, before that you need place the above Grid content under the ScrollViewer.
Xaml
<RefreshContainer Name="MyRefreshContainer" RefreshRequested="MyRefreshContainer_RefreshRequested">
<ScrollViewer>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="910" Height="383" Margin="0,0,0,0">
<RelativePanel
HorizontalAlignment="Center" BorderBrush="DarkOliveGreen" BorderThickness="8" Background="FloralWhite" Height="356" VerticalAlignment="Center" Width="871" Margin="0,0,0,0" Visibility="Visible" RequestedTheme="Default">
<AppBarButton x:Name="RefreshButton" Click="RefreshButtonClick"
Icon="Refresh" Label="Refresh" HorizontalAlignment="Left" Margin="155,178,0,0" VerticalAlignment="Top"/>
<TextBlock x:Name="timerLabel" HorizontalAlignment="Left" Text="00:00:00" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="72" FontWeight="Normal" TextAlignment="Center" Width="328" Margin="272,90,0,0"/>
<Button Name="startButton" Background="MediumSeaGreen" Foreground="White" Content="Start" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="311,219,0,0"/>
<Button Name="stopButton" Background="MediumSeaGreen" Foreground="White" Content="Pause" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="398,219,0,0" RenderTransformOrigin="1.373,0.57"/>
<Button Name="resetButton" Background="MediumSeaGreen" Foreground="White" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="498,219,0,0" RenderTransformOrigin="1.373,0.57"/>
<Button Name="restButton" Content="Parametres" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="698,192,0,0" RenderTransformOrigin="1.373,0.57"/>
<TextBlock Name="Round" Text="Nombre Round" HorizontalAlignment="Left" Height="20" Margin="382,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140" TextDecorations="Underline"/>
</RelativePanel>
</Grid>
</ScrollViewer>
</RefreshContainer>
Code behind
private void RefreshButtonClick(object sender, RoutedEventArgs e)
{
MyRefreshContainer.RequestRefresh();
}
private async void MyRefreshContainer_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)
{
using (var RefreshCompletionDeferral = args.GetDeferral())
{
// Do some async operation to refresh the content
RefreshCompletionDeferral.Complete();
RefreshCompletionDeferral.Dispose();
}
}
Tomas, I see you've abandoned the refresh button for now, but I wanted to follow up in case you revisit this later or if others run into this issue in the future.
In order for the data to refresh, you'd need to code this in.
“To get fresh content when needed, handle the RefreshRequested event. In the event handler, you'll need code specific to your app to get the fresh content.” https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/pull-to-refresh#handle-a-refresh-request. There's a sample in the doc there too.
You'd typically use data binding for this and the RefreshRequested event would need to edit the bound object.
using (var RefreshCompletionDeferral = args.GetDeferral())
{
await FetchAndInsertItemsAsync(3);
}
In the sample, you'll notice that FetchAndInsertItemsAsync is inserting new items to the backing collection.
There's more info on data binding here: https://learn.microsoft.com/en-us/windows/uwp/data-binding/data-binding-quickstart
Related
I have a WPF application (C#) thats using a Material Designs PopUpBox for its menu navigation, as per the following:-
<materialDesign:PopupBox Margin="10,0,0,0" PlacementMode="BottomAndAlignLeftEdges" StaysOpen="false" IsEnabled="{Binding IsSystemControlsEnabled}" Style="{DynamicResource template_NavigationMenu}" >
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Foreground="White" Height="25" Kind="Menu" Width="25"/>
</materialDesign:PopupBox.ToggleContent>
<StackPanel Width="150" >
<Button Command="{Binding ScreenCommand}" CommandParameter="Dashboard" Content="Dashboard" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDashboard" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator/>
<Button Command="{Binding ScreenCommand}" CommandParameter="Encrypt" Content="Encrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuEncrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
<Button Command="{Binding ScreenCommand}" CommandParameter="Decrypt" Content="Decrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDecrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
</StackPanel>
</materialDesign:PopupBox>
Is there a way to cascade this menu and add an extra layer? So for example, if I was to select or hover over the button for Encryption, it would they give me a new popupbox, just to the right, with some new options relating to encryption?
I'm trying to find something like this https://m2.material.io/components/menus (first image) but can't find anything relating to C# / XAML, so looking for some inspiration from the experts...
Any help is greatly appreciated.
Thank you
I have .xaml items accross three files. In one .xaml I have option to change language at running.
Is there any chance how can I access items from others .xaml to change the language as well?
Changing language of .xaml items in MainWindow.xaml.cs
public partial class MainWindow : Window
{
string strLanguage = "";
Boolean boolInit = true;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Set_Language();
}
private void ddlLanguage_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Set_Language();
}
private void Set_Language()
{
if (boolInit == false)
{
strLanguage = "SMS_Vrana.Languages." + ((ComboBoxItem)ddlLanguage.SelectedItem).Name.ToString();
ResourceManager LocRM = new ResourceManager(strLanguage, typeof(MainWindow).Assembly);
lblNumber.Text = LocRM.GetString("strNumber");
lblMessage.Text = LocRM.GetString("strMessage");
btnSend.Content = LocRM.GetString("strSend");
menuItemFile.Header = LocRM.GetString("strMenuFile");
menuItemMainMenu.Header = LocRM.GetString("strMenuMainMenu");
menuItemClose.Header = LocRM.GetString("strMenuClose");
menuItemCheckConnection.Header = LocRM.GetString("strMenuConnection");
}
}
.xaml of Mainwindow.xaml:
<grid>
<Menu DockPanel.Dock="Top" Margin="0,0,0,434">
<MenuItem Header="_File" Name="menuItemFile">
<MenuItem Header="_Main Menu" Click="MenuItem_Click" Name="menuItemMainMenu"/>
<Separator/>
<MenuItem Header="Close" Click="MenuItem_Close" Name="menuItemClose"/>
</MenuItem>
<MenuItem Header="Monitoring" IsEnabled="False">
<MenuItem Header="Ping" IsCheckable="True" Checked="menuPingCheck" Unchecked="menuPingUncheck"/>
<MenuItem Header="GSM" IsCheckable="True" Checked="menuGsmCheck" Unchecked="menuGsmUncheck"/>
</MenuItem>
<MenuItem Header="Check Connection" Click="menuItemCheckConnection_Click" Name="menuItemCheckConnection"/>
<ComboBox x:Name="ddlLanguage" SelectionChanged="ddlLanguage_SelectionChanged" Height="23" Width="80">
<ComboBoxItem IsEnabled="False" IsSelected="True" Content="Language"/>
<ComboBoxItem x:Name="English" Content="English"/>
<ComboBoxItem x:Name="Czech" Content="Cesky"/>
</ComboBox>
<MenuItem Header="_Language" x:Name="menuLangTest" IsEnabled="True" Visibility="Hidden">
<MenuItem Header="Czech" x:Name="menuCzech" Checked="menuItemCzechCheck" Unchecked="menuItemCzechUnche"/>
<MenuItem Header="English" x:Name="menuEng" Checked="menuItemEngCheck" Unchecked="menuItemEngUnche"/>
</MenuItem>
</Menu>
<Ellipse Fill="#000000" Stroke="#000000" Margin="10,0,0,347" x:Name="ellGSM" HorizontalAlignment="Left" Width="38" Height="38" VerticalAlignment="Bottom" Visibility="Hidden"/>
<Ellipse Fill="#000000" Stroke="#000000" Margin="204,0,0,347" Name="ellCol" HorizontalAlignment="Left" Width="38" Height="38" VerticalAlignment="Bottom" Visibility="Hidden"/>
<TextBox x:Name="txtNumber" MaxLength="13" HorizontalAlignment="Left" Height="26" TextWrapping="Wrap" VerticalAlignment="Top" Width="310" Margin="10,153,0,0" PreviewTextInput="txtNumber_PreviewTextInput"/>
<TextBox x:Name="txtMessage" MaxLength="1300" HorizontalAlignment="Left" Height="100" TextWrapping="Wrap" VerticalAlignment="Top" Width="310" Margin="10,250,0,0"/>
<Button x:Name="btnSend" Cursor="Hand" Content="Send!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="310" Margin="10,407,0,0" Height="52" FontSize="36" Click="btnSend_Click"/>
<TextBlock Grid.Column="0" Name="lblNumber" Text="Number" Margin="10,122,213,321" FontSize="16"/>
<TextBlock Grid.Row="0" Grid.Column="0" Name="lblMessage" Text="Message" Margin="10,217,213,224" FontSize="16"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="GSM" VerticalAlignment="Top" Margin="53,46,0,0" Name="txtblockGsm" Visibility="Hidden"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="PING" VerticalAlignment="Top" Margin="172,46,0,0" Name="txtblockPing" Visibility="Hidden"/>
<Image HorizontalAlignment="Left" Name="imgGsm" Height="42" VerticalAlignment="Top" Width="49" Margin="271,40,0,0" Source="C:\Users\lvrabel\source\repos\SMS Vrána\SMS Vrána\Images\GsmGreen.png" Visibility="Hidden"/>
<Label Content="1300" HorizontalAlignment="Left" Margin="287,345,0,0" VerticalAlignment="Top" Height="25" Name="lblLeftCharacters" />
<Label Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="280,84,0,0" Name="lblGsmSignal" Width="40"/>
</grid>
.xaml of Authentication.xaml what I would like to access in MainWindow.xaml.cs for changing language for that items as well. I just would like to change language in whole application and no just for one window.
<Grid Margin="0,-17,0,0">
<Menu DockPanel.Dock="Top" Margin="0,17,0,432">
<MenuItem Header="File" FontSize="16" Name="menuItemFile">
<MenuItem Header="Back on Main Menu" Click="menuItemMainMenuClick"/>
<Separator/>
<MenuItem Header="Close" Click="menuItemCloseClick"/>
</MenuItem>
</Menu>
<Label Content="IP Adress" Name="lblIPAddress" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,210,0,0" Height="36" Width="101" FontSize="16"/>
<Label Content="Login" Name="lblLogin" HorizontalAlignment="Left" Margin="10,279,0,0" VerticalAlignment="Top" Height="31" Width="59" FontSize="16"/>
<Label Content="Password" Name="lblPassword" HorizontalAlignment="Left" Margin="10,343,0,0" VerticalAlignment="Top" Height="31" Width="75" FontSize="16"/>
<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="292" Margin="10,251,0,0" Name="txtBoxIP" PreviewTextInput="txtBoxIP_PreviewTextInput"/>
<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="292" Margin="10,315,0,0" Name="txtBoxLogin"/>
<PasswordBox HorizontalAlignment="Left" VerticalAlignment="Top" Width="292" Margin="10,379,0,0" PasswordChar="*" Name="pswBox" Height="23" />
<CheckBox Content="Remember me!" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,413,0,0" Name="CheckBoxRemCredts" Checked="CheckBoxRemCredts_Checked"/>
<Button Content="Login" Cursor="Hand" HorizontalAlignment="Left" Height="34" Margin="10,442,0,0" VerticalAlignment="Top" Width="292" Name="btnLoginAuth" Click="btnLoginAuth_Click" FontSize="18"/>
</Grid>
U can access the xaml code of any xaml until and unless they are in same project and same solution.
U just need to initialize the other xaml you want to use in your xaml.cs file.
For example, I have two xaml files Main.xaml and Login.xaml
So i can use Login view and its element in Main.xaml.cs
Syntax :
Main.xaml.cs
Login login=new Login();
Now you can access any control of Login page provided u give name to every element you use.
eg : login.TextBlockEmail.Text="yourtext";
UPDATED ANSWER :
Hi, I got what you are looking for. Your whole idea is to achieve Localization where all your views associated with the main view shall update.
There are multiple approaches to achieve this, here i am sharing links which may help you :
https://www.codeproject.com/Articles/22967/WPF-Runtime-Localization
https://www.codeproject.com/Articles/35159/WPF-Localization-Using-RESX-Files
https://social.msdn.microsoft.com/Forums/vstudio/en-US/4a7f049b-f1b7-4982-874f-f9ecfe3d9140/how-to-change-the-language-in-my-view-wpf?forum=wpf
c# - localization - changing language in wpf app
What you ask for is possible - surely you can get reference to some control in the backend file (.xaml.cs) and then assign it to some variable that is visible to both classes.
However this is better done by using events. You define some event on your main class that should be visible to every window, and then subscribe to it in the code for each window.
I want to hide all Stackpanels when a button is clicked programatically, how can I accomplish this?
<Window>
<Grid>
<Button x:Name="btn1" Click="toggle_stackpanels" />
<StackPanel HorizontalAlignment="Left" Height="505" Margin="705,0,0,0" VerticalAlignment="Top" Width="55" Background="#FFD82727"/>
<StackPanel HorizontalAlignment="Left" Height="505" Margin="655,0,0,0" VerticalAlignment="Top" Width="50" Background="#FF6DEA49"/>
<StackPanel HorizontalAlignment="Left" Height="505" Margin="600,0,0,0" VerticalAlignment="Top" Width="55" Background="#FF1F92BD"/>
</Grid>
</Window>
public void toggle_stackpanels(object sender, RoutedEventArgs e)
{
//Hide All Stackpanels
}
Ok I have been working on an app for awhile now this is my first windows phone app I have made and I have been running into a problem. The way I designed my app is my start page is a hub control and I have two textboxs and a date picker on each page and some other controls. Now what I want to do is when I press the add button on a given section then I want to take all the strings from my various controls and add it to a textfile that I will later use. My problem is when I make the event for the button I cannot access the controls because they are inside the hubs data template. I have looked a many other examples on how to get around this they just dont seem to work and I cant make sense of them. So if anyone on here has the patience to kinda step me through the process that would be wonderful. Thank you for any help.
<Page.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="85,7,0,0" TextWrapping="Wrap" Text=":" VerticalAlignment="Top" FontSize="21.333"/>
<TextBox x:Name="tbHours" LostFocus="tbHours_LostFocus" HorizontalAlignment="Left" Margin="0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText=" hrs" Width="80"/>
<TextBox x:Name="tbMinutes" LostFocus="tbMinutes_LostFocus" HorizontalAlignment="Left" Margin="95,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText=" min" Width="80"/>
<TextBlock HorizontalAlignment="Left" Margin="0,50,0,0" TextWrapping="Wrap" Text="Work date" VerticalAlignment="Top" FontSize="14.667"/>
<DatePicker LostFocus="DatePicker_LostFocus" HorizontalAlignment="Left" Margin="0,65,0,0" VerticalAlignment="Top" Width="127"/>
<AppBarButton x:Name="abtnAddHours" HorizontalAlignment="Left" Icon="Add" Label="" Margin="118,65,0,0" VerticalAlignment="Top" Click="abtnAddHours_Click"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="0,7,0,0" TextWrapping="Wrap" Text="$" VerticalAlignment="Top" FontSize="21.333"/>
<TextBox x:Name="tbExpenses" LostFocus="tbExpenses_LostFocus" HorizontalAlignment="Left" Margin="15,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText=" 0.00" Width="100"/>
<TextBlock HorizontalAlignment="Left" Margin="0,45,0,0" TextWrapping="Wrap" Text="Expense date" VerticalAlignment="Top" FontSize="14.667"/>
<DatePicker x:Name="dtpkrExpenses" LostFocus="dtpkrExpenses_LostFocus" HorizontalAlignment="Left" Margin="0,60,0,0" VerticalAlignment="Top" Width="115"/>
<TextBlock HorizontalAlignment="Left" Margin="0,115,0,0" TextWrapping="Wrap" Text="Expense notes" VerticalAlignment="Top" FontSize="14.667"/>
<TextBox x:Name="tbNotes" LostFocus="tbNotes_LostFocus" HorizontalAlignment="Left" Margin="0,140,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="200"/>
<AppBarButton x:Name="abtnAddExpense" HorizontalAlignment="Left" Icon="Add" Label="" Margin="193,128,0,0" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DataTemplate3">
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="14.667" Text="Working hour rate" Height="20"/>
<TextBlock HorizontalAlignment="Left" Margin="0,32,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="21.333" Text="$"/>
<TextBox x:Name="tbWage" LostFocus="tbWage_LostFocus" HorizontalAlignment="Right" Margin="0,25,237,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText=" 0.00" Width="89"/>
<AppBarButton x:Name="abtnAddWage" HorizontalAlignment="Left" Icon="Add" Label="" Margin="92,14,0,0" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar ClosedDisplayMode="Compact">
<CommandBar.SecondaryCommands>
<AppBarButton Label="Reset"/>
</CommandBar.SecondaryCommands>
<AppBarButton x:Name="abtnSummary" Icon="List" Label="Summary" Click="abtnSummary_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<Hub x:Name="Hub" Header="Hours+" Background="{ThemeResource PhoneAccentBrush}">
<HubSection x:Name="sctnAddHours" Header="Add hours" ContentTemplate="{StaticResource DataTemplate1}"/>
<HubSection x:Name="sctnAddExpenses" Header="Add expenses" ContentTemplate="{StaticResource DataTemplate2}"/>
<HubSection x:Name="sctnWage" Header="Wage" Height="580" ContentTemplate="{StaticResource DataTemplate3}"/>
</Hub>
</Grid>
Use the Loaded event of the control you want to access and assign it to a local variable like this.
XAML
<AppBarButton x:Name="abtnAddHours" Loaded="abtnAddHours_Loaded" HorizontalAlignment="Left" Icon="Add" Label="" Margin="118,65,0,0" VerticalAlignment="Top" />
Code Behind
//local variable
private TextBlock _abtnAddHours;
//Loaded event of the TextBlock from the template
private void abtnAddHours_Loaded(object sender, RoutedEventArgs e)
{
_abtnAddHours = (TextBlock)sender;
//Add the event handler for the Click event
_abtnAddHours.Click += _abtnAddHours_Click;
}
private void _abtnAddHours_Click(object sender, RoutedEventArgs e)
{
//Put your logic here
}
Hi all,
I found an issue with textblock in my Silverlight application. As observed from the picture I attached, in the "How to play" silverlight page, the title are bound to disappear if I navigate from different route.
Please note that that is static textblock with static wording. Just that from different navigation point, the header wording is missing!
I navigate from screen to screen using this.content = new something; (e.g. : this.content = new instruction())
Can someone guide me on how to overcome this issue? All my page is not usercontrol, but just silverlight page.
<navigation:Page x:Class="SpotTheDifference.UI.Game.Silverlight.instruction"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="893" d:DesignHeight="670"
Title="BonusLink Spot 'd' Difference">
<Grid x:Name="LayoutRoot">
<Image x:Name="imgBG" HorizontalAlignment="Left" Height="670" VerticalAlignment="Top" Width="893" Source="/img/bg/dialogbox-bg.jpg" Visibility="Visible"/>
<Image x:Name="imgPlayGame" HorizontalAlignment="Left" Height="50" Margin="731,209,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_play_red.png"/>
<Button x:Name="btnPlay" Content="" HorizontalAlignment="Left" Margin="731,209,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnPlay_Click" MouseEnter="btnPlay_MouseEnter" MouseLeave="btnPlay_MouseLeave"/>
<Image x:Name="imgScoreBoard" HorizontalAlignment="Left" Height="50" Margin="731,264,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_scoreboard_red.png"/>
<Button x:Name="btnScoreBoard" Content="" HorizontalAlignment="Left" Margin="731,264,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnScoreBoard_Click" MouseEnter="btnScoreBoard_MouseEnter" MouseLeave="btnScoreBoard_MouseLeave"/>
<Image x:Name="imgProfile" HorizontalAlignment="Left" Height="50" Margin="731,319,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_profile_red.png"/>
<Button x:Name="btnProfile" Content="" HorizontalAlignment="Left" Margin="731,319,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnProfile_Click" MouseEnter="btnProfile_MouseEnter" MouseLeave="btnProfile_MouseLeave"/>
<Image x:Name="imgHowToPlay" HorizontalAlignment="Left" Height="50" Margin="731,374,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_howto_green.png"/>
<Image x:Name="imgLogOut" HorizontalAlignment="Left" Height="50" Margin="731,429,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_logout_red.png"/>
<Button x:Name="btnLogOut" Content="" HorizontalAlignment="Left" Margin="731,429,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnLogOut_Click" MouseEnter="btnLogOut_MouseEnter" MouseLeave="btnLogOut_MouseLeave"/>
<TextBlock x:Name="lblDesc" HorizontalAlignment="Left" Margin="145,250,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="505" Height="195" Foreground="#FF007EFF" FontFamily="Comic Sans MS" FontSize="14.667" FontWeight="Bold">
<Run Text="There will be a set of 2 almost identical pictures revealed every month for players to identify 10 differences each."/>
<LineBreak/>
<Run/>
<LineBreak/>
<Run Text="With every correct click, a circle will appear on the difference spot; whereas every wrong click, the timer will be further reduced."/>
<LineBreak/>
<Run/>
<LineBreak/>
<Run Text="Total play time for this game is 30 seconds."/>
<LineBreak/>
<Run Text="(Hint: The faster you identify the differences, the higher the score)"/>
</TextBlock>
<TextBlock x:Name="lblHeader" Text="Spot 'd' Difference: How to Play Instruction" Margin="146,214,275,427" FontFamily="Comic Sans MS" FontSize="21.333" FontWeight="Bold" Width="472" Height="29" />
</Grid>