Develop Reference

Add background image to wp8 app

Hello i tried to add background image to one of my project pages , I am new to xmal and i need some help to understand why i cant see the background when i run the emulator.
<phone:PhoneApplicationPage
x:Class="ipublicSrv.Pages.MusicMenuPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush ImageSource="C:\Users\lior\Documents\Visual Studio 2013\Projects\IPubProject\ipublicSrv\ipublicSrv\Resources\24796-armin-van-buuren.jpg"
Stretch="UniformToFill" />
</Grid.Background>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Music Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Looks like you are using Image from Your Computer.Please add image in your project with Build type Content.then give correct path as :
ImageSource="/Resources/Images/yourImage.png //if you added image in `Resource/Image` folder.
Hope this Helps.Cheers.

Check if the build action is set to "content". That might be causing the issue.
And also check the path of the image that you are using. It has to be inside your project. Ideally inside the assets folder. or somewhere separately.
Hope it helps. Cheers.

Don't add your PC address. It won't run on emulator. Since the address isn't resolved. Add the background image in the Assets or any folder in your solution then use
ImageSource = "Assets/background.png"
Assuming you have image in Assets folder named background.png

Problems with dynamic height in Windows Phone 8 (see sketch inside)

I'm currently fiddling with a Windows Phone 8 Gui but i have run into some problems. The idea is rather simple:
There's a scrollviewer in the App that has 3 items in it. One of them (A) is always visible and has a fixed height. The two others (B and C) are supposed to have a dynamic height that uses the rest of the available screenspace in the scrollviewer (see sketch)
I have not been able to either
1) Find a XAML definitions that allows me to set-up the layout in the described way. The main Problem is getting the content in the scrollviewer to automatically have the correct height for the scrolling to happen and everything to line up exactly.
or
2) Dynamically set the correct height for all items in the code behind. My main problem here is getting the heights of the dynamically sized objects. Whatever i try i either get 0,0 or 0 or NaN.
here is the XAML code i have so far
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="224"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,0,0,108">
<TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}">
<Run Text="StackOverflow"/>
<Run Text="!"/>
</TextBlock>
</StackPanel>
<Grid x:Name="ContentPanel" Margin="0,136,0,0" Grid.RowSpan="2">
<ScrollViewer x:Name="mainScrollViewer" HorizontalAlignment="Left" VerticalAlignment="Top" Height="633" Margin="0">
<Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Here are my Elements A, B, C -->
<Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
and here's my minimal code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp1.Resources;
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
// Konstruktor
public MainPage()
{
InitializeComponent();
/*when the app starts, the height of the ContentGrid should be equal to the height of the Scrollviewer,
* therefore the height that element A and B should be together*/
var BAndCHeight = contentGrid.Height - element_A.Height;
/*with that in mind, the new height of the Content in the Scrollviewer should be */
var contentGridSupposedHeight = 2 * BAndCHeight + element_A.Height;
}
}
}
Can anyone give me a hint how this is supposed to be done? Maybe I'm missing something. If not, how do i get the correct heights of the Elements so i can scale them myself?
Thanks for your help!

You may want to try ActualHeight instead of Height.
This Should give the current height of the elements.
var BAndCHeight = contentGrid.ActualHeight - element_A.ActualHeight;
This may only be used during or after the Loaded event because the elements are actually rendered during the Loaded event.
I hope this helps.

I think no need to set dynamically height of any element, Your issue should be resolved in your xaml. May this will help you, You can copy paste xaml.
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" >
<TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}">
<Run Text="StackOverflow"/>
<Run Text="!"/>
</TextBlock>
</StackPanel>
<Grid x:Name="ContentPanel" Margin="0,10,0,0" Grid.Row0="1">
<ScrollViewer x:Name="mainScrollViewer" Margin="0">
<Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Here are my Elements A, B, C -->
<Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

To get the sizes right in the contentGrid, try this:
Set all your row heights to "Auto" in XAML
Then in your Loaded event handler, find which row has the largest ActualHeight and then set the heights of the other two rows to size "*"
void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
double h = -1;
for (int row = 0; row < 3; row++)
if (contentGrid.RowDefinitions[row].ActualHeight > h)
h = contentGrid.RowDefinitions[row].ActualHeight;
for (int row = 0; row < 3; row++)
if (contentGrid.RowDefinitions[row].ActualHeight < h)
contentGrid.RowDefinitions[row].Height = new GridLength(1, GridUnitType.Star);
}
contentGrid.RowDefinitions[tallestRow].Height = System.Windows.GridLength.Auto;
}

Windows Phone 8 XAML Editor setting variables to null at runtime

I've been trying to add a simple TextBlock control to my Windows Phone 8 app, however once I assign it a name in the GUI XAML editor and attempt to access the control via its assigned name in the C# code at runtime I get "NullReferenceExceptions" because the variable is never set.
I have narrowed the problem down to the PhoneApplicationPage method "FindName" i.e.
PhoneApplicationPage.FindName("videoName");
However a call like this to some of my controls (created in the GUI editor) simply return null. Has anybody had this problem and found a fix?
Regards.
The contents of the InitialiseComponent() method:
public void InitializeComponent() {
if (_contentLoaded) {
return;
}
_contentLoaded = true;
System.Windows.Application.LoadComponent(this, new System.Uri("/Youtube%20Downloader;component/MainPage.xaml", System.UriKind.Relative));
this.LayoutRoot = ((System.Windows.Controls.Grid)(this.FindName("LayoutRoot")));
this.TitlePanel = ((System.Windows.Controls.StackPanel)(this.FindName("TitlePanel")));
this.ContentPanel = ((System.Windows.Controls.Grid)(this.FindName("ContentPanel")));
this.videoName = ((System.Windows.Controls.TextBlock)(this.FindName("videoName")));
this.videoImage = ((System.Windows.Controls.Image)(this.FindName("videoImage")));
}
(The videoName and videoImage controls are the ones not getting added)
The XAML code is (that the editor has generated):
<phone:PhoneApplicationPage
x:Class="Youtube_Downloader.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="YOUTUBE DOWNLOADER" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock x:Name="videoName" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="56" FontSize="36" FontStyle="Normal"/>
<Image x:Name="videoImage" HorizontalAlignment="Center" Height="408" Margin="0,72,0,0" VerticalAlignment="Top" Width="446"/>
</Grid>
</Grid>

I had the same problem. Clean project will fix it.

Can't access LayoutRoot: Cannot implicitly convert type 'System.Windows.UIElement' to 'System.Windows.Controls.Grid'

I am trying to access LayoutRoot children using this simple code
using System.Windows.Controls;
using Microsoft.Phone.Controls;
namespace PhoneApp2
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
Grid grid = this.LayoutRoot.Children[1];
}
}
}
But get this error:
Cannot implicitly convert type 'System.Windows.UIElement' to
'System.Windows.Controls.Grid'. An explicit conversion exists (are you
missing a cast?)
XAML code
<phone:PhoneApplicationPage x:Class="PhoneApp2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--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>
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,0" />
<TextBlock Text="page name"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
</Grid>
</Grid>
</phone:PhoneApplicationPage>
What am I doing wrong?

try this
Grid grid = this.LayoutRoot.Children[1] as Grid;
Error is coming because this.LayoutRoot.Children[1] returns object of UIElement which is base class of many WPF controls for example Grid
What you need to do is explicitly convert the UIElement to Grid using as

How to place an XAML usercontrol in a grid

I have the following main.xaml and usercontrol.
I need to place several times the user control on the 2nd row, 2nd column of the grid, By using visual studio it wont allow to drag and drop the user control, so I suppose I have to do it by code, I just dont know how
MainPage.xaml
<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" x:Name="grid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="White" BorderThickness="3" Grid.Column="1" Background="Red" CornerRadius="30"/>
<TextBlock x:Name="txtCountry" Grid.Column="1" TextWrapping="Wrap" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="txtTime" Grid.Row="1" TextWrapping="Wrap" FontSize="180" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Usercontrol
<UserControl
x:Class="AlarmPro.TimeOnCity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AlarmPro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="250">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="#FFDE6A6A" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#FFDC4646">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Background="#FFAE4F00">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
</Border>
</Grid>
</UserControl>

Do you mean like this?
<my:UserControlName Grid.Column="2" Grid.Row="2" ... />
<my: in this case is the alias for the CLR namespace the UserControl resides in. It is defined at the top of your XAML, inside the <Window> or <UserControl> tag depending on context.
For example,
<Window ...
xmlns:my="clr-namespace:AssemblyName"
...
/>

MainPage.Xaml
<Page
x:Class="UserControlExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="MainContent" Background="Azure" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<local:UserControl1 x:Name="MyHelloWorldUserControl" Grid.Row="1" />
</ScrollViewer>
</Grid>
</Page>
UserControl1.xaml
<UserControl
x:Class="UserControlExample.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="Bisque">
<StackPanel>
<StackPanel Orientation="Horizontal" Height="81">
<TextBlock Text="Your Name is" Foreground="Blue" FontSize="30" Margin="0,0,0,10"/>
<TextBox x:Name="Input" Background="White" Width="225" />
</StackPanel>
<Button Content="Click Me" Foreground="Brown" FontSize="30" Click="Button_Click"/>
<TextBlock x:Name="Output" FontSize="100"/>
</StackPanel>
</Grid>
</UserControl>

MainPage.xaml, I am binding a login UserControl
by using the namespace : xmlns:UC="clr-namespace:Test.Views" , since I have my usercontrol in Folder named "Views".
<ScrollViewer>
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
</ScrollViewer>
Login.cs
public partial class Login : UserControl {
public event EventHandler BtnLoginClick;
public Login()
{
InitializeComponent();
}
private void btnLogin_Click(object sender, RoutedEventArgs e)
{
string userName = txtUserName.Text;
string userPassword = txtUserPassword.Password.Trim();
if (userName != null && userName != string.Empty && userPassword != null && userPassword != string.Empty)
{
if (this.BtnLoginClick != null)
{
this.BtnLoginClick(this, e);
}
}
else
{
MessageBox.Show("Invalid username or password");
}
}
}
Finally, dont forgot to use the event handler in MainPage.xaml to capture the button clicked event from Login Usercontrol to do other actions.
MainPage.xaml
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
Here "BtnLoginClick" its an event Handler defined in the Login.xaml[User Control].
Create new event for this "BtnLoginClick" event as i created "Login_BtnLoginClick".
MainPage.cs
private void Login_BtnLoginClick(object sender, EventArgs e)
{
Messagebox.Show("Event captured successfully");
////Here you can add your stuffs...
}

For UWP, in UserControl.xaml, find the local namespace xmlns:local notation: xmlns:local="using:ProjectName.Folder" at the top (by convention, C# namespaces are named the same way as the folder that contains them, so folder also means namespace).
In MainPage.xaml, add a reference to this namespace. The reference prefix can be any name desired: for example, CustomPrefix, as in xmlns:CustomPrefix="using:ProjectName.Folder". Then, anywhere in MainPage.xaml, display the control by prefixing its name with <CustomPrefix:...>.
UserControl.xaml
<UserControl
xmlns:local="using:ProjectName.Folder">
MainPage.xaml
<Page
xmlns:CustomPrefix="using:ProjectName.Folder">
<CustomPrefix:UserControl />
</Page>
The project needs to be built to discard XAML errors in Visual Studio, otherwise the design view remains blank and the XAML has green squiggles.