Video Preview in Control Tooltip in WPF

Introduction:

In this article I will show you how you can show movie clip when popping up tool tip. You can use this when creating explorer kind of UI and want to preview movies inside it or media player which shows movie preview when mouse hover is there.

Technology:

 .net framework 4.0 WPF

 Implementation:

First of all let me show you what we are trying to build as sample.

Let's start with creating a new C# WPF Application from 

File >>New project>>Visual C# >>Windows>>WPF Application 

We want to display tool tip of the button control when user mouse hover the button the movie preview should be displayed as shown in the picture WPF allow us to nesting the controls that is advantage. 

Drag drop one button control from the tool box set its properties like below

<Button Content="Movie Preview" Height="23" HorizontalAlignment="Left" Margin="27,12,0,0" Name="button1" VerticalAlignment="Top" Width="101" >
</Button>

Now we want to show tool tip for that we need to Set button's ToolTip property like below by mentioning the <Button.ToolTip> tag inside the Button Tag so our modified button code will look like below.

<Button Content="Movie Preview" Height="23" HorizontalAlignment="Left" Margin="27,12,0,0" Name="button1" VerticalAlignment="Top" Width="101" Click="button1_Click" >
 <Button.ToolTip>
 </Button.ToolTip>
</Button>

Now take one stack panel and inside it we have defined one border element that will provide border to our Media Element in which we are going to show the preview video. So modified final code of the button will look like

<Button Content="Movie Preview" Height="23" HorizontalAlignment="Left" Margin="27,12,0,0" Name="button1" VerticalAlignment="Top" Width="101" >

            <Button.ToolTip>

                <StackPanel>

                <Border Height="250" Width="250" Background="Transparent" BorderBrush="OrangeRed" BorderThickness="5,5,10,10" CornerRadius="10,100,10,100" >

                   <MediaElement Source="C:\Users\Kirtan\Pictures\2010-05-15 25rtan\25rtan 005.MOV" Volume="0" Margin="10"/>

                   </Border>

                </StackPanel>

            </Button.ToolTip>

</Button>

Here we have used two element Border and the Media element media element is used to show movie so we have to set its properties like source defines what movie it will show volume defines sound volume. We have defined MediaElement inside the border element so that border will be shown outside of the media element as shown in screen shot ..

We have achieved the leaf like of shape by setting border Corner radius property :)

Thats it what  the project and it does what i have told .

Note :

In sample project attached I have not provided the movie because of very huge size of movie. Use any movie path in source property of the mediaelement from your computer to run the project correctly.