ما هي أفضل طريقة لعرض مقطع فيديو بزوايا مستديرة في Silverlight؟

Question

لا يدعم MediaElement الزوايا الدائرية (radiusx، radiusy).هل يجب علي استخدام VideoBrush على مستطيل بزوايا مستديرة؟

Answer 1

نعم - بطريقة ما أنت تسأل وتجيب على السؤال بنفسك...لكن هذا هو أحد الخيارين اللذين يمكنني التفكير فيهما.الأسباب التي قد تكون مشكلة هي أنك تفقد بعض الميزات/عناصر التحكم التي تحصل عليها من عنصر تحكم MediaElement.خيار آخر هو القيام بذلك:

1. أضف MediaElement الخاص بك إلى صفحتك.
2. ارسم مستطيلاً فوقه وحدد نصف قطر الزاوية المطلوبة
3. انقر بزر الماوس الأيمن على المستطيل في Blend واختر "إنشاء مسار القطع"
4. قم بتطبيق مسار القطع على MediaElement الخاص بك

بهذه الطريقة، ستظل تستخدم عنصر تحكم MediaElement، ولكن يمكنك "قص" ما تريده للحصول على التأثير الدائري المطلوب.

يوضح هذا المثال MediaElement الذي تم قصه.أعلم أنه ليس من السهل تصور مسار المتجه، ولكن إذا قمت بفتحه في Blend، فسوف ترى MediaElement مستديرًا.

<MediaElement 
        Height="132" Width="176" Source="Egypt2007.wmv" 
        Clip="M0.5,24.5 C0.5,11.245166 11.245166,0.5 24.5,0.5 L151.5,0.5
              C164.75484,0.5 175.5,11.245166 175.5,24.5 L175.5,107.5 C175.5,
              120.75484 164.75484,131.5 151.5,131.5 L24.5,131.5 C11.245166,
              131.5 0.5,120.75484 0.5,107.5 z"/>

Answer 2

لا يفقدك استخدام مستطيل مستدير الزوايا وVideoBrush أي ميزات/تحكم في استخدام MediaElement المعروض - نظرًا لأن العنصر يجب أن يكون في Xaml على أي حال، يمكنك التحكم فيه باستخدام طرق التشغيل/الإيقاف المؤقت/الإيقاف المعتادة، فيما عدا أن يحدث التشغيل في المستطيل الخاص بك.يعد استخدام منطقة المقطع أمرًا غير عملي بعض الشيء لأنه من الصعب تغيير حجم المنطقة.المستطيل أفضل لأنه يتمتع بمرونة في التخطيط.

<MediaElement x:Name="myElement" Source="clip.wmv" Visibility="Collapsed"/>
<Rectangle RadiusX="10" RadiusY="10" Width="640" Height="480">
    <Rectangle.Fill>
        <VideoBrush Source="myElement" Stretch="Uniform"/>
    </Rectangle.Fill>
<Rectangle/>

Answer 3

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

Answer 4

جرب هذا

 <Border CornerRadius="8"  BorderBrush="Black" Background="Black" BorderThickness="3">
 <MediaElement   HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="Fill" x:Name="Player" Source="/Assets/Videos/x.mp3" />
 </Border>