Caps lock Notification for WPF Login screen

Caps lock Notification for WPF Login screen

To Implement the cap lock notification as per Microsoft look and feel fist need a style define as follows

<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">

            <Setter Property="OverridesDefaultStyle" Value="true"/>

            <Setter Property="HasDropShadow" Value="True"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ToolTip">

                        <Grid Height="126" Width="453">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="81" />

                                <RowDefinition Height="45*" />

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="177*" />

                                <ColumnDefinition Width="72*" />

                                <ColumnDefinition Width="0*" />

                                <ColumnDefinition Width="170*" />

                            </Grid.ColumnDefinitions>

                            <Border Margin="12,32,0,0" BorderThickness="1" BorderBrush="Black"

                                CornerRadius="10,10,10,10" Grid.ColumnSpan="4" HorizontalAlignment="Left" Width="435" Height="82" VerticalAlignment="Top" Grid.RowSpan="2" >

                                <Border.Effect>

                                    <DropShadowEffect  Color="Silver" />

                                </Border.Effect>

                                <Border.Background>

                                    <LinearGradientBrush  EndPoint="0.5,1"   StartPoint="0.5,0">

                                        <GradientStop Color="Ivory"    Offset="0" />

                                        <GradientStop Color="Lavender" Offset="1" />

                                    </LinearGradientBrush>

                                </Border.Background>

                                <Grid Height="76" Name="grid1" Width="441"   >

                                    <Image Height="20"  Width="20"  Margin="6,2,0,0" Name="image1" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Source="../Images/Alert.png" />

                                    <Label Foreground="DarkBlue"  Content="{TemplateBinding Content}"  Height="32" HorizontalAlignment="Left" Margin="26,2,0,0" Name="lblWarningHeader" VerticalAlignment="Top" FontFamily="GothamBook"  FontSize="16" FontWeight="Medium"  />

                                    <TextBlock Foreground="Black" FontFamily="GothamBook" FontSize="12" FontWeight="Medium" VerticalAlignment="Top"

                                               HorizontalAlignment="Left" Margin="32,28,10,0" Name="txbMessage" Width="390">Having Caps Lock on may cause you to enter your password incorrectly.

                                        <LineBreak/> <LineBreak/>Press Caps Lock to turn it off before entering your password.</TextBlock>

                                </Grid>

                            </Border>

                            <Path Data="M10402.99154,55.5381L10.9919,0.64 0.7,54.9" Fill="Ivory"  HorizontalAlignment="Left" Margin="32,3,0,0" Stretch="Fill" Stroke="Black" Width="22" Height="31" VerticalAlignment="Top" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

 

Next step is add the following code in the Login screen class constructor

txtPwd.PreviewKeyDown += new KeyEventHandler(txtPwd_PreviewKeyDown);

            txtPwd.LostKeyboardFocus += new KeyboardFocusChangedEventHandler(txtPwd_LostKeyboardFocus);

            txtPwd.GotKeyboardFocus += new KeyboardFocusChangedEventHandler(txtPwd_GotKeyboardFocus);

            txtPwd.MouseEnter += new MouseEventHandler(txtPwd_MouseEnter);

            tooltip = new ToolTip { Content = "Caps lock is On" };

            tooltip.Name = "passToolTip";

            tooltip.PlacementTarget = txtPwd;

            tooltip.Placement = System.Windows.Controls.Primitives.PlacementMode.Relative ;

            tooltip.HorizontalOffset = txtPwd.HorizontalOffset;

            tooltip.VerticalOffset = txtPwd.VerticalOffset + txtPwd.Height;

            txtPwd.ToolTip = tooltip;

            ToolTipService.SetIsEnabled(txtPwd, false);

            tooltip.IsOpen = false;

 

Define all the events Handler as follows.

void txtPwd_MouseEnter(object sender, MouseEventArgs e)

        {

            ToolTipService.SetIsEnabled(txtPwd, false);

            tooltip.IsOpen = false;

        }

 

        void txtPwd_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)

        {

            capLockCheckandShowToolTip(e.KeyboardDevice);

        }

 

        void txtPwd_PreviewKeyDown(object sender, KeyEventArgs e)

        {

            capLockCheckandShowToolTip(e.KeyboardDevice);

        }

        void txtPwd_LostKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)

        {

            tooltip.IsOpen = false;

        }

 

        private void capLockCheckandShowToolTip(KeyboardDevice kd)

        {

            if (kd.IsKeyToggled(Key.CapsLock))

            {

                ToolTipService.SetIsEnabled(txtPwd, true);

                tooltip.IsOpen = true;

            }

            else

            {

                tooltip.IsOpen = false;

            }

        }