Mostrar ventana emergente cuando está sobre el control de imagen del mouse

Question

Me gustaría mostrar la ventana emergente cuando el mouse está sobre el control de la imagen. Así que creo plantilla de control, se vería así:

 <ControlTemplate x:Key="AvatarImageTemplate" TargetType="{x:Type Image}"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition></RowDefinition> 
        <RowDefinition></RowDefinition> 
       </Grid.RowDefinitions> 

       <HERE I WANT IMAGE SOURCE Grid.Row="0"/> 
       <Popup IsOpen="False" 
          Name="OponentImagePopUp"        
          AllowsTransparency="True" 
          PopupAnimation="Slide" 
          HorizontalOffset="-35" 
          VerticalOffset="0" 
          Grid.Row="1"> 
        <Border BorderThickness="1" 
           BorderBrush="Black"> 
         <Grid Height="350" MinWidth="350"> 
          <Grid.Background> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.3"> 
            <LinearGradientBrush.GradientStops> 
             <GradientStop Color="LightGray" Offset="0"/> 
             <GradientStop Color="WhiteSmoke" Offset="1"/> 
            </LinearGradientBrush.GradientStops> 
           </LinearGradientBrush> 
          </Grid.Background> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="75"></ColumnDefinition> 
           <ColumnDefinition Width="*"></ColumnDefinition> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"></RowDefinition> 
          </Grid.RowDefinitions> 

          <Border BorderThickness="1" 
            BorderBrush="Black" 
            Background="White" 
            Margin="4,4,4,4" 
            Grid.Column="0"> 
           <Image Margin="2,2,2,2"> 
            <Image.Source > 
             <MultiBinding Converter="{StaticResource avatarConverter}"> 
              <Binding Path="ProfilePhoto"></Binding> 
              <Binding Path="StatusInfo.IsLogged"></Binding> 
             </MultiBinding> 
            </Image.Source> 
           </Image> 
          </Border> 
         </Grid> 
        </Border> 
       </Popup> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter TargetName="OponentImagePopUp" Property="IsOpen" Value="True" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

Tengo dos problemas:

1. no cómo puedo Acceso al origen de la imagen en la plantilla de control
2. también si lo intento hacer un estilo en Control de imagen y establecer propiedad Plantilla -> Control de imagen no tiene una plantilla de propiedad.

Mi objetivo es mostrar una ventana pop pop con la misma imagen, pero más grande.

EDIT:

puedo crear un control sencillo, como un consejo al Sr. Glazkov, que tienen control de la imagen, aquí es:

<UserControl x:Class="Spirit.Controls.AvatarImageControl" 
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <Image x:Name="SmallImage" 
      Source="{Binding ElementName=root, Path=ImageSource}" 
      Stretch="Fill"/> 
    </Grid> 
</UserControl> 

Código atrás es la misma:

public partial class AvatarImageControl : UserControl 
    { 
     public AvatarImageControl() 
     { 
      InitializeComponent(); 
     } 

     public ImageSource ImageSource 
     { 
      get { return (ImageSource)GetValue(ImageSourceProperty); } 
      set { SetValue(ImageSourceProperty, value); } 
     } 

     public static readonly DependencyProperty ImageSourceProperty = 
      DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvatarImageControl), new UIPropertyMetadata(null)); 

    } 

Intento utilizar este control a la vista:

<Grid Background="#99CCFF" Margin="4,4,4,4"> 
     <Controls:AvatarImageControl ImageSource="{Binding Path=Oponent.Info.ProfilePhoto,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"/> 
</Grid> 

Adjunto el tipo de propiedad de Uri a ImageSource de AvatarImageControl.

¿Qué hago mal?

Además de que este intento de control de usuario:

<Grid> 
    <Image x:Name="SmallImage" 
     Source="{Binding Path=ImageSource, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
     Stretch="Fill"/> 
</Grid> 

El resultado es el mismo.

Uso el control de usuario a la vista, enlace la propiedad de la propiedad ImageSource para ver el tipo de modelo de Uri. Nada más.

EDIT 2: Código del Sr. Glazkov excepción productos:

{"Set property 'System.Windows.Controls.Primitives.Popup.IsOpen' threw an exception."} 
{"A TwoWay or OneWayToSource binding cannot work on the read-only property 'IsMouseOver' of type 'System.Windows.Controls.Image'."} 
StackTrace: 
    at System.Windows.Markup.XamlReader.RewrapException(Exception e, IXamlLineInfo lineInfo, Uri baseUri) 
    at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri) 
    at System.Windows.Markup.WpfXamlLoader.LoadBaml(XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri) 
    at System.Windows.Markup.XamlReader.LoadBaml(Stream stream, ParserContext parserContext, Object parent, Boolean closeStream) 
    at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator) 
    at Spirit.Controls.AvatarImageControl.InitializeComponent() in c:\Users\Jan\Documents\Visual Studio 2010\Projects\BACKUP\Pokec__Messenger\Spirit_Caliburn_Micro_v1.0\Controls\AvatarImageControl.xaml:line 1 
    at Spirit.Controls.AvatarImageControl..ctor() in C:\Users\Jan\Documents\Visual Studio 2010\Projects\BACKUP\Pokec__Messenger\Spirit_Caliburn_Micro_v1.0\Controls\AvatarImageControl.xaml.cs:line 24 

solución es: modo de unión en un solo sentido

<Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay}"> 

Set.

Funciona bien.

Gracias al Sr. Glazkov por su ayuda.

Answer 1

No se puede definir una plantilla de control para el control de imagen porque no se deriva de Control, por lo tanto, no tiene una plantilla de control. Simplemente se presenta en el método OnRender.

Lo que puede hacer es crear un Control de usuario con una propiedad de dependencia ImageSource. Aquí está el XAML de este control:

<UserControl x:Class="AvatarImage" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      x:Name="root"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Image x:Name="SmallImage" 
       Source="{Binding ElementName=root, Path=ImageSource}" 
       Grid.Row="0" /> 
     <Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
       Name="OponentImagePopUp" 
       AllowsTransparency="True" 
       PopupAnimation="Slide" 
       HorizontalOffset="-35" 
       VerticalOffset="0" 
       Grid.Row="1"> 
      <Border BorderThickness="1" 
        BorderBrush="Black"> 
       <Grid Height="350" 
         MinWidth="350"> 
        <Grid.Background> 
         <LinearGradientBrush StartPoint="0,0" 
              EndPoint="0,0.3"> 
          <LinearGradientBrush.GradientStops> 
           <GradientStop Color="LightGray" 
               Offset="0" /> 
           <GradientStop Color="WhiteSmoke" 
               Offset="1" /> 
          </LinearGradientBrush.GradientStops> 
         </LinearGradientBrush> 
        </Grid.Background> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="75"></ColumnDefinition> 
         <ColumnDefinition Width="*"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"></RowDefinition> 
        </Grid.RowDefinitions> 

        <Border BorderThickness="1" 
          BorderBrush="Black" 
          Background="White" 
          Margin="4,4,4,4" 
          Grid.Column="0"> 
         <Image Margin="2,2,2,2"> 
          <Image.Source> 
           <MultiBinding Converter="{StaticResource avatarConverter}"> 
            <Binding Path="ProfilePhoto"></Binding> 
            <Binding Path="StatusInfo.IsLogged"></Binding> 
           </MultiBinding> 
          </Image.Source> 
         </Image> 
        </Border> 
       </Grid> 
      </Border> 
     </Popup> 
    </Grid> 
</UserControl> 

Y aquí está el código subyacente (AvatarImage.xaml.cs):

public partial class AvatarImage : UserControl 
{ 
    public AvatarImage() { 
     InitializeComponent(); 
    } 

    public ImageSource ImageSource { 
     get { return (ImageSource)GetValue(ImageSourceProperty); } 
     set { SetValue(ImageSourceProperty, value); } 
    } 

    public static readonly DependencyProperty ImageSourceProperty = 
     DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvatarImage), new UIPropertyMetadata(null)); 
} 

Answer 2

Un enfoque general para esto:

<CONTROL> 
     <Grid> 
      <!-- Actual control content --> 
      <Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}"> 
       <!-- Popup content --> 
      </Popup> 
     </Grid> 
    </CONTROL> 

Puede acceder a la fuente de imagen a través de RelativeSource vinculante, así, sólo una búsqueda para el tipo ancestro Imagen.

Editar: Ahora que su pregunta se ha limpiado un poco puedo intentar encontrar algún código para sus dos problemas específicos ..
Edit2: Demasiado lento ...