logo标签列表

当鼠标悬停在图像控件上时显示弹出窗口。

wpfimagewpf-controlspopup
5

当鼠标悬停在图像控件上时，我希望显示弹出窗口。因此，我创建了一个控件模板，它看起来像这样：

        <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. 如果我尝试在图像控件上创建样式并设置属性模板 -> 图像控件没有模板属性。

我的目的是显示一个弹出窗口，其中包含相同的图像，只是更大。

编辑：

根据Glazkov先生的建议，我创建了一个简单的控件，其中包含图像控件，这是它：

<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的属性类型绑定到AvatarImageControl的ImageSource。

我的做法有什么问题吗？

此外，我在用户控件中尝试了这个：

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

结果是相同的。

我在视图中使用用户控件，将来自视图模型类型为Uri的ImageSource属性绑定到它。没有别的。

编辑2： 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

解决方案是：
 <Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay}">

将单向绑定模式设置为 on。

它运行良好。

感谢 Glazkov 先生的帮助。

您忘记在UserControl中指定名称（请参见我的答案中的第4行）：x：Name ="root"。 - Pavlo Glazkov
好的，我已经修复了这个问题。 - user572844
是的，忘记了绑定模式... 我更新了我的答案。 - Pavlo Glazkov
2个回答
10

由于图像控件并非派生自Control，因此无法为其定义控件模板，因此它没有控件模板。它只在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>

这是 (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));
}
Gj，非常好而且完整的答案，我也想建议使用UserControl。 - H.B.
Glazkov先生，我尝试了您提供的解决方案，但是我不知道我做错了什么，我的视图中没有看到任何带有图像的用户控件。 - user572844
请查看我在您的帖子上的评论。并在此重复一遍：“您忘记在 UserControl 中指定名称（请参见我的答案中的第4行）：x:Name=”root””。 - Pavlo Glazkov
谢谢，我没有注意到，抱歉。另外，我也遇到了同样的代码问题，如果我尝试使用此控件打开窗口，会出现以下错误：{由于先前的函数评估超时，因此禁用了函数评估。您必须继续执行以重新启用函数评估。} - user572844
错误非常通用。你能发布更多细节吗？内部异常，错误发生的位置等。 - Pavlo Glazkov
4
一般的方法如下：
    <CONTROL>
        <Grid>
            <!-- Actual control content -->
            <Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}">
                <!-- Popup content -->
            </Popup>
        </Grid>
    </CONTROL>

你也可以通过RelativeSource绑定访问图像源，只需搜索祖先类型Image即可。
编辑：现在你的问题已经整理得更好了，我可以尝试为你找到一些代码来解决你的两个具体问题。
编辑2：太慢了...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接