且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-31 22:46:16

不能为图像控件定义控件模板,因为它不是从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));
}