Develop Reference

C# WPF Binding String to Textblock [duplicate]

This question already has answers here:
Why does WPF support binding to properties of an object, but not fields?
(2 answers)
Closed last month.
I am still a beginner and I'm trying to make a application where a user gets to choose a file. For that I use OpenFileDialog, which has worked fine for me in the past. The file path and content should then be each displayed in a separate textbox. I tried to achieve this by storing the content and path in two strings. Because I want to use those strings later on in my project in another .cs file I figured I make them globally accessable by defining them as public string content = "No file selected yet;. The "No file selected yet" should be the default text before the user has selected anything.
I searched online and tried to accomplish my goals by using DataContext and Binding, but I can't figure out how to make it work. This is the code I have right now:
xaml file:
<UserControl x:Class="Project_Neon.MVVM.View.ChooseFileView"
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:local="clr-namespace:Project_Neon.MVVM.View"
mc:Ignorable="d"
d:DesignHeight="423.4"
d:DesignWidth="548.4">
<StackPanel Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="100"/>
<RowDefinition Height="35"/>
<RowDefinition Height="218.4"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,5,20,0"
Text="Choose File"
Foreground="Black"
FontSize="28"
FontFamily="/Fonts/#Kanit Semi"/>
<TextBlock Text="Select the text document with the cheat sheet.
Only Documents in a .txt format can be accepted."
Foreground="Black"
FontSize="22"
FontFamily="/Fonts/#Kanit Light"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,20,10"/>
<Button Grid.Row="2"
Grid.Column="1"
VerticalAlignment="Top"
Content="Select file"
Height="25"
Width="70"
FontFamily="/Fonts/#Kanit"
FontSize="14"
Style="{StaticResource SelectFileButtonTheme}"
Click="SelectFileButton_Click"/>
<Grid Grid.Row="2"
Grid.Column="2"
Height="25"
VerticalAlignment="Top"
Margin="0,0,20,0">
<Border Padding="10"
BorderBrush="#1f1f1f"
BorderThickness="1">
</Border>
<TextBlock Name="FilePathDisplay"
Text="{Binding Path=CheatFilePath}"
VerticalAlignment="Center"
Margin="5,0,0,0"
FontSize="14"
FontFamily="/Fonts/#Kanit Light"/>
</Grid>
<Grid Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,20,20">
<TextBlock Height="20"
VerticalAlignment="Top"
Background="#1f1f1f"
Foreground="White"
Text=" Preview:"
FontSize="14"
FontFamily="/Fonts/#Kanit"/>
<Border Padding="10"
BorderBrush="#1f1f1f"
BorderThickness="1"
Margin="0,20,0,0">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto" Margin="-10,-10,-10,-10">
<TextBlock Width="Auto"
TextWrapping="Wrap"
Text="{Binding Path=CheatFileContent}"
VerticalAlignment="Top"
FontSize="13"
Margin="1.5,0,1.5,0"
FontFamily="/Fonts/#Kanit Light"/>
</ScrollViewer>
</Border>
</Grid>
</Grid>
</StackPanel>
</UserControl>
and the xaml.cs:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Project_Neon.MVVM.View
{
/// <summary>
/// Interaction logic for ChooseFileView.xaml
/// </summary>
public partial class ChooseFileView : System.Windows.Controls.UserControl
{
public ChooseFileView()
{
InitializeComponent();
this.DataContext = this;
}
public string CheatFileContent = "No file selected yet";
public string CheatFilePath = "No file selected yet";
private void SelectFileButton_Click(object sender, RoutedEventArgs e)
{
using (OpenFileDialog openFileDialog = new OpenFileDialog())
{
openFileDialog.InitialDirectory = "c:\\";
openFileDialog.Filter = ".txt (*.txt)|*.txt";
openFileDialog.FilterIndex = 1;
openFileDialog.Multiselect = false;
openFileDialog.RestoreDirectory = true;
if (openFileDialog.ShowDialog() == DialogResult.OK)
{
var CheatFileStream = openFileDialog.OpenFile();
using (StreamReader reader = new StreamReader(CheatFileStream))
{
CheatFileContent = reader.ReadToEnd();
CheatFilePath = openFileDialog.FileName;
OnPropertyChanged(nameof(CheatFilePath));
OnPropertyChanged(nameof(CheatFileContent));
}
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
I'm afraid that maybe my strings aren't defined right.
(I deleted most of the code from my previous attempts of actually binding the data, because I only got errors.)

As #Andy pointed out you need to bind to properties not fields (check #Marc Gravell answer)
I included the raising of the event inside the setter as it makes more sense
ChooseFileView.xaml.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Project_Neon.MVVM.View
{
/// <summary>
/// Interaction logic for ChooseFileView.xaml
/// </summary>
public partial class ChooseFileView : System.Windows.Controls.UserControl, System.ComponentModel.INotifyPropertyChanged
{
private string _cheatFileContent;
private string _cheatFilePath;
public event PropertyChangedEventHandler? PropertyChanged;
public string CheatFileContent
{
get => _cheatFileContent;
set
{
if (_cheatFileContent != value)
{
_cheatFileContent = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CheatFileContent)));
}
}
}
public string CheatFilePath
{
get => _cheatFilePath;
set
{
if (_cheatFilePath != value)
{
_cheatFilePath = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CheatFilePath)));
}
}
}
public ChooseFileView()
{
InitializeComponent();
this.DataContext = this;
CheatFileContent = "No file selected yet";
CheatFilePath = "No file selected yet";
}
private void SelectFileButton_Click(object sender, RoutedEventArgs e)
{
using (OpenFileDialog openFileDialog = new OpenFileDialog())
{
openFileDialog.InitialDirectory = "c:\\";
openFileDialog.Filter = ".txt (*.txt)|*.txt";
openFileDialog.FilterIndex = 1;
openFileDialog.Multiselect = false;
openFileDialog.RestoreDirectory = true;
if (openFileDialog.ShowDialog() == DialogResult.OK)
{
var CheatFileStream = openFileDialog.OpenFile();
using (StreamReader reader = new StreamReader(CheatFileStream))
{
CheatFileContent = reader.ReadToEnd();
CheatFilePath = openFileDialog.FileName;
}
}
}
}
}
}

Getting image file path from PreviewMouseDown event (WPF/C#)

I'm making an image viewer. I have a mouse event that is supposed to trigger when an image (or child of StackPanel in this case), is clicked. The event is triggered as intended. The problem is, since the pathfile of the images is different depending on whichever is selected (in which directory, etc.), I just don't know how to get the pathfile of the specific image that is currently clicked on. The directory depends on whichever folder is loaded, so the pathfile could be different everytime.
If you scroll all the way down to Image_Load(), I have the Pic.Fill which is a reference to the rectangle that is being filled with the image. I'm trying to find the first parameter for Uri(_,_), which is supposed to be where the #"path" of the current image is.
using System;
using System.IO;
using Microsoft.Win32;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Drawing;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Forms;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
FolderBrowserDialog fbd = new FolderBrowserDialog();
List<string> paths = new List<string>();
string[] extension = new[] { ".jpg", ".png", ".jpeg", ".gif", ".bmp", ".tif", ".tiff" };
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e) {
if (fbd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
string[] files = Directory.GetFiles(fbd.SelectedPath);
FileLocation.Text = fbd.SelectedPath;
}
}
private void OpenButton_Click(object sender, RoutedEventArgs e)
{
LoadPhotos();
}
private void LoadPhotos()
{
try
{
DirectoryInfo di = new DirectoryInfo(fbd.SelectedPath);
foreach (var fi in di.GetFiles().Where(f => extension.Contains(f.Extension.ToLower())).ToArray())
{
paths.Add(fi.FullName);
}
Photos.ItemsSource = paths;
} catch (Exception e)
{
Console.WriteLine("File not found.", e.Source);
}
}
private void Image_Load(object sender, MouseButtonEventArgs e)
{
// What is the reference here?
Pic.Fill = new ImageBrush { ImageSource = new BitmapImage(new Uri(/*Insert pathfile here*/, UriKind.Absolute)) };
}
}
}
Here's my .xaml. I've analyzed it to see a reference but the only thing that stands out is the Image Source, which I've tagged with a comment. It's set to { Binding . } which I'm going to assume means, whatever image is referenced. But how do I connect that variable reference to my Image_Load()? (which is declared on the instantiation of ListBox)
<Window x:Class="WpfApp1.MainWindow"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="1081" Width="1720.5">
<Grid Margin="0,0,2,-0.578">
<Button x:Name="OpenButton" Content="Load" HorizontalAlignment="Left" Height="44" Margin="1166.374,932.042,0,0" VerticalAlignment="Top" Width="145.666" Background="#FFDDDDDD" FontSize="24" Click="OpenButton_Click"/>
<Button x:Name="BrowseButton" Content="Browse" HorizontalAlignment="Left" Height="44" Margin="58.666,932.042,0,0" VerticalAlignment="Top" Width="134.166" Background="#FFDDDDDD" FontSize="24" Click="Button_Click"/>
<Rectangle x:Name="Pic" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="878.767" Margin="58.666,34.733,0,0" Stroke="Black" VerticalAlignment="Top" Width="1253.374"/>
<ScrollViewer VerticalScrollBarVisibility="Visible" Width="327.46" HorizontalAlignment="Left" Margin="1339.04,34.733,0,137.078" RenderTransformOrigin="0.5,0.5" >
<StackPanel Width="327.46" RenderTransformOrigin="0.516,0.496" HorizontalAlignment="Left" VerticalAlignment="Center" Height="878.085">
<ListBox x:Name="Photos"
Grid.Row="2" Grid.Column="1" Height="876" PreviewMouseDown="Image_Load">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="300" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* Image Source? */
<Image Source="{Binding .}" Grid.Column="0"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<TextBlock x:Name="FileLocation" HorizontalAlignment="Left" Height="44" Margin="192.832,948.542,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="973.542" Foreground="#FF515151" TextAlignment="Center" FontSize="14"/>
</Grid>
</Window>
I've been learning on the way using Blend-- some youtube tutorials here and there. I've tried to look for a solution online but all the questions about it usually involve a static and specific directory. This is my first program and the only thing I need is that darn path file reference. There are so many object reference so I just don't even know how to wrap my head around it, being so unfamiliar with these classes. Some assistance would be very much appreciated! :)

WPF image inside border is not fully drawn

I have an image within a border:
XAML:
<Window x:Class="TestProgram.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="350" Width="525">
<DockPanel>
<Grid DockPanel.Dock="Top">
<!---->
</Grid>
<ListBox DockPanel.Dock="Left"/>
<Grid DockPanel.Dock="Top">
<!---->
</Grid>
<Border x:Name="testBorder" ClipToBounds="True" Background="Gray">
<Image x:Name="testImage" Source="test.png" Opacity="1" Stretch="None"
MouseLeftButtonDown="testImage_MouseLeftButtonDown"
MouseLeftButtonUp="testImage_MouseLeftButtonUp"
MouseMove="testImage_MouseMove"
/>
</Border>
</DockPanel>
</Window>
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestProgram
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private Point start;
private Point origin;
public MainWindow()
{
InitializeComponent();
TransformGroup group = new TransformGroup();
TranslateTransform tt = new TranslateTransform();
group.Children.Add(tt);
testImage.RenderTransform = group;
}
private void testImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
testImage.CaptureMouse();
TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
start = e.GetPosition(testBorder);
origin = new Point(tt.X, tt.Y);
}
private void testImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
testImage.ReleaseMouseCapture();
}
private void testImage_MouseMove(object sender, MouseEventArgs e)
{
if (testImage.IsMouseCaptured)
{
TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
Vector v = start - e.GetPosition(testBorder);
tt.X = origin.X - v.X;
tt.Y = origin.Y - v.Y;
}
}
}
}
I have added click & drag panning functionality, but the displayed size of the image is limited by the surrounding border, leaving only the top left corner of the image visible when the image is panned. This is the case even when i remove ClipToBounds="True"
ActualHeight and ActualWidth have values corresponding to the image's natural height and width, so why is the image clipped? What can I do to make the full image visible?

If you really want the border to overlay on top of the the image, then put them both in a <Grid> or <Canvas>
<Canvas>
<Image/>
<Borde/>
</Canvas>

Moving items from one Grid to another

OK, here's my XAML:
<Window x:Class="nathan___visual_studio_panes___layers.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<StackPanel DockPanel.Dock="Top">
<Button Name="move_ellipse2_to_GridA" Click="move_ellipse2_to_GridA_Click">
Move ellipse2 to GridA
</Button>
<Button Name="move_ellipse3_to_GridA" Click="move_ellipse3_to_GridA_Click">
Move ellipse3 to GridA
</Button>
</StackPanel>
<Grid Grid.IsSharedSizeScope="True" Background="AliceBlue">
<Grid Name="gridA">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Grid.Row="0" Fill="CornflowerBlue"/>
</Grid>
<Grid Name="gridB" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="1" Name="ellipse2" Fill="Aquamarine"/>
<GridSplitter Name="gridB_grid_splitter" Width="5" Grid.Column="1" HorizontalAlignment="Left"/>
</Grid>
<Grid Name="gridC" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="1" Name="ellipse3" Fill="Cornsilk"/>
<GridSplitter Name="gridC_grid_splitter" Width="5" Grid.Column="1" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</DockPanel>
</Window>
And here's the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace nathan___visual_studio_panes___layers
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
ColumnDefinition GridA_column_for_ellipse2 = new ColumnDefinition();
ColumnDefinition GridA_column_for_ellipse3 = new ColumnDefinition();
public MainWindow()
{
InitializeComponent();
}
private void move_ellipse2_to_GridA_Click(object sender, RoutedEventArgs e)
{
gridB.Children.Remove(gridB_grid_splitter);
var i = gridA.ColumnDefinitions.Count;
gridA.ColumnDefinitions.Add(GridA_column_for_ellipse2);
gridB.Children.Remove(ellipse2);
gridA.Children.Add(ellipse2);
Grid.SetColumn(ellipse2, i);
var grid_splitter = new GridSplitter() { Width = 5, HorizontalAlignment = HorizontalAlignment.Left };
gridA.Children.Add(grid_splitter);
Grid.SetColumn(grid_splitter, i);
Console.WriteLine(i);
}
private void move_ellipse3_to_GridA_Click(object sender, RoutedEventArgs e)
{
gridC.Children.Remove(gridC_grid_splitter);
var i = gridA.ColumnDefinitions.Count;
gridA.ColumnDefinitions.Add(GridA_column_for_ellipse3);
gridC.Children.Remove(ellipse3);
gridA.Children.Add(ellipse3);
Grid.SetColumn(ellipse3, i);
var grid_splitter = new GridSplitter() { Width = 5, HorizontalAlignment = HorizontalAlignment.Left };
gridA.Children.Add(grid_splitter);
Grid.SetColumn(grid_splitter, i);
Console.WriteLine(i);
}
}
}
If I start the program and click the "Move ellipse2 to GridA" and "Move ellipse3 to GridA" buttons, I get "the right thing". I.e. the three ellipses and two grid splitters all appear in the window.
However, if I start the program, drag the grid splitter (which moves ellipse3), click "Move ellipse2 to GridA", drag the grid splitter for ellipse2 (the green one), and finally click "Move ellipse3 to GridA", ellipse3 disappears completely!
What am I doing wrong here? :-) I.e. pushing both buttons should lead to all three ellipses showing up in the window, regardless of any splitter dragging.
I know this is kind of a weird demonstration program. One of the examples in Adam Nathan's WPF Unleashed is a model of the Visual Studio start screen. The demo program above is just exploring a different technique for docking/undocking the panes.
Thanks for any hints or tips. I'm a WPF newb. :-)

The solution
Place following code at the end of move_ellipse3_to_GridA_Click method
foreach (ColumnDefinition column in gridA.ColumnDefinitions)
column.Width = new GridLength(1, GridUnitType.Star);
The explanation
The problem is that GridSplitter modifies ColumnDefinition.Width. It remaines star, but it becomes something like "357*". That's why the last column in gridA becomes vanishingly small. You can see it if you place breakpoint at the beginning of move_ellipse3_to_GridA_Click handler, reproduce your "bad" scenario and press that button second time. Check gridA.ColumnDefinitions[0] and [1] Width there.
Awareness
Just for making the world better: it is advised to place GridSplitter in a dedicated ColumnDefinition (RowDefinition) with Width (Height) set to Auto, and the GridSplitter's alignments to Center and Stretch.
Also there's no need to define RowDefinition or ColumnDefinition if there's only one of them and there's no need to set element's Row or Column to 0 - it is by default.

how to make tooltip move along with mouse?

I am using Silverlight 3 + VSTS 2008. I have a image (Multiscale image control) and I place tooltip on this image. The function of Tooltip works fine. Since the image is big (about 500 * 500 size), and since end user could move mouse on the picture, and I want to display tooltip position along with the mouse (i.e. when mouse moves, I want to tooltip move along with the mouse). Currently, the tooltip displays at a fixed position.
Here is my current XAML code, any ideas how to solve this issue?
<MultiScaleImage x:Name="msi" Height="500" Width="500">
<ToolTipService.ToolTip>
<ToolTip Content="Here is a tool tip" Name="DeepZoomToolTip"></ToolTip>
</ToolTipService.ToolTip>
</MultiScaleImage>

I ended up having a similar issue and solved the issue by using a popup. This post contained the core solution. Here is the suggested XAML from the other post:
<Canvas x:Name="LayoutRoot" Background="White">
<Image Source="/pretty-pretty.png" MouseMove="Image_MouseMove" MouseLeave="Image_MouseLeave"/>
<Popup Name="DeepZoomToolTip">
<Border CornerRadius="1" Padding="1" Background="Azure" IsHitTestVisible="False">
<TextBlock Text="Here is a tool tip" />
</Border>
</Popup>
</Canvas>
And here is the suggested, this would go in the code behind:
private void Image_MouseMove(object sender, MouseEventArgs e)
{
DeepZoomToolTip.IsOpen = true;
DeepZoomToolTip.HorizontalOffset = e.GetPosition(LayoutRoot).X;
DeepZoomToolTip.VerticalOffset = e.GetPosition(LayoutRoot).Y;
}
private void Image_MouseLeave(object sender, MouseEventArgs e)
{
DeepZoomToolTip.IsOpen = false;
}

The tooltip control is designed to pop up roughly where the mouse meets the element to which it's bound, and can't respond to move events. Below is a custom tooltip example. I added the background and the z-index so that the TextBlock would appear over the image. The offset from the mouse position keeps the tooltip away from the mouse cursor, so that the movement is animated smoothly.
XAML:
<UserControl x:Class="ImageEditor.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="800">
<Canvas x:Name="MainCanvas">
<Border x:Name="tt" Background="Gray" Visibility="Collapsed" Canvas.ZIndex="10">
<TextBlock x:Name="txtTooltip" Width="90" Height="20" Text="This is a tooltip" ></TextBlock>
</Border>
<Image x:Name="theImage" Source="images/image.jpg" Width="300" MouseEnter="theImage_MouseEnter"
MouseMove="theImage_MouseMove" MouseLeave="theImage_MouseLeave">
</Image>
</Canvas>
</UserControl>
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace ImageEditor
{
public partial class TestControl : UserControl
{
private bool _tooltipVisible = false;
public TestControl()
{
InitializeComponent();
}
private void theImage_MouseMove(object sender, MouseEventArgs e)
{
if (_tooltipVisible)
{
tt.SetValue(Canvas.TopProperty, e.GetPosition(theImage).Y - (5 + txtTooltip.Height));
tt.SetValue(Canvas.LeftProperty, e.GetPosition(theImage).X - 5);
}
}
private void theImage_MouseEnter(object sender, MouseEventArgs e)
{
_tooltipVisible = true;
tt.Visibility = Visibility.Visible;
}
private void theImage_MouseLeave(object sender, MouseEventArgs e)
{
_tooltipVisible = false;
tt.Visibility = Visibility.Collapsed;
}
}
}