छवि नियंत्रण पर माउस होने पर पॉप अप दिखाएं

Question

मैं छवि नियंत्रण पर माउस होने पर पॉप अप करना चाहता हूं। इसलिए मैं नियंत्रण टेम्पलेट बनाने के लिए, यह इस तरह दिखेगा:

 <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. मैं नहीं मैं कैसे नियंत्रण टेम्पलेट में छवि स्रोत को acces कर सकते हैं
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)); 

    } 

मैं इस contol को देखने में उपयोग करने का प्रयास करता हूं:

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

मैं संपत्ति प्रकार के उरी को अवतार इमेज कंट्रोल के इमेजसोर्स से बांधता हूं।

मैं क्या बुरा करता हूं?

इसके अलावा, मैं उपयोगकर्ता नियंत्रण में इस प्रयास करें:

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

परिणाम एक ही है।

मैं उपयोगकर्ता नियंत्रण को देखने में उपयोग करता हूं, मैं छवि स्रोत प्रकार उरी से छविसोर्स संपत्ति संपत्ति पर बांधता हूं। और कुछ नहीं।

संपादित करें 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}"> 

सेट oneway पर मोड बाध्यकारी।

यह अच्छा काम करता है।

सहायता के लिए श्री ग्लेज़कोव धन्यवाद।

Answer 1

आप छवि नियंत्रण के लिए नियंत्रण टेम्पलेट परिभाषित नहीं कर सकते क्योंकि यह Control से नहीं लिया गया है, इस प्रकार इसमें कोई नियंत्रण टेम्पलेट नहीं है। यह सिर्फ ऑनरेंडर विधि में ही प्रस्तुत करता है।

आप एक निर्भरता संपत्ति ImageSource के साथ उपयोगकर्ता नियंत्रण बनाने के लिए क्या कर सकते हैं।

<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) और:: यहाँ इस पर नियंत्रण की XAML है

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

Answer 2

एक यह करने के लिए सामान्य दृष्टिकोण:

<CONTROL> 
     <Grid> 
      <!-- Actual control content --> 
      <Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}"> 
       <!-- Popup content --> 
      </Popup> 
     </Grid> 
    </CONTROL> 

आप RelativeSource बाध्यकारी रूप में अच्छी तरह, तुम बस पूर्वज प्रकार छवि के लिए खोज के माध्यम से छवि स्रोत पहुँच सकते हैं।

संपादित करें: अब जब आपका प्रश्न थोड़ा साफ हो गया है, तो मैं आपकी दो विशिष्ट समस्याओं के लिए कुछ कोड ढूंढने का प्रयास कर सकता हूं ..
संपादित 2: बहुत धीमी ...