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.