鼠标悬停在图像控件上时显示弹出窗口 [英] show pop up when is mouse over image control
问题描述
我想在鼠标悬停在图像控件上时显示弹出窗口.所以我创建了控件模板,它看起来像这样:
I would like show pop up when is mouse over the image control. So I create control template, it look like this:
<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>
我有两个问题:
- 我不知道如何访问控件模板中的图像源
- 如果我尝试在 Image 控件上创建样式并设置属性 Template -> Image 控件没有属性模板.
我的目标是显示具有相同图像的弹出窗口,只是更大.
My aim is show pop pop window with same image only bigger.
我创建了简单的控件,作为 Glazkov 先生的建议,它具有图像控件,这里是:
I create simple control, as advice Mr. Glazkov, which have image control, here is it:
<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));
}
我尝试在视图中使用此控件:
I try use this contol in view:
<Grid Background="#99CCFF" Margin="4,4,4,4">
<Controls:AvatarImageControl ImageSource="{Binding Path=Oponent.Info.ProfilePhoto,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
我将 Uri 的属性类型绑定到 AvatarImageControl 的 ImageSource.
I bind property type of Uri to ImageSource of AvatarImageControl.
我做错了什么?
我也在用户控制中尝试这个:
Also I try this in user control:
<Grid>
<Image x:Name="SmallImage"
Source="{Binding Path=ImageSource, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Stretch="Fill"/>
</Grid>
结果是一样的.
我在视图中使用用户控件,我从 Uri 的视图模型类型绑定到 ImageSource 属性属性.没有别的了.
I use user control in view, I bind on ImageSource property property from view model type of Uri. Nothing else.
编辑 2:Glazkov先生的代码产生异常:
EDIT 2: Code of Mr. Glazkov produce exception:
{"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:UsersJanDocumentsVisual Studio 2010ProjectsBACKUPPokec__MessengerSpirit_Caliburn_Micro_v1.0ControlsAvatarImageControl.xaml:line 1
at Spirit.Controls.AvatarImageControl..ctor() in C:UsersJanDocumentsVisual Studio 2010ProjectsBACKUPPokec__MessengerSpirit_Caliburn_Micro_v1.0ControlsAvatarImageControl.xaml.cs:line 24
解决办法是:
<Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay}">
设置单向绑定模式.
效果很好.
感谢 Glazkov 先生的帮助.
Thank Mr. Glazkov for help.
推荐答案
不能为图像控件定义控件模板,因为它不是从Control
派生的,因此它没有控件模板.它只是在 OnRender 方法中呈现自己.
You cannot define a control template for the image control because it is not derived from Control
, thus it doesn't have a control template. It just renders itself in the OnRender method.
您可以做的是创建一个具有一个依赖属性ImageSource
的用户控件.这是此控件的 XAML:
What you can do is to create a User Control with one dependency property ImageSource
. Here is the XAML of this 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>
这是背后的代码(AvatarImage.xaml.cs):
And here is the code behind (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));
}
这篇关于鼠标悬停在图像控件上时显示弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!