показывать всплывающее окно при наведении курсора мыши на элемент управления изображением

Я бы хотел, чтобы всплывающее окно появлялось при наведении указателя мыши на элемент управления изображением . Итак, я создаю шаблон элемента управления, он выглядит так:

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

У меня две проблемы:

  1. Я не знаю, как мне получить доступ к источнику изображения в шаблоне элемента управления
  2. Также, если я попробую создать стиль для элемента управления изображением и установить свойство Шаблон -> Элемент управления изображением не имеет шаблона свойства.

Моя цель - показать всплывающее окно с таким же изображением только большего размера.

РЕДАКТИРОВАТЬ:

Я создаю простой элемент управления, как советует г-н Глазков, у которых есть управление изображением, вот оно:

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

Код такой же:

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

    }

Я пытаюсь использовать этот элемент управления в представлении:

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

Я привязываю тип свойства Uri к ImageSource AvatarImageControl.

Что я делаю плохо?

Также я пробую это в пользовательском элементе управления:

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

Результат тот же.

Я использую пользовательский элемент управления в представлении, я привязываю свойство свойства ImageSource из типа модели представления Uri. Больше ничего.

РЕДАКТИРОВАТЬ 2: Код г-на Глазкова производит исключение:

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

Решение:

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

Установить режим привязки на односторонний.

Работает хорошо.

Благодарю г-на Глазкова за помощь.

5
задан 19 January 2011 в 14:43
поделиться