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"
...

Is it possible to bind to a property on the container of the Adorned Element?

In my WPF app we are using an adorner for displaying validation messages, in the particular case there is a single row grid that has multiple controls some of which have validation. The problem I'm having is that I want to force the width of the error message control to be the same as the grid but can't seem to find a way to reference that grid from the adorner template. Here is a sample of what I tried:
<ControlTemplate x:Key="Local_TopAdornedTemplateWide">
<StackPanel>
<AdornedElementPlaceholder x:Name="adornedElement"/>
<TextBlock MaxWidth="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}, ElementName=adornedElement}"
TextWrapping="Wrap"
Text="{Binding Converter={StaticResource Local_ValidationErrorMessageConverter}}"
Style="{DynamicResource Error_Text}"
Padding="2 1 0 0"
Visibility="{Binding ElementName=adornedElement, Mode=OneWay, Path=AdornedElement.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
/>
</StackPanel>
</ControlTemplate>
This causes the application to crash with an XamlParseException.
Ideally the solution would not be specific to a grid so that it would get the width of any container type, but for now grid is the only use case.
Edit:
Here is an example of another template we use in the application; this template would not work for my case as it would limit the error to be the width of a single column of the aforementioned grid:
<ControlTemplate x:Key="Local_TopAdornedErrorTemplate">
<StackPanel>
<AdornedElementPlaceholder x:Name="adornedElement"/>
<TextBlock MaxWidth="{Binding ElementName=adornedElement, Path=ActualWidth}"
TextWrapping="Wrap"
Text="{Binding Converter={StaticResource Local_ValidationErrorMessageConverter}}"
Style="{DynamicResource Error_Text}"
Padding="2 1 0 0"
Visibility="{Binding ElementName=adornedElement, Mode=OneWay, Path=AdornedElement.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
/>
</StackPanel>
</ControlTemplate>
Using snoop I captured the following two screenshots (I could not take one of the full stack to prevent posting anything proprietary)
This shot shows the grid I mentioned previously, within this it is the FinancialTextBox item that is being adorned
This shot shows two things, the item selected in blue is the highest ancestor of the grid in the previous shot, the yellow highlight is the Textbox from the content template
With those two it seems to be apparent that (based on information from Contango's answer) the two items aren't not in the same visual tree which would lead me to believe my question is not possible. However the second template I added (which does work) points that at least some visual information from the adorned element lives on in the place holder.
So now my question boils down to a) does this information include the parent of the adorned element and b) how can this be accessed via a binding on a different element?

This ended up being a lot simpler than the path I was trying to go down.
I was doing some reading on the AdornedElementPlaceholder class and came across this entry on MSDN and noticed that the class actually has a property called parent, with that I tried the following binding and it works perfectly:
MaxWidth="{Binding ElementName=adornedElement,
Mode=OneWay,
Path=AdornedElement.Parent.ActualWidth}"

WPF is quite powerful and flexible.
You can bind any property in any XAML tag to any property in any other XAML tag.
For example, you could write a test app that binds the Text property of an input box to the Text property of a label, so as you type something into the text box, the label would change automatically (assuming you use UpdateSourceTrigger=PropertyChanged). This is a direct XAML to XAML binding, with no C# in sight.
Similarly, you could bind the width of your error box to the width of the parent control, whatever that may be.
Google RelativeSource and AncestorType, this is a great link:
http://druss.co/2013/10/wpf-binding-examples/
See if you can grok how the Visual Tree and Logical Tree works in WPF, once you understand that, you will understand more of how binding works.
I'd also recommend using the free tool Snoop to look at the Visual Tree. XAML Spy is excellent, but not free.
Snoop can tell you if there is anything that has a bad binding at runtime (you set the filters up, and it will list all bad bindings).
You can use Snoop to get the full XAML path of your source (the XAML you wrote above), then get the full XAML path of the target (i.e. the ActualWidth of your Grid), then compare them: it may be quickly apparent that one is not the ancestor of the other, as they are on different branches of the visual tree, or that there is some other issue which is preventing a simple walk up the visual tree from working.
If you just want to get something working, as a proof of concept, try naming the target XAML grid using x:Name, and reference it by name instead of AncestorType.

Calling a command in my ViewModel from a binding to an event in my XAML?

I am currently writing a Windows 8 application. I am trying to call a method in my ViewModel. I want this method to be called when an item is double clicked. I have defined the following DataTemplate in my XAML to do this:
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Horizontal">
<Image Width="185" Height="185" Stretch="Fill" Source="{Binding Path=Image}" DoubleTapped="{Binding Path=MethodIWishToBindTo}" IsDoubleTapEnabled="True" />
</StackPanel>
</DataTemplate>
The problem, of course, is the error message for my binding to MethodIWishToBindTo:
Invalid value for 'DoubleTapped'. Event values must be text
What is the best way for me to get around this ? I could call the method in the code-behind, however the method uses a property in my ViewModel, "SelectedItemInList", which I don't believe can be accessed from the code behind.
Can anyone offer me some advice for this problem ?
Thanks a lot.

You could use Interactivity and a custom behavior to trigger the event. Here's a post that topically covers an example:
MVVM-Light EventToCommand Behavior for CheckBox Checked/Unchecked in Silverlight
MVVM-Light definitely makes this easier, but it's possible without as well.
Here's an example of without: http://blog.roboblob.com/2010/01/26/binding-ui-events-from-view-to-commands-in-viewmodel-in-silverlight-4/

Windows 8 Data Binding

I'm developing an application using C# and XAML and I've encountered a problem that is confusing me. I have a property in my data called GroupImage and have used binding to set the Source property of an Image with it. That worked fine but when I wanted to do the same thing a second time it doesn't show the image in the second Image control.
<Image Source="{Binding Group.GroupImage}" Width="250" Height="500" Stretch="UniformToFill" />
<Image VerticalAlignment="Bottom" Stretch="UniformToFill" Source="{Binding Group.GroupImage}" Grid.RowSpan="2"/>
The top one works fine the bottom one doesn't. I have been reading about Data Binding and have gotten the impression that you need to specify something in the DataContext to use a property more than once. Is this right? It seems a very strange way of doing this.
I am relatively new to C# so sorry if I'm missing something obvious. I'd appreciate a more knowledgeable cluing me in.
Thanks
Update Following the assistance I received I figured out that the context was being set to
DataContext="{Binding Group}"
And as a result my second line needed to change to the following since the Data Context was already set to Group.
<Image VerticalAlignment="Bottom" Stretch="UniformToFill" Source="{Binding GroupImage}" Grid.RowSpan="2"/>

You don't need to specify something in the DataContext to use a property more than once. But your two Image have to have the right DataContext (you can easily test it with the debugger), depending on their location on the visual tree (You didn't provide any code for the DataContext part ?) .
You can also check that your Image's Width/Height are not 0.

Nullpointer error on event listeners when using StaticResource and MouseDown handler

I have a very odd error case that sprung up the moment I used a StaticResource converter on a Rectangle for coloring its background and at the same time using a MouseDown handler on another component next to it within a DataTemplate. If I narrow the code down a bit, this is what is required to reproduce the error :
In the top I have these resources, one pointing to a converter that takes the boolean from the binding and converts it to a fill background color):
<Window.Resources>
<vm:DesktopViewModel x:Key="DesktopVM" />
<vm:BooleanToColorConverter x:Key="converter" />
</Window.Resources>
And later in the same xaml file I iterate over a list of Alarm objects using this (I have replaced a Grid layout with a StackPanel and removed some other components for shorter code sample, this code snippet below still fails):
<ItemsControl ItemsSource="{Binding Alarms}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Rectangle Height="20" Stroke="Black" Width="20" RadiusX="4" RadiusY="4" Fill="{Binding Alarm, Converter={StaticResource converter}}"/>
<Image Source="/MyNamespace;component/images/chart.png" Stretch="None" MouseDown="Image_MouseDown" Cursor="Hand"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If I remove the MouseDown handler on the image it runs just fine without the nullpointer error in the start. If I remove the Fill tag in the Rectangle the code works just fine WITH the MouseDown handler!!! (and the handler works just fine too). It seems like the StaticResource reference in Fill is messing up something that makes locating the mouse handler function fail?!?
Note that it fails when the window is created, not while running or clicking anything.
Edit: I had the same nullpointer issue if I replaced the converter with a style using a StaticResource with triggers to do the same as the converter. Its pretty clear that the StaticResource reference in an attribute is the culprit but I have no idea why it should affect the event listener.
Also the order of the compoents dont matter either. If I place the Image before the Rectangle the error is exactly the same.

My guess is that the problem is in your converter code, that it does not take into account that it can get a null value.
Why the effect of the mouseDown? Probably it causes the rendering of the image element at an earlier moment and to request the value of the Fill property at a moment that your ViewModel has not been created yet.
There is too little information to state it with certainty, but converters that do not handle null values properly can be a major pain in WPF development in my experience. A lot of design time instability has had root in converters that did not handle the null values properly.