We Keep Coding

Pointer events not triggered on UI Elements in custom control

I am creating an application with a UserControl containing multiple UI Elements. The UserControl is rendered into a StackPanel using ItemsControl since the number of UserControls to be rendered depends on user's input.
The basic XAML in the UserControl is as follows.
<Grid x:Name="Viewport" VerticalAlignment="Top" HorizontalAlignment="Center">
<Border x:Name="ViewportBorder" Background="White" BorderThickness="2, 2, 2, 2" BorderBrush="#FF353334" />
<Image x:Name="Image" Margin="0" UseLayoutRounding="True" ManipulationMode="Scale"/>
<InkCanvas x:Name="InkCanvas" />
<Canvas x:Name="SelectionCanvas" CompositeMode="SourceOver" />
</Grid>
I want to change the cursor icon when user is hovering over the SelectionCanvas (based on a condition check in my case as you might see in the source). It seemed pretty straight forward so I tried to use PointerEntered & PointerExited events to capture & release the pointer from the SelectionCanvas. And PointerMoved to change the cursor icon. But it seems that none of the events were triggering.
I tried binding to the Viewport grid element as well but no luck in that too.
I'm not sure what I missed here. Could someone please help me on this? Any help is much appreciated. Please find the complete source code here.
Please note that a sample PDF is included into the startup project /Resources which you'll have to open from the app.

The PointerEntered and PointerExited events are raised provided that the area that is supposed to raise them is painted so try to set the Background property of the Canvas to some brush like for example Transparent:
<Canvas x:Name="SelectionCanvas" CompositeMode="SourceOver"
Background="Transparent"
PointerEntered="SelectionCanvas_PointerEntered"
...

Notebook-like background for a TextBox in a Windows Phone App

I am trying to create an application to take notes for windows phone 8.1
I want to give the user,a notebook type of feel.
For this I have created the UI for notes, the XAML is:
<Grid Margin="0,12.333,0,-0.333">
<Grid.Background>
<ImageBrush ImageSource="Images/notebookpaper.jpg"/>
</Grid.Background>
<TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0" VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/>
<TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/>
</Grid>
The image notebookpaper.jpg looks like this:
When user types in the text in text box, it looks like:
The problem is that, some characters appear a little above the line, some exactly on the line etc. which looks odd. Also, when I try to scroll, UI appears as:
The text appears striked out, as only the text scrolls and not the background image.
Also I want to be able to provide user a list of 5-6 fonts out of which they can select which one to use for typing the notes.
What should I do, so that the text appears properly aligned and text scrolls properly.
Is there any other way to do this ?

It looks like you have two problems:
Varying line height
Scrolling doesn't match the lines
To solve the first problem, you can probably work with TextBlock.TextLineBounds, talked about a bit in this MSDN blog post and the TextLineBounds enumeration documentation. This only seems to apply to TextBlocks, so you might have to swap between a TextBlock and TextBox as users edit their text.
To solve the second problem, the TextBox styles and templates page has a lot of helpful info. It looks like you can make your ImageBrush the background of your control by overriding TextBoxButtonBackgroundThemeBrush. If that doesn't work when focused, you may have to take the entire template given on the linked page and edit it to put your image in the background (there's a lot of XAML, but you should just be able to put your image in BackgroundElement or just before it).
If it still doesn't scroll, you can try setting ScrollViewer.Background instead; if that doesn't work, you'll need to handle the ScrollViewer.ViewChanging or ScrollViewer.ViewChanged events (probably by overriding it) so that it you can transform the background image by the amount of pixels the scrollviewer has moved.
You can also find the ScrollViewer in your code-behind (and skip dealing with the template) by using VisualTreeHelper. This would allow you to set the background of the ScrollViewer and/or subscribe to its events. This however is more brittle than the other methods and is usually a last resort.

MouseEnter event: how to show data of one control into another?

I Use Visual Studio, C# and WPF. I create a main window called "WindowsMonopoly" and an user control called "CasellaColore", with some properties. In the "WindowMonopoly" I put more of the "CasellaColore". I have this situation:
<Monopoly:CasellaColore x:Name="Casella8" Grid.Row="10" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Indice="8" ColoreCasella="Black"/>
<Monopoly:CasellaColore x:Name="Casella9" Grid.Row="10" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Indice="9" ColoreCasella="Black"/>
etc...
Now I want that when I put my cursor on one of the "CasellaColore", this must be showed into a grid. Explaining with simple language:
When the cursor is on the "CasellaColore", then show this "CasellaColore" into a grid into the "WindowMonopoly".
I must redo "all" the Monopoly, for as a school's exercise. My knowledge of C# and WPF is limited, but I'm one of the best of my class in programming.

Get a textblock value in a listbox using GestureServices

Sorry guys, I had asked this question earlier but could not figure out the answer. Made an edit to see if that bumps it, but that did not seem to work. So here is the last try to the question
I can't seem to figure out how one can get the value of a specific textblock in a listbox. To start things off, here is the code:
<ListBox HorizontalAlignment="Left" Name="listItems" VerticalAlignment="Top" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="210" >
<Grid Height="210" Background="#75FFF8DC">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap"
DoubleTap="GestureListener_DoubleTap"
Hold="GestureListener_Hold"
Flick="GestureListener_Flick"/>
</toolkit:GestureService.GestureListener>
...CODE...
</></></>...
The code area contains a bunch of other grids, partitions (columns and rows) and textblocks. Here is an example:
<Image Name="XXX" Source="{Binding XXXPath}" Stretch="Fill"
Grid.Column="0"/>
<TextBlock Name="YYY" Grid.Column="1" Grid.Row="0"
Text="{Binding YYYPath}" Foreground="Black"/>
<TextBlock Name="ZZZ" Grid.Column="2" Grid.Row="0"
Text="{Binding ZZZPath}" Foreground="Black"/>
So what I want, is if someone taps the grid (that means anything in the grid, including these textblocks and images), I want to first get the text of the textblock "YYY."
I could have inserted that code into a textblock and used sender as textblock, but I do not want to limit my gestures to one textblock, nor do I want to repeat that for each element in the grid (lots of issues and seems unnecessary).
Edit: If this does not work, I can also implement just one tap gesture (but again, for the whole grid) and use that to get the value of the textblock. Is there no way? Otherwise I will have to do this: Add tap for the textblock and use sender as a textblock, then get the value of the text. But I really do not want to use this approach.

I see you use bindings for your textblocks and image. So why don't you use ( if you haven't already done it) an IList instance of class which hold an information about them? Then set this instance as an ItemSource for your listbox. That way when user taps somewhere on listbox you can catch the SelectedIndex or SelectedItem of a listbox item. And this will help you to figure out which element of IList collection to extract so you could get your text or image or whatever you need.
And you don't need to use GestureServices from external Silverlight Toolkit with Mango. Tap, DoubleTap etc. are built-in.

AutoCompleteBox in silverlight toolkit for windows phone wrong display

I'm having a problem with the autocompletebox from the toolkit for windows phone. I bind it to some data, then when i press it and start typing, it discovers some items but they are displayed wrong (the list is shown separated from the box, and also if i click on any item, nothing happens. If i click where the item would be supposed to be (for example, right on the top of the box), then it gets selected. It looks like a rendering problem (bug?)) but perhaps i'm doing something wrong. Here's the code for the box :
<DataTemplate x:Key="DataTemplate1">
<ContentControl Content="{Binding Name}" Margin="8,7"/>
</DataTemplate>
<toolkit:AutoCompleteBox ItemsSource="{Binding}" x:Name="txtSelectValues" MinWidth="250" Margin="0,0,0,0" ItemTemplate="{StaticResource DataTemplate1}" VerticalAlignment="Top" />

Found it. It's a bug with the AutoCompleteBox. When inside a scrollviewer control, the dropdown gets messed up and displayed in an incorrect position

Its not just that is also to do with being placed inside of a Pivot/Panaroma as well as the scrollviewer, the silverlight gurus have stated they haven't a timeline for the fix for the Pivot control, and there is a nasty hack
http://silverlight.codeplex.com/workitem/7574

I think the answer might just be that you shouldn't be using a ContentControl directly used like this. Try using something like a TextBlock instead - e.g.:
<DataTemplate x:Key="DataTemplate1">
<TextBlock Text="{Binding Name}" Margin="8,7"/>
</DataTemplate>
If that's not the answer, then try pulling back to a simple example - especially removing all the Margin's, Width's, Alignment's, etc - then put them back in one-by-one to work out and understand what is causing the effect you are seeing.