Making an Image SlideShow in WPF: Part III


Introduction

In part II of this article series we have seen to put Next and Previous Buttons and animations related to it. In this article we will see about the Window Transperency and FullScreen View.

To make a Window fullscreen we need a basic property and that is WindowState, we need to set it to Maximized.

image1.gif

Now to make the Window Transparent we need the Property AllowTransperency. We need to set it to True.

image2.gif

If we don't have any Background Color then the whole screen will be Transparent and you wouldn't know whether your application is running or not. It's preferred that we should have a Backgrond with required Opacity. Then AllowTransperency property would give you a better effect.

Such as I have used:

image3.gif

Now we would have a close button to come out of the page, otherwise there is no way we can get back to our main application.

In AllowTransperency as True mode the Titlebar as well as the Control Box is hidden and the window is treated as TopMost window.

So let's put a Button on the right top, where usual close Button resides.

image4.gif

The Button will look like as follows:

image5.gif

Now we will have the preview for the Image that we mouse hover in the ListBox.

Initailly I was using another Image to display it, but I thought if we have a Tooltip Property then why am I using another Image for Preview.

So I customized the ToolTip.

A Tooltip comes with the following basic properties enabled by default.

- BorderBrush
- Background
- Effect

The effect is always DropShadow.

Now designing a Custom Tooltip. It's normal design as other control but here's the trick. Design the panel in any other pages such as it's Width and Height Property could be easily be designed.

The following outline is for the Hierarchical structure of the Tooltip.

image6.gif

Now in XAML it looks like the following:

image7.gif

Now we will put it inside the Image as Tooltip.

image8.gif

As discussed previously I have used the following properties as Null to make the Tooltip.

image9.gif

image10.gif

And

In Tooltip we can disable the DropShadow effect by using the below Property:

We need to have our Tooltip Placed on top of the Image we mouse hover, so that it would look like we are previewing it.

We have use the following property of ToolTip in Image itself.

image11.gif

Remember that we have to use it in Image Control which is having the Tooltip.

image12.gif

In next part we will see how we can loop through the Image Collection.