WPF

Question

में अन्य नियंत्रणों पर नियंत्रण फ़्लोट करें मुझे इस प्रश्न का phrasing भी कठिन समय हो रहा है।

मैं एक सूची बॉक्स में अपने यूआई में उपयोगकर्ताओं को पूर्वावलोकन छवियां प्रदर्शित कर रहा हूं। जब कोई उपयोगकर्ता छवि पर होवर करता है, तो मैं इसे विस्तारित करना चाहता हूं ताकि उपयोगकर्ता अधिक जानकारी देख सके।

मैं उस बिंदु पर पहुंच गया हूं जहां मैं छवि को "पॉप अप" कर सकता हूं, लेकिन निश्चित रूप से यह अभी भी लेआउट में अपनी सामान्य स्थिति में है, जिसका अर्थ यह है कि छवि को अन्य नियंत्रणों के शीर्ष पर प्रदर्शित किया जा रहा है यह, यह केवल इसके पहले प्रदान किए गए नियंत्रणों के शीर्ष पर और उसके बाद प्रस्तुत किए गए नियंत्रणों के शीर्ष पर दिखाई देता है। यह सूची बॉक्स की सीमाओं से भी उगाया जा रहा है।

क्या अस्थायी रूप से, दृश्य लेआउट से उस छवि को निकालने और इसे अन्य सभी तत्वों से ऊपर रखने के लिए एक सरल (यानी कोई कस्टम नियंत्रण विकास) तरीका नहीं है?

यहाँ एक भद्दा डेमो एप्लिकेशन से पता चलता है कि मैं किस बारे में बात कर रहा हूँ है:

सूचना ज़ूम छवि (की सूची बॉक्स लाल है के बाहर) ListBox की सीमा से काटा गया है। साथ ही, ध्यान दें कि ज़ूम किए गए छवि ओवरले के बाद प्रदान किए गए यूआई तत्व अभी भी - दोनों आइकन जो बाद में आते हैं और आइटम नाम ("आइटम 5" और अन्य निचले बाएं कोने में देखे जाते हैं)।

Answer 1

यहाँ एक उदाहरण है

जिस समाधान ने मेरे लिए सबसे अच्छा काम किया वह पॉपअप आदिम का उपयोग कर रहा था। एनीमेशन की बात आती है जब यह नियंत्रण के रास्ते में ज्यादा प्रदान नहीं करती है (यह स्टॉक एनीमेशन के साथ आता है) लेकिन आप अपनी सामग्री को किसी भी तरह से एनिमेट कर सकते हैं।

<Image 
    Name="icon" 
    Source="{Binding MaiImaeg}"> 
    <Image.Triggers> 
    <EventTrigger 
     RoutedEvent="Image.MouseEnter"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    <EventTrigger 
     RoutedEvent="Image.MouseLeave"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="0" 
       Duration="0:0:0" /> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="0" 
       Duration="0:0:0" /> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    </Image.Triggers> 
</Image> 
<Popup 
    Name="popup" 
    IsOpen="{Binding IsMouseOver, ElementName=icon, Mode=OneWay}" 
    PlacementTarget="{Binding ElementName=icon}" 
    Placement="Left" 
    Width="640" 
    Height="640" 
    StaysOpen="true" 
    AllowsTransparency="True"> 
    <Image 
     Width="48" 
     Height="48" 
     Source="{Binding MaiImaeg}"> 
     <Image.RenderTransform> 
      <ScaleTransform 
       x:Name="tranny" 
       CenterX="48" 
       CenterY="24" 
       ScaleX="1" 
       ScaleY="1" /> 
     </Image.RenderTransform> 
    </Image> 
</Popup> 

इस स्निपेट में, पॉपअप जब तक IsMouseOver अपनी छवि ("आइकन" नाम) के लिए सच है खुला नहीं है। जब माउस छवि में प्रवेश करता है, तो दो चीजें होती हैं। पॉपअप खुलता है (640x640 पर) और एक छवि दिखाई जाती है (48 पीएक्स द्वारा 48 पीएक्स)। इस छवि पर एक पैमाने पर परिवर्तन है। "आइकन" छवि में माउसइंटर और माउसलेव के लिए स्टोरीबोर्ड भी है। यह स्टोरीबोर्ड पॉपअप छवि के स्केलट्रांसफॉर्म पर लक्षित एक डबल एनीमेशन का उपयोग करता है। यह स्टोरीबोर्ड उस छवि को बढ़ाता है जब माउस एक अच्छा आसान कार्य करने के साथ छोड़ देता है जब इसे घुमाता है और उसे छोटा करता है।

उपयोग केस होगा: "उपयोगकर्ता सूची में प्रत्येक आइटम के लिए छोटी छवियों के साथ एक सूची बॉक्स प्रस्तुत किया जाता है। जब उपयोगकर्ता छोटी छवि (आइकन) पर हो जाता है, तो यह आगे बढ़ता है और बढ़ता है, जिससे उपयोगकर्ता को बेहतर दृश्य मिलता है छवि के। जब माउस छवि छोड़ देता है, तो यह अपने मूल आकार में वापस आता है। "

Answer 2

इस प्रभाव को अक्सर फिशिए के रूप में जाना जाता है। आपके पास उस शब्द का उपयोग कर संसाधनों की तलाश में बेहतर भाग्य हो सकता है। यहां एक नमूना है। http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

यदि आप कुछ सरल खोज रहे हैं, तो आप छवि (या ListBoxItem) के लिए टूलटिप भी बना सकते हैं जिसमें छवि का बड़ा संस्करण शामिल है। यह एक सामान्य टूलटिप की तरह प्रदर्शित किया जाएगा जब उपयोगकर्ता छवि के छोटे संस्करण पर होवर करता है।

<Image Width="100"> 
    <Image.Source> 
     <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
    </Image.Source> 
    <Image.ToolTip> 
     <Image Width="500"> 
      <Image.Source> 
       <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
      </Image.Source> 
     </Image> 
    </Image.ToolTip> 
</Image> 

प्रभाव, तुम क्या वर्णन करने के लिए समान है, सिवाय मेनू आइटम अभी भी वहाँ है, लेकिन वहाँ भी यह का एक बड़ा संस्करण दिखाया गया है, इस तरह है::

alt text http://img695.imageshack.us/img695/4525/tooltipenlarge.png