Wpf 鼠标悬停在图像控件上时显示弹出窗口
我想显示弹出当鼠标在图像控制。所以我创建了控制模板,它看起来像这样:Wpf 鼠标悬停在图像控件上时显示弹出窗口,wpf,image,wpf-controls,popup,Wpf,Image,Wpf Controls,Popup,我想显示弹出当鼠标在图像控制。所以我创建了控制模板,它看起来像这样: <ControlTemplate x:Key="AvatarImageTemplate" TargetType="{x:Type Image}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition></Column
<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>
我尝试在视图中使用此控件:
<Grid Background="#99CCFF" Margin="4,4,4,4">
<Controls:AvatarImageControl ImageSource="{Binding Path=Oponent.Info.ProfilePhoto,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
解决办法是:
<Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay}">
将绑定模式设置为单向
它工作得很好
感谢格拉兹科夫先生的帮助。这方面的一般方法:
<CONTROL>
<Grid>
<!-- Actual control content -->
<Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}">
<!-- Popup content -->
</Popup>
</Grid>
</CONTROL>
您也可以通过RelativeSource绑定访问图像源,只需搜索祖先类型的图像
编辑:现在您的问题已经澄清了一点,我可以试着为您的两个具体问题找到一些代码。Edit2:太慢…无法为图像控件定义控件模板,因为它不是从
控件派生的,因此它没有控件模板。它只是在OnRender方法中渲染自己
您可以使用一个依赖属性ImageSource
创建一个用户控件。以下是此控件的XAML:
<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>
Gj是一个很好的完整答案,他还打算建议使用一个用户控件。格拉兹科夫:我尝试了你的解决方案,但我不知道我做得不好,我在我的视图中没有看到任何带有图像的用户控件。请查看我在你的帖子上的评论。也将在此处重复:“您忘记在UserControl中指定名称(请参见我的回答中的第4行):x:name=“root”“谢谢,我没有注意到,对不起。我也不知道,但如果使用此控件尝试打开窗口,我会得到与您相同的代码a I get error:{函数求值已禁用,因为以前的函数求值超时。您必须继续执行才能重新启用函数求值。}此错误非常常见。你能发布更多细节吗?内部异常,错误发生的地方,等等。您忘记在UserControl中指定名称(请参阅我的回答中的第4行):x:name=“root”好的,我修复了这个问题。是的,忘记了绑定模式。。。更新了我的答案。
{"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}">
<CONTROL>
<Grid>
<!-- Actual control content -->
<Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}">
<!-- Popup content -->
</Popup>
</Grid>
</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>
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));
}