संक्षिप्त उत्तर "स्क्रॉलबार का टेम्पलेट बदलें" है।
लंबा उत्तर है ... कि मैं स्क्रॉलबार नियंत्रण के टेम्पलेट में एक आइटम नियंत्रण जोड़ूंगा। मैं इस आइटम्स कंट्रोल को टेम्पलेट के शीर्ष पर अपने 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>
स्क्रॉलबार का आकार बदलने के साथ आप समस्या को कैसे हल करते हैं? मार्कर अभी भी एक ही स्थिति पर हैं लेकिन खिड़की का एक और आकार है इसलिए मार्कर गलत स्थिति पर हैं। पता नहीं कैसे हल करें। –
हम्म, उस स्थिति में, मुझे लगता है कि आपको मार्करों की स्थिति को पुन: सम्मिलित करने के लिए साइज चेंज किए गए ईवेंट को संभालने में सक्षम होने के लिए स्क्रॉलबार वर्ग को उप-वर्ग करने की आवश्यकता हो सकती है (या इसी तरह मेरे पास सही नाम नहीं है)। – japf