أبحث عن أسلوب Scrollviewer الجيد في XAML WINRT

Question

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

Answer 1

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

للتأكد من أننا نشير إلى نفس الشيء:

• شريط تمرير الماوس التقليدي
• مؤشر بالغسل

افتراضيًا، يعرض ScrollViewer مؤشر التحريك عندما يقوم المستخدم بإجراء إيماءة لمس على ScrollViewer، ويعرض شريط التمرير التقليدي للماوس عندما يقوم المستخدم بتحريك الماوس فوق ScrollViewer أو النقر على ScrollBars/Thumbs.

لجعل ScrollViewer يعرض مؤشرات التحريك لإدخال الماوس، يتعين عليك تنفيذ الخطوات التالية:

1. افتح مشروعك في Expression Blend.انقر بزر الماوس الأيمن على ScrollViewer وحدد "تحرير القالب > تحرير نسخة...".
2. ابحث في قالب ScrollViewer وابحث عن شريط التمرير العمودي.انقر بزر الماوس الأيمن فوق شريط التمرير وحدد "تحرير القالب > تحرير نسخة...".
3. افتح صفحة XAML حيث تم إنشاء القوالب الجديدة، إما في Blend أو VS.ابحث عن قالب ScrollBar الذي قمت بإنشائه.بداخله تجد هذا السطر: <VisualStateGroup x:Name="ScrollingIndicatorStates">.

4. داخل VisualStateGroup "ScrollingIndicatorStates"، انسخ الكود الموجود داخل VisualState "TouchIndicator":

   <Storyboard>
       <FadeInThemeAnimation TargetName="HorizontalPanningRoot"/>
       <FadeInThemeAnimation TargetName="VerticalPanningRoot"/>
       <FadeOutThemeAnimation TargetName="HorizontalRoot"/>
       <FadeOutThemeAnimation TargetName="VerticalRoot"/>
       <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalRoot">
           <DiscreteObjectKeyFrame KeyTime="0">
               <DiscreteObjectKeyFrame.Value>
                   <Visibility>Collapsed</Visibility>
               </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalRoot">
           <DiscreteObjectKeyFrame KeyTime="0">
               <DiscreteObjectKeyFrame.Value>
                   <Visibility>Collapsed</Visibility>
               </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
       </ObjectAnimationUsingKeyFrames>
   </Storyboard>
   

5. الصق هذا الرمز في نص الحالة المرئية "MouseIndicator"، مع الكتابة فوق ما هو موجود بالفعل.

6. أيضًا، إذا قمت بإظهار شريط التمرير الأفقي أيضًا، فتأكد من تحديث شريط التمرير الأفقي في قالب ScrollViewer المعدل لاستخدام قالب ScrollBar الذي قمت بإنشائه.

لذا، بشكل عام بسيط جدًا.كان علينا فقط نسخ الرسوم المتحركة من حالة "TouchIndicator" ولصقها في حالة "MouseIndicator".مثال الكود الكامل هنا:https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/ScrollViewer_PanningIndicatorsOnly