Click here to Skip to main content
15,878,945 members
Articles / Desktop Programming / XAML
Article

Night Vision

Rate me:
Please Sign up or sign in to vote.
3.33/5 (3 votes)
22 Feb 2012CPOL1 min read 20K   3   3
A Window with 80% opacity having a whole at mouse pointer

Introduction

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:

C++
<Window x:Class="MediaAssistant.Controls.NightVision.NightVisionWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Converters="clr-namespace:MediaAssistant.Converters" Title="NightVisionWindow" WindowState="Maximized" 
        Background="Transparent" AllowsTransparency="True" 
        ResizeMode="NoResize"
        WindowStyle="None" 
        ShowInTaskbar="False"
        MouseMove="WindowMouseMove" Topmost="True"
        KeyDown="KeyDownHandler"
        >
  <Window.Resources>
        <Converters:NightOpacityToTextConverter x:Key="NightOpacityToTextConverter" />
  </Window.Resources>
  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="{Binding Y}"/>
            <RowDefinition Height="{Binding WholeHeight}"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{Binding X}"/>
            <ColumnDefinition Width="{Binding WholeWidth}"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <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>
        <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}"/>
    </Grid>
</Window>

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);
     if(IsActive==false)
          Activate();
}  

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

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

License

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


Written By
Software Developer (Senior) KAZ Software Limited
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralNice Pin
HoshiKata25-Feb-14 3:13
HoshiKata25-Feb-14 3:13 
GeneralMy vote of 3 Pin
Edward Keningham10-Aug-12 7:03
Edward Keningham10-Aug-12 7:03 
GeneralMy vote of 3 Pin
Priyank Bolia22-Feb-12 17:20
Priyank Bolia22-Feb-12 17: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.