2010-01-22 10 views
10

मेरे पास एक लंबा स्क्रॉल व्यूअर है और मैं स्क्रॉल बार पर छोटी छवियों के साथ महत्वपूर्ण स्पॉट चिह्नित करना चाहता हूं। यदि छवि पर क्लिक किया गया है तो स्क्रॉल बार संबंधित सामग्री पर कूद जाएगा।डब्ल्यूपीएफ में स्क्रॉलबार के अंदर छवि "प्लेसमार्कर्स" कैसे डालें?

मैंने इस कार्यक्षमता को कुछ अनुप्रयोगों जैसे ग्रहण और Chrome में देखा है और यह सोच रहा था कि इसे WPF के साथ पुन: उत्पन्न कैसे किया जाए।

उत्तर

11

संक्षिप्त उत्तर "स्क्रॉलबार का टेम्पलेट बदलें" है।

लंबा उत्तर है ... कि मैं स्क्रॉलबार नियंत्रण के टेम्पलेट में एक आइटम नियंत्रण जोड़ूंगा। मैं इस आइटम्स कंट्रोल को टेम्पलेट के शीर्ष पर अपने IsHitTestVisible सेट के साथ गलत पर रखूंगा ताकि यह माउस ईवेंट कैप्चर न करे।

तब मैं स्पॉट्स को सही तरीके से स्थानांतरित करने में सक्षम होने के लिए आइटम कैनवास टेम्पलेट के रूप में कैनवास का उपयोग करूंगा। मैं छवि के साथ प्रत्येक तत्व को प्रस्तुत करने के लिए आइटम्स कंट्रोल की आइटम्ससोर्स प्रॉपर्टी और डेटा टेम्पलेट के साथ डाटाबेसिंग का उपयोग करूंगा।

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

alt text http://www.japf.fr/download/scrollbars.png

<ControlTemplate TargetType="{x:Type ScrollBar}"> 
    <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
      <ColumnDefinition Width="0.00001*"/> 
      <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
     </Grid.ColumnDefinitions> 
     <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/> 
     <Track x:Name="PART_Track" Grid.Column="1" d:IsHidden="True"> 
      <Track.Thumb> 
       <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/> 
      </Track.Thumb> 
      <Track.IncreaseRepeatButton> 
       <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/> 
      </Track.IncreaseRepeatButton> 
      <Track.DecreaseRepeatButton> 
       <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/> 
      </Track.DecreaseRepeatButton> 
     </Track> 
     <ItemsControl Grid.Column="1" HorizontalAlignment="Stretch"> 
      <sys:Double>10</sys:Double> 
      <sys:Double>50</sys:Double> 
      <sys:Double>100</sys:Double> 
      <sys:Double>140</sys:Double> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Rectangle Fill="Orange" Width="3" Height="16"/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemContainerStyle> 
       <Style TargetType="ContentPresenter"> 
        <Setter Property="Canvas.Left" Value="{Binding }" /> 
       </Style> 
             </ItemsControl.ItemContainerStyle> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <Canvas/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
     <RepeatButton Style="{StaticResource ScrollBarButton}" Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow" d:IsHidden="True"/> 
    </Grid> 
</ControlTemplate> 
+0

स्क्रॉलबार का आकार बदलने के साथ आप समस्या को कैसे हल करते हैं? मार्कर अभी भी एक ही स्थिति पर हैं लेकिन खिड़की का एक और आकार है इसलिए मार्कर गलत स्थिति पर हैं। पता नहीं कैसे हल करें। –

+1

हम्म, उस स्थिति में, मुझे लगता है कि आपको मार्करों की स्थिति को पुन: सम्मिलित करने के लिए साइज चेंज किए गए ईवेंट को संभालने में सक्षम होने के लिए स्क्रॉलबार वर्ग को उप-वर्ग करने की आवश्यकता हो सकती है (या इसी तरह मेरे पास सही नाम नहीं है)। – japf

1

japfs के लिए योगदान करने के लिए उत्तर दें: मैं आकार बदलने मुद्दे पर अद्यतन हल: आप japfs शैली का उपयोग करें और ItemControl करने के लिए एक ItemsSource आवेदन कर सकते हैं:

ItemsSource="{Binding Positions, UpdateSourceTrigger=PropertyChanged}" 

बस निश्चित स्थिति प्रकार का पर्यवेक्षण चयन है और स्थिति को चेंज-इवेंट में पुन: गणना की जाती है। उस घटना कॉल (INotifyPropertyChanged इंटरफ़ेस है जो आपके ViewModel को लागू करना चाहिए) में इसके अतिरिक्त

OnPropertyChanged("Positions"); 

एक सूची के साथ यह कोशिश की पहले, लेकिन वह सही ढंग से अद्यतन नहीं किया। पर्यवेक्षण चयन के साथ काम ठीक है।