Wie kann ich ein Video mit abgerundeten Ecken in Silverlight am besten darstellen?

Question

Das MediaElement unterstützt keine abgerundeten Ecken (radiusx, radiusy). Sollte ich einen VideoBrush für ein Rechteck mit abgerundeten Ecken verwenden?

Answer 1

Ja - In gewisser Weise stellen und beantworten Sie die Frage selbst... Aber das ist eine der beiden Möglichkeiten, die ich mir vorstellen kann. Die Gründe, die ein Problem sein könnte, ist, dass Sie einige der Funktionen/Steuerung, die Sie aus dem MediaElement-Steuerelement erhalten verlieren. Eine andere Möglichkeit ist, dies zu tun:

1. Fügen Sie Ihr MediaElement zu Ihrer Seite hinzu.
2. Zeichnen Sie ein Rechteck darüber und legen Sie den gewünschten Eckenradius fest
3. Klicken Sie mit der rechten Maustaste auf das Rechteck in Blend und wählen Sie "Beschneidungspfad erstellen".
4. Wenden Sie den Beschneidungspfad auf Ihr MediaElement an

Auf diese Weise verwenden Sie zwar immer noch ein MediaElement-Steuerelement, aber Sie können alles wegschneiden, was Sie wollen, um den gewünschten abgerundeten Effekt zu erzielen.

Dieses Beispiel zeigt ein beschnittenes MediaElement. Ich weiß, es ist nicht einfach, sich den Vektorpfad vorzustellen, aber wenn Sie es in Blend öffnen, sehen Sie ein abgerundetes 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

Mit einem abgerundeten Rechteck und einem VideoBrush verlieren Sie keine Funktionen/Kontrolle über die Verwendung eines angezeigten MediaElement - da das Element in der Xaml sowieso sein muss, können Sie es mit den üblichen Play/Pause/Stop-Methoden steuern, außer dass die Wiedergabe in Ihrem Rechteck geschieht. Die Verwendung einer Clip-Region ist etwas umständlich, weil es schwieriger ist, die Größe der Region zu ändern. Ein Rechteck ist besser, weil Sie das Layout flexibel gestalten können.

<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

Mit dem Clip-Pfad erhalten Sie "harte" Kanten - Sie könnten auch eine OpacityMask verwenden (obwohl ich mir vorstellen kann, dass dies viel mehr Rechenleistung erfordert).

Answer 4

Versuchen Sie dies

 <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>