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;

            }

        }

 

 

Creating Office 2010 style Minimize Ribbon and Help button in WPF Infragistic Grid

Creating Office 2010 style Minimize Ribbon and Help button in WPF Infragistic Grid

Infragistic 12.2 WPF Grid designer not support to add Minimize Ribbon and Help button.

Screen shot of Actual Implementation 

Follow below steps to achieve this in MVVM application

1)      Create a UserControl ‘RibbonControlView’ and add a xamRibbon on that.

2)      In the Ribbon designer IsMinimized property to bind ViewModel object RibbonMinState

<my:XamRibbon Name="xamRibbon" IsMinimized="{Binding RibbonMinState, Mode=TwoWay}">

                    <my:XamRibbon.ApplicationMenu>

3)      Create a RibbonControlViewModel class for this RibbonControlView

4)      Add following properties in the viewmodel

 private bool ribbonMinState;

        public bool RibbonMinState

        {

            get

            {

                return ribbonMinState;

            }

            set

            {

                ribbonMinState = value;

                MinmizeButtonIconchange(value);

                NotifyPropertyChanged("RibbonMinState");

            }

        }

        private string minBtnToolTip;

        public string MinBtnToolTip

        {

            get { return minBtnToolTip; }

            set { minBtnToolTip = value; NotifyPropertyChanged("MinBtnToolTip"); }

        }

        private BitmapImage _minBtnIcon;

        public BitmapImage MinBtnIcon

        {

            get { return _minBtnIcon; }

            set { _minBtnIcon = value; NotifyPropertyChanged("MinBtnIcon"); }

        }

 

        private void MinmizeButtonIconchange(bool flg)

        {

            if (flg)

            {

                MinBtnToolTip = "Expand the Ribbon (Ctrl+F1)";

                MinBtnIcon = new BitmapImage(new Uri(@"/Images/arrowdown.png", UriKind.Relative));

            }

            else

            {

                MinBtnToolTip = "Minimize the Ribbon (Ctrl+F1)";

                MinBtnIcon = new BitmapImage(new Uri(@"/Images/arrowup.png", UriKind.Relative));

            }

        }

5)  Add following method to the RibbonControlView.xaml.cs file

 

public void xamRibbonPostTabButton()

        {

            var context = this.DataContext as RibbonControlViewModel;

            XamRibbon ribbon = this.xamRibbon;

            XamTabControl xtc = Utilities.GetDescendantFromType(ribbon, typeof(XamTabControl), true) as XamTabControl;

            if (null != xtc)

            {

                StackPanel st = new StackPanel();

                st.Orientation = Orientation.Horizontal;

                ButtonTool btnMin = new ButtonTool();

                btnMin.Height = 22;

                btnMin.Width = 22;

                context.RibbonMinState = false;

                Binding BinidngIcon = new Binding("MinBtnIcon");

                BinidngIcon.Source = context;

                btnMin.SetBinding(ButtonTool.SmallImageProperty, BinidngIcon);

 

                Binding BindingIconTooltip = new Binding("MinBtnToolTip");

                BindingIconTooltip.Source = context;

                btnMin.SetBinding(ButtonTool.ToolTipProperty, BindingIconTooltip);

 

                btnMin.Click += new System.Windows.RoutedEventHandler(btnMin_Click);

 

                ButtonTool btnHelp = new ButtonTool();

                btnHelp.Height = 22;

                btnHelp.Width = 22;

                btnHelp.ToolTip = "Help(F1)";

                btnHelp.Command = ApplicationCommands.Help;

                btnHelp.SmallImage = new BitmapImage(new Uri(@"/Images/help.png", UriKind.Relative));

 

                st.Children.Add(btnMin);

                st.Children.Add(btnHelp);

                xtc.PostTabItemContent = st;

 

            }

        }

 

6)  Add the RibbonControlView  user control in a Mainwindow  as follows

 

<Views:RibbonControlView x:Name="ribbonCtrl"/>

 

7)  MainWindow loaded event call the method as follows

this.ribbonCtrl.xamRibbonPostTabButton();

 

 

 

 

Contact me for full working solution and further query