كيفية وضع ScrollViewer فوق المحتوى يجب أن يتم التمرير

Question

أرغب في وضع ScrollViewer الخاص بي بطريقة تتداخل/يتواصل فوق المحتوى الذي يتم تمريره. أود أن أضع عتامة ScrollViewer بحيث يكون المحتوى مرئيًا تحتها.

بقدر ما أفهم ScrollViewer الافتراضي ، لا يبدو أن هذا ممكن خارج المربع نظرًا لأن المحتوى متداخل داخل ScrollViewer.

أي أفكار حول كيفية جعل هذا العمل؟

تحرير: أفهم أن ScrollViewer هو ديكور وأن المحتوى ليس على دراية بـ ScrollViewer. هذا الفصل جيد ولا أريد أن يكون المحتوى على دراية بـ ScrollViewer. ما أحاول فعله هو شيء بصري (تخطيط) بحت. ما عليك سوى إظهار ScrollViewer أعلى المحتوى. يجب أن يظل سلوك ScrollViewer دون تغيير.

Answer 1

أعتقد أنني أفهم الآن ما تعنيه بـ "On Top" - إحدى الطرق للقيام بذلك هي استخدام قالب التحكم الذي يجعل ScrollContentPresenter يمتد إلى صفين وأعمدة من الشبكة أثناء وجود أشرطة التمرير في الصفوف والأعمدة الثانية. يتم تعيين أشرطة التمرير لتكون شبه شفافة. سوف يرسم المحتوى الآن تحت أشرطة التمرير!

الأسلوب الذي جربته هذا يعمل على النحو التالي:

<Style x:Key="SVStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                        <ScrollBar Name="PART_VerticalScrollBar"
                            HorizontalAlignment="Right"
                            Opacity="0.5" 
                            Grid.Column="1"
                            Value="{TemplateBinding VerticalOffset}"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <ScrollBar Name="PART_HorizontalScrollBar"
                            VerticalAlignment="Bottom"
                            Orientation="Horizontal"
                            Opacity="0.5"
                            Grid.Row="1"
                            Value="{TemplateBinding HorizontalOffset}"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

مثال الاستخدام:

<ScrollViewer HorizontalScrollBarVisibility="Auto" Style="{StaticResource SVStyle}" >
    <StackPanel>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >World World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
    </StackPanel>
</ScrollViewer>

والنتيجة هي على غرار هذا:

سيكون الأمر بسيطًا في تعديل هذا بحيث تكون أشرطة التمرير شفافة في البداية (على سبيل المثال ، العتامة = 0.2) وجعلها تصبح أكثر غموضًا عندما يدخل الماوس شريط التمرير. سيكون هذا تأثيرًا رائعًا وسيبقي أشرطة التمرير خارج الطريق حتى الحاجة.

تعديل:

لقد كتبت هذا على مدونتي لأولئك الذين يرغبون في المزيد من التفاصيل.

Answer 2

الفكرة هي أن ScrollViewer هو ديكور لشيء ما يلفت عنه ومقاطع. الشيء الذي يتم تمريره غير مدرك تمامًا للتمرير. هذا بسيط وأنيق - لماذا لا يكفي في قضيتك؟

بعد قولي هذا ، إذا لم يفعل ScrollViewer ما تريد ، أقترح عليك إنشاء عناصر تحكم شريط التمرير والتعامل مع الأحداث التي تم إنشاؤها بواسطة ذلك ، ونقل المحتوى الذي ترغب في التمرير في معالجات الأحداث. قد تكون قادرًا على القيام ببعض ربط البيانات الفاخرة لتجنب كتابة معالجات الأحداث. لست متأكدًا من كيفية قيامك بقص المحتوى بشكل صحيح ، لكن هذه علبة جديدة من الديدان.

إذا كنت بحاجة إلى تخطيط عنصر تحكم في أعلى الآخر ، فاستخدم التحكم في قماش.

Answer 3

لست متأكدًا مما إذا كنت ترغب في وضع شريط التمرير الخاص بـ ScrollViewer على أعلى المحتوى - إذا كان الأمر كذلك ، فاجد 1 ، إذا كنت تريد Scrollviewer Ontop بالكامل من المحتوى ، انظر الإجابة 2.

1) يمكنك تغيير التمثيل المرئي لأي شيء في WPF من خلال تطبيق قالب. تتمثل الحيلة في هذه الحالة في العثور على ماهية التمثيل الحالي لـ ScrollViewer ، ثم إعادة تنفيذ كل الصور نفسها بشكل أساسي لتغيير موضع شريط التمرير كما هو مطلوب. هناك عدة طرق لإيجاد كل الصور للسيطرة - أسهل من عينات WPF MSDN - وبشكل جيد بما فيه الكفاية مثال المقدمة بواسطة Microsoft توضح كيفية تغيير موضع شريط التمرير.

BTW Microsoft تميل إلى تحميل أمثلةها مع الكثير من XAML الإضافية التي لا تحتاجها حقًا - اللعب (قطع الكود بلا رحمة) مع القالب حتى يفعل ما تريده فقط ولا أكثر.

2) إن مقاربي لوضع عرض التمرير في المحتوى ، سيكون استخدام اثنين من المقاطعين الموضوعة على بعضها البعض. "الجزء العلوي" صغير ، شفاف (عتامة = 50) ومقابض التمرير ، الجزء السفلي أكبر ويحتوي على المستند. قم بتوصيل حدث التمرير من Top ScrollViewer بحيث يتم تمرير الحدث السفلي أيضًا.