Saturday, May 17, 2014

Contextual Menu On Mouse Hover  in WPF 
From Wikipedia  

context menu (also called contextualshortcut, and popup or pop-up menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. Usually the available choices are actions related to the selected object
The purpose of this post is to show  how you  can create a modern contextual Menu that can enhance  user experience.  



Xaml Code:   

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="525"
        Height="350">
    <Grid>
        <Grid.Resources>
            <Style x:Key="btnWithoutBrd" TargetType="Button">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <StackPanel Name="stckPanel" Background="{TemplateBinding Background}">
                                <Grid>
                                    <ContentPresenter Name="fstImage"
                                                      Width="12"
                                                      Height="12"
                                                      HorizontalAlignment="Center"
                                                      VerticalAlignment="Center" />
                                </Grid>
                            </StackPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="fstImage" Property="Width" Value="16" />
                                    <Setter TargetName="fstImage" Property="Height" Value="16" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <DockPanel Name="dkpMain"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch">
            <ListBox Name="lbxNewEntries"
                     HorizontalAlignment="Stretch"
                     HorizontalContentAlignment="Stretch"
                     Background="Transparent"
                     BorderBrush="LightGray"
                     BorderThickness="1"
                     ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border Name="mainBrdItem"
                                Margin="0"
                                BorderBrush="LightGray"
                                BorderThickness="0,0,0,1"
                                Padding="1">
                            <Border Name="brdSelectedItem"
                                    Margin="2"
                                    BorderBrush="LightGray"
                                    BorderThickness="0"
                                    CornerRadius="2"
                                    Padding="1">

                                <Grid>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <Grid Grid.Row="1"
                                          Grid.Column="0"
                                          Grid.ColumnSpan="4"
                                          DataContext="{Binding}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="30" />
                                            <ColumnDefinition Width="30" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Name="tbkDescr"
                                                   Grid.Column="0"
                                                   Cursor="Hand"
                                                   FontFamily="Calibri"
                                                   FontSize="12"
                                                   FontWeight="Bold"
                                                   Foreground="#FF5681C4"
                                                   Text="{Binding Path=Name}" />
                                        <Button Name="btnMoreDetails"
                                                Grid.Row="0"
                                                Grid.Column="1"
                                                Margin="0,2,0,0"
                                                Click="BtnMoreDetails_OnClick"
                                                DockPanel.Dock="Right"
                                                Style="{StaticResource btnWithoutBrd}"
                                                Tag="{Binding Path=Description}"
                                                Visibility="Hidden">
                                            <Button.Content>
                                                <Image Source="images/more.png" Stretch="Fill" />
                                            </Button.Content>
                                        </Button>
                                        <Button Name="btnEdit"
                                                Grid.Row="0"
                                                Grid.Column="2"
                                                Margin="0,2,0,0"
                                                Click="BtnMoreDetails_OnClick"
                                                DockPanel.Dock="Right"
                                                Style="{StaticResource btnWithoutBrd}"
                                                Tag="{Binding Path=Description}"
                                                Visibility="Hidden">
                                            <Button.Content>
                                                <Image Source="images/edit.png" Stretch="Fill" />
                                            </Button.Content>
                                        </Button>
                                    </Grid>

                                </Grid>
                            </Border>
                        </Border>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
                                <Setter TargetName="brdSelectedItem" Property="Background" Value="#60A3C1F4" />
                                <Setter TargetName="brdSelectedItem" Property="BorderThickness" Value="1" />
                                <Setter TargetName="btnMoreDetails" Property="Visibility" Value="Visible" />
                                <Setter TargetName="btnEdit" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsMouseOver}" Value="True">
                                <Setter TargetName="brdSelectedItem" Property="Background" Value="#AADDDDDD" />
                                <Setter TargetName="btnMoreDetails" Property="Visibility" Value="Visible" />
                                <Setter TargetName="btnEdit" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.Resources>
                    <!--  Style used if item is selected and listbox has keyboard focus  -->
                    <Style x:Key="NoFocusVisualStyle" TargetType="Control">
                        <Setter Property="BorderBrush" Value="Transparent" />
                    </Style>
                    <!--  Apply this style  -->
                    <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource NoFocusVisualStyle}" />
                    </Style>
                    <!--  Color used if item is selected and listbox has focus  -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
                    <!--  Color used if item is selected and listbox does not have focus  -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
                    <!--  Font color used if item is selected and listbox has focus  -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
                </ListBox.Resources>
            </ListBox>
        </DockPanel>
    </Grid>
</Window>
Code  .CS 
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        //just  for a demo purpose Mvvm created like this 
        public ObservableCollection<Article>  Mvvm = new ObservableCollection<Article>();
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = Mvvm;  
            for (int i = 0; i < 10; i++)
            {
                Mvvm.Add(new Article() { Name = "Article  number" + i, Description = "Lorem ipsum dolor sit amet :) for article " + i });
            }
        }
        private void BtnMoreDetails_OnClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(((sender) as Button).Tag.ToString());  
        }
    }

    public class Article : INotifyPropertyChanged
    {
        public string Name
        {
            get { return _name; }
            set
            {
                if (_name!=value)
                {
                    _name = value;  
                    OnPropertyChanged("Name");
                }
            }
        }
        public string Description
        {
            get { return _descr;  }
            set
            {
                if (_descr!=value)
                {
                    _descr = value; 
                    OnPropertyChanged("Description");
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string prop)
        {
            if (PropertyChanged!=null)
            {
               PropertyChanged(this,new PropertyChangedEventArgs(prop));
            }
        }
        private string _name;
private  string _descr;  
    }
}



Saturday, January 18, 2014

Multithreading, Multitasking and Asynchronous processes



A task is one complete program so multi-tasking means the execution of two or more programs at the same time for example google chrome  uses multi-tasking  when there are many  open tabs even there are in  the some window. 
On the other hand, there can be several threads in one program. For instance, a video clip can have separate threads for video and audio. Multi-threading depends on the ability of the processor.
for the the Asynchronous  
When performing an asynchronous operation, you execute it using other threads.  
So to resume a task uses a thread to perform operation  
and  asynchronous operation uses a thread to perform an execution 
   Thread definition from Wikipedia 
              a thread of execution is the smallest sequence of programmed instructions that can be managed independently by an operating system scheduler 

Sunday, December 8, 2013

“N-tiers” Application
What is meant by “N-tiers”

The N in “n tiers” refers to the number of tiers. A very common value for “N” is 3 (in  figure 1) comprised of three tiers of user interface or presentation, business logic and data access logic when applications behavior is split among multiple tiers these tiers are said to be logically separated. In some cases the separate tiers are physically deployed to different devices or process boundaries on the same device in which case there is physically separated as well. Is not required for separate layers to be deployed separately but they may be, likewise it’s not required that the separate layers be developed independently of one another this approach means it's possible for this to take place in this way you can allow for larger teams to work together concurrently or to have multiple teams working on separate parts of large application.

Generally tiers and layers are used interchangeably from one another however, sometimes use one has a more specific meaning in the case of layers often used to apply specifically to a logical structure of the application, likewise the tiers of an application frequently are used to refer to just the physical structure of the system architecture or infrastructure. In many cases you can refer to an application as N-tier application even if it is only deployed to a single machine and it’s also not uncommon to talk about the different layers of an application when in fact these layers are deployed to different physical tiers.
Logical vs. Physical separation

 The logical separation of concerns is expressed in the source code of the application the code organization and design should reflect the layers that are in use at a minimum individual classes should not include responsibilities that correspond to separate layers and typically each layer will have its own namespace assembly and project in the solution. The logical separation of an application across layer boundaries represents a software design patterns. The physical separation of the application generally refers how it’s deployed. It’s possible  to have logically separated applications  that is physically deployed to a single location, for instance web application with separate assemblies for business logic and data access all  of which deployed of the same “/bin ” folder on a single Web server. However it’s possible to separate these assemblies and deploy them to different physical locations whether on a single device or on separate machines the physical separation of the application across process boundaries and/or devices represents software architecture decisions. Generally the physical separation and the logical separation are described together. In other words you should have a logical separation in your software if you are foreseeing the need to have physical separation in your deployment.


Common mistakes to avoid when designing n-tiers applications

      1.     Tight coupling
Designing your applications in tightly coupled way with in mind that will not evolve.
      2.     Assuming Static Requirements 
Making an assumption that requirements will remain static especially when considering the client as trusted and the mid-tier service assumes the client will be implemented using a particular technology. 
      3.     Mishandled Concurrency
Designing your applications with optimistic concurrency as a choice
      4.     Stateful services 
Keeping context around across multiple service calls.
      5.     Two Tiers Pretending to be Three
 Trying to expose the database directly to the client without  the  mid-tier 
       6.     Undervaluing simplicity 

How to create the most carefully, multi-tier fully separated, re-validating, super design that you come up with. This latest mistake will take you away from the most important goal which is delivering value to your users.  All what you  need is to fix  your goals  and consider whether you are going to need n-tier requires, in other words apply the KISS principle  will always be great thing.

Saturday, November 2, 2013

Why should you not use Entity Framework or an ORM?

Entity Framework is it's not a panacea nor is appropriate for every kind of application even an application that heavily uses data just because it's relatively shiny and new and heap doesn't mean you should carefully think about how and whether to fit into the architecture of an application.

·         Isn’t appropriate for every kind of application. EF heavily uses  reflection  and hurts performance. For this  point there are many lightweight  ORM's  that  can be used  as an alternative  such as Dapper.

·       EF doesn't do bulk inserts. It's usually better to use the databases support for this kind of large fast data imports instead or even use some of the native .net features for the task.