Click here to Skip to main content
13,353,124 members (55,033 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 22 Feb 2012

Night Vision

, 22 Feb 2012
Rate this:
Please Sign up or sign in to vote.
A Window with 80% opacity having a whole at mouse pointer


Most of the time I watch movies from my laptop. But I use my 22 inch LCD monitor, instead of laptop monitor. While I turn off the light the laptop monitor's light disturbs me. I could turn off the laptop monitor. But I need to turn it on if I want to do anything else in my laptop while watching movies. That experience is not good to me. So, I needed something which will reduce the opacity but at the mouse pointer I want a small region which should be transparent and I should be able to work with other application. So, I introduced the Night Vision mode at Media Assistant.

Using the code

To solve my problem at Media Assistant I used a full screen window having grid. I created a 3x3 grid and the center part represents the whole of my window. That means I need to move that with mouse movement.

Here is the XAML I used in the window:

<Window x:Class="MediaAssistant.Controls.NightVision.NightVisionWindow"
        xmlns:Converters="clr-namespace:MediaAssistant.Converters" Title="NightVisionWindow" WindowState="Maximized" 
        Background="Transparent" AllowsTransparency="True" 
        MouseMove="WindowMouseMove" Topmost="True"
        <Converters:NightOpacityToTextConverter x:Key="NightOpacityToTextConverter" />
            <RowDefinition Height="{Binding Y}"/>
            <RowDefinition Height="{Binding WholeHeight}"/>
            <ColumnDefinition Width="{Binding X}"/>
            <ColumnDefinition Width="{Binding WholeWidth}"/>

        <Border Grid.Column="0" Grid.Row="0" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="0" Grid.Row="1" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="0" Grid.Row="2" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="1" Grid.Row="0" Background="Black" Opacity="{Binding NightOpacity}">
            <TextBlock DockPanel.Dock="Top" Text="{Binding NightOpacity, Converter={StaticResource NightOpacityToTextConverter}}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        <Border Grid.Column="1" Grid.Row="1" Background="Transparent" BorderThickness="2" BorderBrush="Black"/>
        <Border Grid.Column="1" Grid.Row="2" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="2" Grid.Row="0" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="2" Grid.Row="1" Background="Black" Opacity="{Binding NightOpacity}"/>
        <Border Grid.Column="2" Grid.Row="2" Background="Black" Opacity="{Binding NightOpacity}"/>

I used the converter to display current opacity which can be controlled by the user. I bind the height and width with the property which I modify with mouse movement. So, the first row and column gets re-sized with mouse movement.

Here is the code to move the whole with mouse movement.

private void WindowMouseMove(object sender, MouseEventArgs e)
     var position = e.GetPosition(this);
     X = Math.Max(position.X - WholeWidth/2, 0);
     Y = Math.Max(position.Y - WholeHeight/2, 0);

I also controlled the opacity and exit behavior with keyboard interaction.

private void KeyDownHandler(object sender, KeyEventArgs e)
    if (e.Key == Key.Escape)
          const double delta = 0.05;
               NightOpacity = Math.Max(0, NightOpacity - delta);
          else if(e.Key==Key.Right)
               NightOpacity = Math.Min(1, NightOpacity + delta);


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

H. S. Masud
Software Developer (Senior) KAZ Software Limited
Bangladesh Bangladesh
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralNice Pin
HoshiKata25-Feb-14 4:13
memberHoshiKata25-Feb-14 4:13 
GeneralMy vote of 3 Pin
Edward Keningham10-Aug-12 8:03
memberEdward Keningham10-Aug-12 8:03 
GeneralMy vote of 3 Pin
Priyank Bolia22-Feb-12 18:20
memberPriyank Bolia22-Feb-12 18:20 
For me the problem statement is little confusing. Also the title does not match, I thought it was about CV.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 22 Feb 2012
Article Copyright 2012 by H. S. Masud
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid