mostra pop-up quando si passa il mouse sul controllo immagine

Vorrei mostrare il pop-up quando si passa il mouse sopra il controllo immagine. Così creo modello di controllo, è simile a questa:mostra pop-up quando si passa il mouse sul controllo immagine

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

Ho due problemi:

non come posso accesso alla sorgente di immagini in modello di controllo non
Anche se provo creare uno stile su Controllo immagine e impostare proprietà Modello -> Controllo immagine non hanno un modello di proprietà.

Il mio obiettivo è mostrare la finestra pop pop con la stessa immagine solo più grande.

EDIT:

creo controllo semplice, come consiglio signor Glazkov, che hanno il controllo delle immagini, qui è:

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

codice dietro è lo stesso:

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)); 

    }

Provo a utilizzare questo dispositivo di controllo in vista:

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

Associare il tipo di proprietà di Uri a ImageSource di AvatarImageControl.

Cosa faccio male?

Inoltre provo questo nel controllo utente:

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

Il risultato è lo stesso.

Utilizzo il controllo utente in vista, collego la proprietà di proprietà ImageSource dal tipo di modello di visualizzazione di Uri. Nient'altro.

EDIT 2: Codice di eccezione prodotti Mr. Glazkov:

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

Solution è:

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

Impostare il modo vincolante per senso unico.

Funziona bene.

Grazie a Mr. Glazkov per l'aiuto.

fonte

2011-01-19 Anonymous

Hai dimenticato di specificare il nome della tua UserControl (vedi linea 4 nella mia risposta): x: Name = "root" –

Oki, riparo ancora questo problema. –

Sì, ho dimenticato la modalità di rilegatura ... Ho aggiornato la mia risposta. –

Non è possibile definire un modello di controllo per il controllo immagine perché non è derivato da Control, quindi non ha un modello di controllo. Si trasforma solo nel metodo OnRender.

Che cosa è possibile fare è creare un controllo utente con una proprietà di dipendenza ImageSource. Ecco il codice XAML di questo controllo:

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

E qui è il codice dietro (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)); 
}

fonte

2011-01-19 13:15:03

Gj, bella e completa risposta, avrebbe suggerito anche un UserControl. –

Mr. Glazkov Cerco la tua soluzione ma non so cosa faccio male, non vedo nessun controllo utente con l'immagine nella mia vista. –

Si prega di vedere il mio commento sul tuo post. Inoltre lo ripeterò qui: "Hai dimenticato di specificare il nome nel tuo UserControl (vedi la riga 4 nella mia risposta): x: Name =" root "" –

Un approccio generale a questo:

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

È possibile accedere alla fonte immagine tramite RelativeSource vincolante pure, basta cercare il tipo antenato immagine.

Modifica: Ora che la tua domanda è pulita un po 'posso provare a trovare del codice per i tuoi due problemi specifici ..
Edit2: Troppo lento ...

fonte

2011-01-19 13:05:43

mostra pop-up quando si passa il mouse sul controllo immagine

risposta

Problemi correlati