We Keep Coding

Passing image selection from child window to MainPage

I'm working on a UWP FTP front-end application. I've created a UserControl that mimics the form of a standard Windows desktop icon (consisting of a StackPanel containing an Image and a TextBlock) which is to be used as a way of displaying saved favorites. What I'd like is for the user to be able to select any image to be used as the icon for each favorite, but have run into some pretty significant issue with getting this to work, I believe due to the Windows 10 "no access to filesystem" restriction--I haven't figured out that part yet.
As a temporary substitution, I came up with the idea of having a set of icons for the user to select from, all stored within the Assets folder of the application. I've created an IconSelector page/child window (IconSelector.xaml) that pops up when appropriate, allowing the user to select from 8 different Images.
The issue I'm running into is getting the selected Image back to the parent window (MainPage.xaml). I thought of just passing an int from child to parent, and then use that int with an enum to indicate the correct image, but I can't figure out how to pass any parameter at all between child and parent.
I did find this question on SO, but it's for Silverlighbt and doesn't seem to work in UWP (unless I implemented it incorrectly).
Does anybody have any idea on how to accomplish this? Code (relevant portions) pasted below:
MainPage XAML
<Canvas Grid.Column="1" Grid.Row="0" Grid.RowSpan="5" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Assets\Red.png" Canvas.ZIndex="200" />
<Border x:Name="addFtpGrid" Visibility="Visible" Canvas.Left="300" Canvas.Top="300" Width="600" Height="350" BorderBrush="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Link name" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Address" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Username" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Password" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Confirm Password" Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBox x:Name="linkNameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,0" />
<TextBox x:Name="addressEntry" Text="ftp://" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,0" />
<TextBox x:Name="usernameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,0" />
<PasswordBox x:Name="passwordEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3" Margin="5,0">
</PasswordBox>
<PasswordBox x:Name="confirmPasswordEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="4" Margin="5,0" LostFocus="ConfirmPasswordEntry_LostFocus" />
<Viewbox Grid.Column="2" Grid.Row="0" Grid.RowSpan="4" Margin="5,15,5,0">
<Image x:Name="imageEntry" Source="Assets/SquircleX.png" Tapped="ImageEntry_TappedAsync" />
</Viewbox>
<TextBlock Text="Click image to change" Grid.Column="2" Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button x:Name="saveNewFtpLink" Click="SaveNewFtpLink_Click" Content="Save Changes" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10"/>
</Grid>
</Border>
</Canvas>
MainPage C#
private async void ImageEntry_TappedAsync(object sender, TappedRoutedEventArgs e)
{
IconSelector selector = new IconSelector();
selector.Tapped += new TappedEventHandler(selector_Tapped);
ShowDialog(selector);
//List<string> fileTypes = new List<string> { ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".tiff", ".ico" };
//FileOpenPicker picker = new FileOpenPicker();
//picker.ViewMode = PickerViewMode.Thumbnail;
//picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
//foreach (string type in fileTypes)
//{
// picker.FileTypeFilter.Add(type);
//}
//StorageFile file = await picker.PickSingleFileAsync();
//if(file != null)
//{
// imageEntry.Source = new BitmapImage(new Uri(file.Path));
// Image selectedImage = new Image();
// selectedImage.Source = imageEntry.Source;
// imageEntry = selectedImage;
// imageEntry.UpdateLayout();
// imageToken = StorageApplicationPermissions.FutureAccessList.Add(file);
//}
}
IconSelector XAML
<Page
x:Class="FtpSharp.IconSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FtpSharp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="175" d:DesignWidth="600"
Background="{ThemeResource ContentDialogBackgroundThemeBrush}">
<Page.Resources>
<Style x:Key="selectionStyle" TargetType="Border">
<Setter Property="CornerRadius" Value="10" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Margin" Value="10,10,5,5" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</Page.Resources>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel x:Name="iconViewer" Orientation="Horizontal" Width="1100">
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpRed.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpOrange.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpYellow.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpGreen.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpBlue.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpPurple.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpPink.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpTeal.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
</StackPanel>
</ScrollViewer>
<Button x:Name="commitSelection" Content="Save" Grid.Row="1" Foreground="Black" HorizontalAlignment="Center" Margin="0,10" />
</Grid>
IconSelector C#
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
namespace FtpSharp
{
public sealed partial class IconSelector : Page
{
private static readonly DependencyProperty SelectedIconProperty = DependencyProperty.Register("SelectedIcon", typeof(int),
typeof(IconSelector), new PropertyMetadata(0));
public int SelectedIcon
{
get { return (int)GetValue(SelectedIconProperty); }
set { SetValue(SelectedIconProperty, value); }
}
public IconSelector()
{
this.InitializeComponent();
}
private void Image_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
Image tappedImage = (Image)sender;
Border tappedBorder = (Border)tappedImage.Parent;
SolidColorBrush blue = new SolidColorBrush(Colors.Blue);
foreach (Border border in iconViewer.Children)
{
border.BorderBrush = new SolidColorBrush(Colors.Transparent);
}
tappedBorder.BorderBrush = new SolidColorBrush(Color.FromArgb(255,0,0,255));
}
}

In this case you can either provide the result as a public property of the IconSelector class, or as EventArgs of an event. You already have the SelectedIcon property there, so you can use it. To notify the MainPage that the selection has occurred, you need to add an event to IconSelector - for example DialogCompleted:
public event EventHandler<int> DialogCompleted;
You will trigger this event when the dialog is confirmed by the user:
DialogCompleted?.Invoke(this, SelectedIcon);
Then within MainPage, you need to subscribe to this event:
IconSelector selector = new IconSelector();
selector.DialogCompleted += IconDialogCompleted;
ShowDialog(selector);
And now get the SelectedIcon inside the handler:
private void IconDialogCompleted(object sender, int selectedIcon)
{
//do something with selectedIcon
}

Image not in center XAML UWP

I'm not able to put my image and lines (the lines are drawn on top of the image) in the center of the 2nd column (the center column) of my grid. I always have lines and image left aligned...I almost tried everything (horizontalAlignment="center"...)
The code is the following:
<Page
x:Class="WhirlpoolSQC.DetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WhirlpoolSQC"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBox x:Name="textBox" Text="Defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
</StackPanel>
<Canvas Grid.Column="1" >
<Image Name="image_detail" VerticalAlignment="Center" Width="840"/>
<Canvas VerticalAlignment="Center" Width="840" >
<Line
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Canvas>
</Canvas>
<StackPanel Grid.Column="2" VerticalAlignment="Top">
<TextBox x:Name="textBox2" Text="List of defecs" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
<ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,61,10,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Top" Height="536"/>
</StackPanel>
</Grid>
Basically, I need something like:
Furthermore, I would like that the image auto fit inside the column in a way that it is not cutted when I put full-screen.
I don't understand wherte is the isse.
thanks

I played around your code and made some changes to get what's shown in your wireframe. The image will always stay in the center and will move or scale according to the window size.
Desktop View
Mobile or Tablet View
//MainPage.Xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="YourPage_SizeChanged"
x:Name="YourPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Padding="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="200" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" MaxWidth="200" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox1" Text="List of Affects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView1" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
<Grid Grid.Column="1" Padding="0" VerticalAlignment="Center" Background="White" HorizontalAlignment="Center" >
<Image Name="image_detail" MaxWidth="840" Source="ms-appx:///Assets/1.jpg" />
<Line x:Name="Line1"
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line2"
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line3"
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line x:Name="Line4"
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Grid>
<StackPanel Grid.Column="2" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox2" Text="List of defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView2" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
</Grid>
//MainPage.Xaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void YourPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
try
{if (image_detail.ActualHeight > 0 && image_detail.ActualWidth > 0)
{
Line1.Y2 = image_detail.ActualHeight;
Line1.X1 = image_detail.ActualWidth / 3;
Line1.X2 = image_detail.ActualWidth / 3;
Line2.Y2 = image_detail.ActualHeight;
Line2.X1 = (image_detail.ActualWidth / 3) * 2;
Line2.X2 = (image_detail.ActualWidth / 3) * 2;
Line3.X2 = image_detail.ActualWidth;
Line3.Y1 = image_detail.ActualHeight / 3;
Line3.Y2 = image_detail.ActualHeight / 3;
Line4.X2 = image_detail.ActualWidth;
Line4.Y1 = (image_detail.ActualHeight / 3) * 2;
Line4.Y2 = (image_detail.ActualHeight / 3) * 2;
}
}
catch { }
}
}

How to access a specific item in itemscontrol and retrieve some data in UWP

I have an ItemsControl with DataTemplate in my Page.Xaml and the code is like below:
<ItemsControl x:Name="chatUI" VerticalAlignment="Bottom">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="myGrid" Width="340" Background="{Binding Background}" HorizontalAlignment="{Binding GridHorizontalAlign}" Margin="10,0,10,10" MinHeight="45" BorderBrush="#FF003A4F" BorderThickness="0,0,0,2">
<Polygon Visibility="{Binding RightVisibility}" Fill="{Binding Background}" Points="0,0 5,6, 0,12" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,-5,0" />
<Polygon Visibility="{Binding LeftVisibility}" Fill="{Binding Background}" Points="5,0 0,6, 5,12" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-5,0,0,0" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="15" FontFamily="Segoe UI" Foreground="White" Margin="10,10,10,0"/>
<TextBlock Grid.Row="1" Text="{Binding Time}" TextWrapping="Wrap" FontSize="11" FontFamily="Segoe UI" Foreground="LightGray" Margin="10,0,10,5" VerticalAlignment="Bottom" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
What I need right now is getting Text which is bound to the TextBlock when I right click on the grid named myGrid. How is that possible in C#?

We can add the RightTapped event of the Grid, it will be fired when you right click the Grid.
In the RightTapped event we can use Grid.Children to get the collection of child elements of the Grid. That we can get the Grid in the root Grid that named myGrid. That we can use the Grid.Children to get the TextBlock in the Grid.
For example:
private async void myGrid_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
var RightTapGrid = sender as Grid;
var childernElements = RightTapGrid.Children;
foreach (var item in childernElements)
{
var grid = item as Grid;
if (grid != null)
{
var itemchildernElements = grid.Children;
foreach (var text in itemchildernElements)
{
var textBlock = text as TextBlock;
var dialog = new ContentDialog()
{
Title = textBlock.Text,
MaxWidth = this.ActualWidth
};
dialog.PrimaryButtonText = "OK";
dialog.SecondaryButtonText = "Cancel";
await dialog.ShowAsync();
break;
}
}
}
}

If you get your Binding Data from Class called ClassName
You can try this code
XAML:
<ListView x:Name="chatUI" VerticalAlignment="Bottom" SelectionChanged="chatUI_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="myGrid" Width="340" Background="{Binding Background}" HorizontalAlignment="{Binding GridHorizontalAlign}" Margin="10,0,10,10" MinHeight="45" BorderBrush="#FF003A4F" BorderThickness="0,0,0,2">
<Polygon Visibility="{Binding RightVisibility}" Fill="{Binding Background}" Points="0,0 5,6, 0,12" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,-5,0" />
<Polygon Visibility="{Binding LeftVisibility}" Fill="{Binding Background}" Points="5,0 0,6, 5,12" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-5,0,0,0" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="15" FontFamily="Segoe UI" Foreground="White" Margin="10,10,10,0"/>
<TextBlock Grid.Row="1" Text="{Binding Time}" TextWrapping="Wrap" FontSize="11" FontFamily="Segoe UI" Foreground="LightGray" Margin="10,0,10,5" VerticalAlignment="Bottom" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
</Listview.ItemTemplate>
And add SelectionChanged Event :
private void chatUI_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView view = (ListView)sender;
//Get Selected Item
ClassName class = view.SelectedItem as ClassName;
string path = class.Text;
// Now we have Text of selected item in Listview
}

screen coordinates to sharpdx device context coordinates

I am new to the sharpdx.
My current work flow is user can capture a pictures using webcam or any cam devices.now i am working to the new feature for users. user able to draw anything at top the image like (mspaint drawing)..
So i desired to take xy points in mouse move event ...and its worked perfectly
This Is My Designer code:-
<Page x:Class="TEST.GraphicsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:enums="clr-namespace:TEST.Model.Enum;assembly=TEST.Core"
xmlns:common="clr-namespace:TEST.Core.Common;assembly=TEST.Core"
xmlns:controls="clr-namespace:TEST.View.Controls"
xmlns:metro="http://schemas.codeplex.com/elysium"
xmlns:params="http://schemas.codeplex.com/elysium/params"
mc:Ignorable="d"
DataContext="{Binding Graphics, Source={StaticResource Locator}}" d:DesignHeight="800" d:DesignWidth="800"
Title="GraphicsPage" Loaded="GraphicsPage_OnLoaded" Unloaded="GraphicsPage_OnUnloaded" MouseLeftButtonDown="Page_MouseLeftButtonDown" MouseLeftButtonUp="Page_MouseLeftButtonUp" PreviewMouseMove="Page_PreviewMouseMove">
<Grid x:Name="GrdPage" PreviewMouseDown="GrdPage_OnPreviewMouseDown" PreviewMouseWheel="GrdPage_OnPreviewMouseWheel"
PreviewMouseMove="GrdPage_OnPreviewMouseMove" PreviewTouchDown="GrdPage_OnPreviewTouchDown">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding BackgroundImage,Mode=TwoWay}" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="spRetake" Margin="0,13,0,0">
<Button Style="{DynamicResource BackButtonStyle}" Click="ButtonTrigger" CommandParameter="{x:Static enums:ButtonTriggerType.GoBack}" Command="{x:Static NavigationCommands.BrowseBack}" />
<TextBlock Text="Retake" Foreground="White" FontSize="15" HorizontalAlignment="Center" Margin="0,5,0,3" />
</StackPanel>
<Grid x:Name="GrdGraphics" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="grdImage" Grid.Column="0" Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10,20,10,10">
<Grid HorizontalAlignment="Center" VerticalAlignment="Top">
///Image is render to this control
<Image x:Name="ImgPhoto" Source="{Binding ImageSource}" VerticalAlignment="Top" MaxHeight="1000" MaxWidth="1400" MouseLeftButtonDown="ImgPhoto_MouseLeftButtonDown" MouseLeftButtonUp="ImgPhoto_MouseLeftButtonUp" MouseMove="ImgPhoto_MouseMove" LostMouseCapture="ImgPhoto_LostMouseCapture" />
///image control
</Grid>
<common:ProgressRing x:Name="PrLoading" Margin="100" Width="50" Height="50" VerticalAlignment="Center" IsActive="True" Foreground="{StaticResource VioletBrush}" Visibility="{Binding IsProgressVisible, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="#99000000" Width="350" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="GrdBorders" Margin="0,1,5,0" Visibility="{Binding ElementName=RbBorders, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid x:Name="GrdBorderTitle" Margin="5,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path Data="M0,9.6240009L6.6444809,9.6240009 6.6444809,13.513288 3.8906012,13.513288 3.8906012,52.242962 50.401927,52.242962 50.401927,49.327709 54.29,49.327709 54.29,56.134999 0,56.134999z M13.596372,3.8918467L13.596372,42.622032 60.1081,42.622032 60.1081,3.8918467z M9.7070002,0L64.000003,0 64.000003,46.509999 9.7070002,46.509999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="5,0,0,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Borders" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<ListView x:Name="LstBorders" Background="Transparent" Margin="10,0,0,0" Grid.Row="1"
SelectionChanged="LstBorders_SelectionChanged" ItemTemplate="{StaticResource GrapicsBorders}" OverridesDefaultStyle="True" ItemContainerStyle="{StaticResource GraphicsBorderListViewItemStyle}" Style="{StaticResource BackgroundGalleryListViewStyle}" />
</Grid>
<Grid Grid.Column="0" x:Name="GrdEffects" Margin="5,1,5,0" Visibility="{Binding ElementName=RbFilters, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid x:Name="GrdEffectsTitle" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path HorizontalAlignment="Left" Data="M44.02605,20.846C44.02605,20.846 63.682006,24.103257 63.682006,38.870418 63.682006,42.772187 63.682006,49.664208 63.682006,53.565377 63.682006,66.221799 51.658645,58.015256 51.658645,50.555524 51.658645,40.738351 60.340182,37.173087 56.365394,33.199718z M25.529025,0C34.740886,0,39.964213,12.976948,40.281676,22.477042L40.293128,23.153271 40.635634,23.496004C44.15071,27.013427 48.794879,31.660645 50.360019,33.226604 52.995978,35.863305 51.193019,38.789006 50.089023,39.892009 48.98503,40.995406 28.241208,61.738416 28.241208,61.738416 25.936236,64.043717 17.883273,59.726617 10.261396,52.099114 2.63244,44.474008 -1.684536,36.421304 0.6204343,34.116004L22.599233,12.137394C22.599233,12.137394 24.072108,10.731551 26.071624,10.752226 27.118989,10.763056 28.310851,11.165289 29.511216,12.365994L31.998191,14.858796C33.357127,19.144596 32.48714,22.803398 31.852197,24.675799 30.646153,25.4376 29.839215,26.7741 29.839215,28.308002 29.839215,30.683002 31.76516,32.610805 34.144168,32.610805 36.52415,32.610805 38.450095,30.683002 38.450095,28.308002 38.450095,26.808 37.681121,25.490899 36.519145,24.7214 36.644145,23.702499 36.722144,21.654397 36.354106,19.211597 36.354106,19.211597 36.823226,19.681035 37.592975,20.451304L37.670257,20.528639 37.615382,20.036525C36.595061,11.949274 32.102916,2.4615231 25.529025,2.4615231 17.491012,2.4615231 15.683008,10.664832 15.683008,13.53907L13.222004,13.53907C13.222004,8.3047702,16.56301,0,25.529025,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="27" Height="27" Margin="5,0,0,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Filters" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<ListView x:Name="LstAdvancedEffect" Width="245" BorderBrush="White" Background="Transparent" Margin="10,0,0,0" Grid.Row="1"
ItemTemplate="{StaticResource AdvancedEffect}" OverridesDefaultStyle="True" ItemContainerStyle="{StaticResource GraphicsEffectsListViewItemStyle}" Style="{StaticResource BackgroundGalleryListViewStyle}" />
</Grid>
<Grid Grid.Column="0" x:Name="GrdEdit" Margin="5,1,5,0" VerticalAlignment="Top" Visibility="{Binding ElementName=RbEdit, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="GrdEditTitle" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path Data="M28.359835,24.709L34.154998,30.052877 27.489999,31.461998z M21.8047,9.3869993L35.634799,9.3869993 30.5925,14.785472 22.157498,14.785472 21.7942,26.555977C21.7942,26.555977,21.324199,34.340181,12.747299,33.399679L5.3957494,33.19948 5.3957494,66.641893C5.395749,67.386995,6.0026888,67.990496,6.7473091,67.990496L44.531299,67.990496C45.273398,67.990496,45.880099,67.386995,45.880099,66.641893L45.880099,26.531576 51.279998,21.086176 51.279998,66.641893C51.279998,70.368498,48.2578,73.386999,44.531299,73.386999L6.7473091,73.386999C3.020749,73.386999,-1.0840647E-06,70.368498,3.4106051E-13,66.641893L3.4106051E-13,32.391882 2.6718787,29.574478 2.674559,29.49638 16.676999,14.785472 16.637898,14.785472 12.894499,18.732675 16.816399,14.579372 16.872298,14.579372 16.996098,14.449471 17.007798,14.449471z M43.024932,5.7089984L52.443,14.399388 40.817794,27.000999 40.619792,25.005898 37.516936,23.951198 37.429824,21.838896 34.333331,21.018594 33.961013,18.635792 31.396998,18.307692z M49.488421,0.0016288757C49.906531,0.018204689,50.296157,0.1614809,50.599376,0.4401598L57.271087,6.5981958C58.080863,7.3442647,57.976867,8.7787952,57.033995,9.7973371L55.755431,11.184999 46.149001,2.3229232 47.428763,0.93428135C48.01562,0.298316,48.791575,-0.026000023,49.488421,0.0016288757z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="5,0,5,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Basic Edit" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<StackPanel Grid.Row="1" Orientation="Vertical" Margin="10,0,0,0">
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Brightness" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Brightness" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Contrast" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Contrast" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Saturation" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Saturation" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Temp" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Temp" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Tint" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Tint" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Sharpen / Blur" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Blur" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
</StackPanel>
</Grid>
<StackPanel Grid.Column="1" HorizontalAlignment="Right">
<RadioButton x:Name="RbFilters" Margin="0,0,0,10" Height="55" IsChecked="{Binding IsFilterChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsFilter,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path HorizontalAlignment="Left" Data="M44.02605,20.846C44.02605,20.846 63.682006,24.103257 63.682006,38.870418 63.682006,42.772187 63.682006,49.664208 63.682006,53.565377 63.682006,66.221799 51.658645,58.015256 51.658645,50.555524 51.658645,40.738351 60.340182,37.173087 56.365394,33.199718z M25.529025,0C34.740886,0,39.964213,12.976948,40.281676,22.477042L40.293128,23.153271 40.635634,23.496004C44.15071,27.013427 48.794879,31.660645 50.360019,33.226604 52.995978,35.863305 51.193019,38.789006 50.089023,39.892009 48.98503,40.995406 28.241208,61.738416 28.241208,61.738416 25.936236,64.043717 17.883273,59.726617 10.261396,52.099114 2.63244,44.474008 -1.684536,36.421304 0.6204343,34.116004L22.599233,12.137394C22.599233,12.137394 24.072108,10.731551 26.071624,10.752226 27.118989,10.763056 28.310851,11.165289 29.511216,12.365994L31.998191,14.858796C33.357127,19.144596 32.48714,22.803398 31.852197,24.675799 30.646153,25.4376 29.839215,26.7741 29.839215,28.308002 29.839215,30.683002 31.76516,32.610805 34.144168,32.610805 36.52415,32.610805 38.450095,30.683002 38.450095,28.308002 38.450095,26.808 37.681121,25.490899 36.519145,24.7214 36.644145,23.702499 36.722144,21.654397 36.354106,19.211597 36.354106,19.211597 36.823226,19.681035 37.592975,20.451304L37.670257,20.528639 37.615382,20.036525C36.595061,11.949274 32.102916,2.4615231 25.529025,2.4615231 17.491012,2.4615231 15.683008,10.664832 15.683008,13.53907L13.222004,13.53907C13.222004,8.3047702,16.56301,0,25.529025,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="27" Height="27" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Filters" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
<RadioButton x:Name="RbBorders" Margin="0,0,0,10" Width="60" Height="55" IsChecked="{Binding IsBorderChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsBorder,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path Data="M0,9.6240009L6.6444809,9.6240009 6.6444809,13.513288 3.8906012,13.513288 3.8906012,52.242962 50.401927,52.242962 50.401927,49.327709 54.29,49.327709 54.29,56.134999 0,56.134999z M13.596372,3.8918467L13.596372,42.622032 60.1081,42.622032 60.1081,3.8918467z M9.7070002,0L64.000003,0 64.000003,46.509999 9.7070002,46.509999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Borders" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
<RadioButton x:Name="RbEdit" Height="55" Margin="0,0,0,10" IsChecked="{Binding IsEditChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsEdit,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path Data="M28.359835,24.709L34.154998,30.052877 27.489999,31.461998z M21.8047,9.3869993L35.634799,9.3869993 30.5925,14.785472 22.157498,14.785472 21.7942,26.555977C21.7942,26.555977,21.324199,34.340181,12.747299,33.399679L5.3957494,33.19948 5.3957494,66.641893C5.395749,67.386995,6.0026888,67.990496,6.7473091,67.990496L44.531299,67.990496C45.273398,67.990496,45.880099,67.386995,45.880099,66.641893L45.880099,26.531576 51.279998,21.086176 51.279998,66.641893C51.279998,70.368498,48.2578,73.386999,44.531299,73.386999L6.7473091,73.386999C3.020749,73.386999,-1.0840647E-06,70.368498,3.4106051E-13,66.641893L3.4106051E-13,32.391882 2.6718787,29.574478 2.674559,29.49638 16.676999,14.785472 16.637898,14.785472 12.894499,18.732675 16.816399,14.579372 16.872298,14.579372 16.996098,14.449471 17.007798,14.449471z M43.024932,5.7089984L52.443,14.399388 40.817794,27.000999 40.619792,25.005898 37.516936,23.951198 37.429824,21.838896 34.333331,21.018594 33.961013,18.635792 31.396998,18.307692z M49.488421,0.0016288757C49.906531,0.018204689,50.296157,0.1614809,50.599376,0.4401598L57.271087,6.5981958C58.080863,7.3442647,57.976867,8.7787952,57.033995,9.7973371L55.755431,11.184999 46.149001,2.3229232 47.428763,0.93428135C48.01562,0.298316,48.791575,-0.026000023,49.488421,0.0016288757z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="0,0,5,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Edit" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
</StackPanel>
</Grid>
</Grid>
</Grid>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderBrush="{StaticResource GreenBrush}" BorderThickness="0,2,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="#4C000000" Height="75">
<Button Height="40" Width="100" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" Content="Next" Style="{DynamicResource NextButtonStyle}" Click="ButtonTrigger" CommandParameter="{x:Static enums:ButtonTriggerType.Next}" />
</Border>
<MediaElement Grid.Row="0" Grid.Column="0" x:Name="MdeBackgroundMusic" Source="{Binding BackgroundMusic}" Visibility="Collapsed" LoadedBehavior="Play" UnloadedBehavior="Manual" MediaEnded="MdeBackgroundMusic_OnMediaEnded" />
</Grid>
</Page>
Codebehind
//List for added points
public List<Point> DrawPoint = new List<Point>();
and my mouse move event like this
private void Page_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (draw)
{
if (DrawPoint .Count > 0)
{
var exist = DrawPoint .Any(i => i == e.Getpostion(null));
if (!exist)
{
DrawPoint .Add(e.Getpostion(null));
}
else
{
DrawPoints.Add(e.Getpostion(null));
}
}
}
}
at that time i was draw the points to the render method like this
if (_point != null){
SolidColorBrush aBrush = new SolidColorBrush(_d2DContext, SharpDX.Color.Red);
//looped every added point in user
foreach (var point in _point)
{
_d2DContext.FillEllipse(new Ellipse(new Vector2((float)point.X, (float)point.Y), 10, 10), aBrush);
}
}
but drawed points its wrong what is iam missing. please help me out
Image Notes
Redpoint is now brush the point using above code
X Mark indicates mouse postion on the image.

I have faced similar Issue when i working my last project
in your Move Event
//get current touch point
var currentPoint = e.GetTouchPoint(this);
// calculate screen margin for grid image left
var x = (currentPoint.Bounds.X - (spRetake.ActualWidth + grdImage.Margin.Left)) / grdImage.ActualWidth;
var y = (currentPoint.Bounds.Y - grdImage.Margin.Top) / grdImage.ActualHeight;
DrawPoints.Add(new System.Windows.Point(x,y));
And Your Device Class you Need to calculate rendering device width and height also you should calculate orginal image width and height rendering image actual width
// original dimensions
var width = CurrentBitmapSize.Width;
var height = CurrentBitmapSize.Height;
// Find the longest and shortest dimentions
var longestDimension = (width > height) ? width : height;
var shortestDimension = (width < height) ? width : height;
var factor = ((double)longestDimension) / (double)shortestDimension;
// Set width as max
double newWidth = (float)_d2DContext.PixelSize.Width;
var newHeight = (float)_d2DContext.PixelSize.Width / factor;
//If height is actually greater, then we reset it to use height instead of width
if (width < height)
{
newWidth = (float)_d2DContext.PixelSize.Height / factor;
newHeight = (float)_d2DContext.PixelSize.Height;
}
_drawBrush = new SolidColorBrush(d2DContext, SharpDX.Color.Blue);
var pWidth = _d2DContext.PixelSize.Width;
var pHeight = _d2DContext.PixelSize.Height;
int elipseWidth = 10;
int elipseheight = 15;
foreach (var point in MousePoints.Distinct().ToList())
{
var x = (point.X * pWidth) + (elipseWidth / 2);
var y = (point.Y * pHeight) + (elipseheight / 2);
var ellipseCenter = new Vector2((float)x, (float)y);
var ellipse = new Ellipse(ellipseCenter, elipseWidth, elipseheight);
//omit if the point not in image container
if (newWidth >= x && newHeight >= y + 2)
{
d2DContext.FillEllipse(ellipse, _drawBrush);
}
}
i think its should worked for you...Any Queries Comment It..

Image as pushpin on maps - Windows phone 8

im trying to add a image to a windows phone 8 map, to serve as a pushpin
i have the following code on my XAML
<phone:PhoneApplicationPage
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"
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
x:Class="Cartuxa.Contactos"
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.Background>
<ImageBrush ImageSource="/Assets/Images/bkContacts#2x.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28"/>
<Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="127*"/>
<ColumnDefinition Width="329*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo#2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
<TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/>
<Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909">
<Grid Grid.ColumnSpan="2">
<Image Name="POI_Left" Source="/Assets/Images/POI_Gray#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left"
Margin="13,6,-22,0"
TextWrapping="Wrap"
Text="Paços dos Condes de Basto"
VerticalAlignment="Top"
FontFamily="Helvetica"
Foreground="Black"
FontSize="14" Width="182"/>
</Grid>
</Button>
<maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/>
<Button Name="Contactos_Btn1"
Click="Contactos_Btn1_Click"
HorizontalAlignment="Right"
Margin="-17,201,242,0"
VerticalAlignment="Top"
Width="255"
Background="White"
Height="65"
BorderThickness="0"
Grid.ColumnSpan="2">
<Grid Name="pushRed" Grid.ColumnSpan="2">
<Image x:Name="POI_Right" Source="/Assets/Images/POI_Red#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/>
</Grid>
</Button>
<TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica">
<Run Text="Páteo de São Miguel "/>
<LineBreak/>
<Run Text="Apartado 2001, 7001-901 Évora "/>
<LineBreak/>
<Run Text="Portugal"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/>
<TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/>
<Run FontFamily="Helvetica"/>
<Run/>
</TextBlock>
</Grid>
</Grid>
and my .cs code is the following
public partial class Contactos : PhoneApplicationPage
{
public Contactos()
{
InitializeComponent();
Loaded +=Contactos_Loaded;
}
private void Contactos_Loaded(object sender, RoutedEventArgs e)
{
UpdateMap();
}
private void UpdateMap()
{
MapOverlay pin = new MapOverlay();
pin.Content = pushRed;
pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
pin.PositionOrigin = new Point(0, 0.5);
MapLayer pinLayer = new MapLayer();
pinLayer.Add(pin);
contactosMaps.Layers.Add(pinLayer);
contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
}
private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
{
}
}
when i try to run my project, it loads the map but a few moments later i get this exception
"Additional information: Value does not fall within the expected range."
when i do the "contactosMaps.Layers.Add(pinLayer);"
can't i have that Grid with the image as a pushpin?

Use the Phone.Controls.Toolkit as described here:-
http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit-a-winning-team-part-1/
The toolkit can be found at either of
http://phone.codeplex.com/
or
https://www.nuget.org/packages/WPtoolkit
You can then either add the image directly in your XAML as follows:-
<maps:Map Loaded="MapControl_Loaded" ZoomLevel="18" Name="MapControl">
<toolkit:MapExtensions.Children>
<toolkit:Pushpin x:Name="MyPushpin">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<Image Source="/Images/MapScreen/MapScreenCurrentLocationPin.png" Stretch="Uniform" Width="50" Height="50" HorizontalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</toolkit:MapExtensions.Children>
</maps:Map>
or you can add it in C# as follows:-
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = myMap.Center,
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
myMap.Layers.Add(layer);
You should be able to add a Grid with an image instead of an ellipse as shown above.
Let me know if this worked for you.