locked
How to bind to video height and width RRS feed

  • Question

  • Is there a sollution for binding an Border to an mediaelement. (like video).

    I just want to have an nice border without any paddings around the movie. And without having to stretch the mediaelement.
    I tried to Bind the Border-Width to Mediaelement-Width, but this doesnt work because the mediaelement doesnt bind his height and width to theplaying video.

    Can someone give me a hint how to slove this with (for example) the following code:


                   <Border BorderBrush="Black" BorderThickness="4" >
                        <MediaElement x:Name="player" />
                    </Border>
    Thursday, April 23, 2009 10:26 AM

Answers

  • You could use Adorner to change the appearance of the MediaElement.

    Below is a simple demo example, hop it helps.

    XAML
    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Loaded="Window_Loaded"
        Title="Window1" Height="300" Width="300">
        <Canvas Name="Mycanvas">
        </Canvas>
    </Window>
    

    C#
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Media;
    using System.Collections;
    namespace WpfApplication1
    {
        /// <summary>
        /// Interaction logic for Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
            private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(Mycanvas);
                MediaElement element = new MediaElement();
                element.Width = 200;
                element.Height = 150;
                element.Source = new Uri("c:\\1.wmv", UriKind.Absolute);
                element.LoadedBehavior = MediaState.Manual;
                element.Play();
                adornerLayer.Add(new UIElementAdorner(element, Mycanvas));
                Canvas.SetTop(element, 120);
                Canvas.SetLeft(element, 120);
            }
        }
        public class UIElementAdorner : Adorner
        {
            private UIElement child;
            public UIElementAdorner(UIElement element, UIElement adornedElement)
                : base(adornedElement)
            {
                this.child = element;
                base.AddLogicalChild(element);
                base.AddVisualChild(element);
            }
            protected override Size MeasureOverride(Size constraint)
            {
                this.child.Measure(constraint);
                return child.DesiredSize;
            }
            protected override Size ArrangeOverride(Size finalSize)
            {
                this.child.Arrange(new Rect(finalSize));
                return finalSize;
            }
            protected override Int32 VisualChildrenCount
            {
                get { return 1; }
            }
            protected override Visual GetVisualChild(Int32 index)
            {
                return this.child;
            }
            protected override IEnumerator LogicalChildren
            {
                get
                {
                    ArrayList list = new ArrayList();
                    list.Add(this.child);
                    return (IEnumerator)list.GetEnumerator();
                }
            }
            protected override void OnRender(DrawingContext drawingContext)
            {
                Rect adornedElementRect = new Rect(this.child.DesiredSize);
                //adornedElementRect.Scale(1.05, 1.05);
                // Some arbitrary drawing implements.
                SolidColorBrush renderBrush = new SolidColorBrush(Colors.Green);
                renderBrush.Opacity = 0.5;
                Pen renderPen = new Pen(new SolidColorBrush(Colors.Navy), 1.5);
                double renderRadius = 5.0;
                // Draw a circle at each corner.
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius, renderRadius); 
            }
        }
    }
    

    • Proposed as answer by Tao Liang Monday, April 27, 2009 2:42 AM
    • Marked as answer by Tao Liang Thursday, April 30, 2009 3:44 AM
    Monday, April 27, 2009 2:41 AM

All replies

  • You could use Adorner to change the appearance of the MediaElement.

    Below is a simple demo example, hop it helps.

    XAML
    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Loaded="Window_Loaded"
        Title="Window1" Height="300" Width="300">
        <Canvas Name="Mycanvas">
        </Canvas>
    </Window>
    

    C#
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Media;
    using System.Collections;
    namespace WpfApplication1
    {
        /// <summary>
        /// Interaction logic for Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
            private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(Mycanvas);
                MediaElement element = new MediaElement();
                element.Width = 200;
                element.Height = 150;
                element.Source = new Uri("c:\\1.wmv", UriKind.Absolute);
                element.LoadedBehavior = MediaState.Manual;
                element.Play();
                adornerLayer.Add(new UIElementAdorner(element, Mycanvas));
                Canvas.SetTop(element, 120);
                Canvas.SetLeft(element, 120);
            }
        }
        public class UIElementAdorner : Adorner
        {
            private UIElement child;
            public UIElementAdorner(UIElement element, UIElement adornedElement)
                : base(adornedElement)
            {
                this.child = element;
                base.AddLogicalChild(element);
                base.AddVisualChild(element);
            }
            protected override Size MeasureOverride(Size constraint)
            {
                this.child.Measure(constraint);
                return child.DesiredSize;
            }
            protected override Size ArrangeOverride(Size finalSize)
            {
                this.child.Arrange(new Rect(finalSize));
                return finalSize;
            }
            protected override Int32 VisualChildrenCount
            {
                get { return 1; }
            }
            protected override Visual GetVisualChild(Int32 index)
            {
                return this.child;
            }
            protected override IEnumerator LogicalChildren
            {
                get
                {
                    ArrayList list = new ArrayList();
                    list.Add(this.child);
                    return (IEnumerator)list.GetEnumerator();
                }
            }
            protected override void OnRender(DrawingContext drawingContext)
            {
                Rect adornedElementRect = new Rect(this.child.DesiredSize);
                //adornedElementRect.Scale(1.05, 1.05);
                // Some arbitrary drawing implements.
                SolidColorBrush renderBrush = new SolidColorBrush(Colors.Green);
                renderBrush.Opacity = 0.5;
                Pen renderPen = new Pen(new SolidColorBrush(Colors.Navy), 1.5);
                double renderRadius = 5.0;
                // Draw a circle at each corner.
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius);
                drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius, renderRadius); 
            }
        }
    }
    

    • Proposed as answer by Tao Liang Monday, April 27, 2009 2:42 AM
    • Marked as answer by Tao Liang Thursday, April 30, 2009 3:44 AM
    Monday, April 27, 2009 2:41 AM
  • Tnx,

    But after this i cant reach the storyboard anymore in the Mediaelement. (to pause, resume movie)

    I can register it in the parent, but when i try to Pauseor Resume storyboard it cant find it.

    my register setting:
    Mycanvas.RegisterName(element.Name, element);
    
    then fault with:
    storyBoard.Begin(element, true);


    - And when i just make the element the child of Mycanvas like

    Mycanvas.Child = element;
    Mycanvas.RegisterName(element.Name, element);
    
    storyBoard.Begin(element, true);
    


    Then it works fine, but without the Adorner.

    Any tips?



    Monday, April 27, 2009 8:11 AM
  • Tnx,

    But after this i cant reach the storyboard anymore in the Mediaelement. (to pause, resume movie)

    I can register it in the parent, but when i try to Pauseor Resume storyboard it cant find it.

    my register setting:
    Mycanvas.RegisterName(element.Name, element);

    then fault with:
    storyBoard.Begin(element, true );


    - And when i just make the element the child of Mycanvas like

    Mycanvas.Child = element;
    Mycanvas.RegisterName(element.Name, element);

    storyBoard.Begin(element, true );


    Then it works fine, but without the Adorner.

    Any tips?



    Why you cannot find the MediaElement?
    Monday, April 27, 2009 9:08 AM
  • I get error: 'player' name cannot be found in the name scope of 'System.Windows.Controls.MediaElement'.

    PS: player is the name for the element!

    When i look who the parent is of ''player' it looks like it is 'adornerLayer'.
    But when i look at the parent of 'adornerLayer' it is NULL.

    Maybe it has something to do with layers, that i cant register him like:
    Mycanvas.RegisterName(element.Name, element);
    or in my case:
    player=new MediaElement();
    player.Name =
    "player";
    AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(mediaElementBorder);
    adornerLayer.Add(new UIElementAdorner(player, mediaElementBorder));
    mediaElementBorder.RegisterName(player.Name, player);

    STRANGE: when i register like above i dont get any error, so he can fond the element player.

    But when i try to reach it with:
    storyBoard.Begin(player , true);

     


    PS: it all works fine when i dont use the adornerLayer, but put the player (mediaelement) as child of 'mediaElementBorder'

    Monday, April 27, 2009 10:24 AM
  • Yes this is a design feature.

    As you see, if you put some UI element in XAML, the element will be registered into namescope automatically.

    But if the element is created in the code behind, you have to register the element manually.
    Wednesday, April 29, 2009 2:11 AM
  • Yes, that sounds good. But i have a problem with that

    When i register the Mediaelement in a Border it works fine!

    But when i put it in a AdornerLayer like this:
    AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(mediaElementBorder);
    adornerLayer.Add(new UIElementAdorner(player, mediaElementBorder));

    Then i can register the player again, but it cant be found with methods luike storyboard.Begin(player)

    Any known issue this?
    Wednesday, April 29, 2009 6:56 AM
  • Or send the full version of your project to my email:
    liangtom@gmail.com

    I can not repeat the issue you met.
    Wednesday, April 29, 2009 8:33 AM