Tag Archives: WPF

XAML Peak new feature in Visual Studio 2015


The latest version of the Visual Studio 2015 is bringing a lot of new features for WPF and XAML programming language. For this blog post I would like to share the XAML Peak Definition. Peak Definition is not new, the current version of Visual Studio 2013 supports peak definition only for C# and VB. Now we have the same functionality within XAML. Event more, in the Visual Studio 2015 peak definition is working in mixed mode, so you can reach any definition regladless of the programming languges (C#, VB or XAML).

XAML peak allows you to get definition or content of any name defined in the XAML code. For example lets see the following XAML code. Right click on the MainWindow class and choose “Peak Definition”:

peakxamlsl1

After the command is selected, the new inline window appears within xaml, and the user can easily see or change the code behind selected definition. Peak Definition works for any proper name in the XAML.

peakxamlsl2

Lets see more interesting thing. Peak Definition is very handy when you want to see or modify the defined style or control template. For Example if we right click on the Style defined resource and choose Peak Definition like the following picture:

peakxamlsl31

Inline window will appears and show the style implementation of the selected xaml element. This is very useful and long waited option of XAML editor:

 

peakxamlsl4

Inline windows are edited windows so you can edit or add new code without leaving xaml editor.

This is one of the plenty of the new features coming with the latest version of the Visual Studio 2015. More features in the coming post.

 

 

 

Advertisements

How to extract default file icon in WPF application


documentIconsDemosl1

In Windows every file has default icon, and it is shown in Windows Explorer while browsing files on disk. If you want to grab this icon in WPF application there are several ways. One of the solution is by using ExtractAssociatedIcon from Icon class located in System.Drawing namespace.

The following code shows how to extract default icon from the file specified by file name:

var sysicon = System.Drawing.Icon.ExtractAssociatedIcon(filePath);
var bmpSrc = System.Windows.Interop.Imaging.CreateBitmapSourceFromHIcon(
            sysicon.Handle,
            System.Windows.Int32Rect.Empty,
            System.Windows.Media.Imaging.BitmapSizeOptions.FromEmptyOptions());
sysicon.Dispose();

Explanation of the code above is straightforward.First we need file path, then we need to call Icon.ExtractAssociatedIcon(filePath) to get Icon object. From the icon object we can create BitmapSource which can be show everywhere in the WPF application.

 

Complete source code demo can be found here.

Drag and Drop Item Outside WPF Application


In WFP applications drag and drop functionality is provided by subscribing several events. First of all you need LeftMouseButtonClick and MouseMove events in order to start Drag and Drop.

This is accomplished by the following code:

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this._startPoint = e.GetPosition(null);
}

private void Window_MouseMove(object sender, MouseEventArgs e)
{
    //drag is heppen
    //Prepare for Drag and Drop
    Point mpos = e.GetPosition(null);
    Vector diff = this._startPoint - mpos;

    if (e.LeftButton == MouseButtonState.Pressed &&
        (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
        Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
    {

        //hooking on Mouse Up
        InterceptMouse.m_hookID = InterceptMouse.SetHook(InterceptMouse.m_proc);

        //ataching the event for hadling drop
        this.QueryContinueDrag += queryhandler;
        //begin drag and drop
        DataObject dataObj = new DataObject(this.text1);
        DragDrop.DoDragDrop(this.text1, dataObj, DragDropEffects.Move);

    }
}

As we can see from the code above, first with LeftMouseButtonClick event, we captured the starting point, then by MouseMove event, calculated distance between starting point and the current mouse position. If the distance is big enough we start DragDrop.

When the Drag starts it is necessary to prepare Drag functionality by providing the object to be dragged. In our case (code sample above) we are going to drag TextBox. In order to drag TextBox first we create DragData object by specifying TextBox object in the Constructor, and call DragDrop static method by passing objects we mentioned.
Beside preparing data to be dragged, we need to subscribe to QueryContinueDrag event in order to track dragging status.

This is all we need to prepare Drag and Drop in our application. If we want to drag object out of WPF aplication, we have no enough information to accomplish drop. As soon as the mouse is outside the app, mousemove event is not firing any more. One of the solution of the problem could be capturing the mouse move position outside the WFP application, and when the left mouse button is up, start with dropping item functionality.

In order to track mouse position outside the WPF application we need to hook and subscribe to the messages of whole Windows OS and filter only we are interesting in. Great blog post about how to capture  mouse messages regardless of the  mouse position can be found here.

Implementation of Low Level Mouse Hook in C# blog post can be modified quickly in order to adopt to our case.

First we need a property to indicate when the mouse is outside the application.

public static bool IsMouseOutsideApp 
{
    get;
    set;
}

Then we need to modify HookCallback method so that when the Left mouse button is up, and set the property (IsMouseOutsideApp ) to true if the mouse outside the application.

internal static IntPtr HookCallback( int nCode, IntPtr wParam, IntPtr lParam)
{
    if (nCode >= 0 && MouseMessages.WM_LBUTTONUP == (MouseMessages)wParam)
    {
        MSLLHOOKSTRUCT hookStruct = (MSLLHOOKSTRUCT)Marshal.PtrToStructure(lParam, typeof(MSLLHOOKSTRUCT));

        //check if POint in main window
        Point pt = new Point(hookStruct.pt.x, hookStruct.pt.y);
        var ptw = App.Current.MainWindow.PointFromScreen(pt);
        var w = App.Current.MainWindow.Width;
        var h = App.Current.MainWindow.Height;
        //if point is outside MainWindow
        if (ptw.X < 0 || ptw.Y < 0 || ptw.X > w || ptw.Y > h)
            IsMouseOutsideApp = true;
        else
            IsMouseOutsideApp = false;
    }
    return CallNextHookEx(m_hookID, nCode, wParam, lParam);
}

The Last thing we need to implement is DragSourceQueryContinueDrag event. The implementation is straightforward:
1. check the keystate value None – this is the case when the mouse is released.
2. unhook from the mouse intercepting messages
3. show the message text based on the result of drag and dropping.

 
/// <summary>
/// Continuosly tracking Dragging mouse position
/// </summary>
/// 
/// 
private void DragSourceQueryContinueDrag(object sender, QueryContinueDragEventArgs e)
{
    //when keystate is non, draop is heppen
    if (e.KeyStates == DragDropKeyStates.None)
    {
        //unsubscribe event
        this.QueryContinueDrag -= queryhandler;
        e.Handled = true;
        //Unhooking on Mouse Up
        InterceptMouse.UnhookWindowsHookEx(InterceptMouse.m_hookID);

        //notifiy user about drop result
        Task.Run(
            () =>;
            {
                //Drop hepend outside Instantly app
                if (InterceptMouse.IsMouseOutsideApp)
                    MessageBox.Show("Dragged outside app");
                else
                    MessageBox.Show("Dragged inside app");
            }
            );
    }
}

Complete demo with source code can be found here:

MVVM u razvoju WPF/SL poslovnih aplikacija na MSNetwork


Upate 20.03.2011: Izvorni kod za demo sa predavanja, kao i prezentacijsku datoteku možete skinuti sa ovog linka.

U sklopu konferencije MSNetwork 18. marta u 9 sati u hotelu Vidivić biće održano predavanje na temu MVVM tehnika u razvoju WPF/SL poslovnih aplikacija u kojoj će biti prezentirana ova tehnika razvoja WPF i Silverlight aplikacija.

Podaci o prezentaciji:

Prezentator: Bahrudin Hrnjica, DataSoft Bihać
Twitter: @bhrnjica
Trajanje: 45-60 min.
Level: 300-400

Kratki opis:

Model View ViewModel (MVVM) predstavlja tehniku pri razvoju i dizajnu  aplikacija na WPF i Silverlight UI platformama, a koncipirana je na odvajanju korisničkog iskustva(UX) i poslovne logike (BL). Ova tehnika predstavlja novi koncept razvoja, dizajna i implementacije poslovnih aplikacija. Prezentacija prikazuje  MVVM tehniku razvoja, kroz pojašnjenje 3 sloja: Model, View i ViewModel. U sklopu prezentacije biće pojašnjen koncept komunikacije između View i ViewModela kroz Commands i Behaviors klase, te pojam tzv. ChildWindows pomoću Messenger klase, preko koje se vrši povratna veza između ViewModel i View slojeva. Tokom prezentacije svi pojmovi i modeli prezentiraju se kroz demo primjer: BugTracker aplikacija urađen u Silverlight i WPF. Primjer demonstrira upotrebu MVVM tehnike, kroz dijeljenje izvornog koda sa WPF i Silverlight, dijeljenje jednog modela (Entity Framework) baze podataka između Silverlight i WPF preko implementacije posebnog servisa kojim se, s jedne strane rasterećuje ViewModel klasa, a s druge strane unificira pristup bazi podataka iz Silverlight i WPF  implementacijom zajedničkih metoda definisanih u baznom intrfejsu. BugTracker aplikacija sadrži i upotrebu lokalizacije, RIA Servisa i drugih primarnih dijelova aplikacije koji svaka poslovna aplikacija sadrži. Aplikacija sadrži preko 95% zajedničkog izvornog koda kojeg dijele WPF i Silverlight. BugTracker je posebno radjen za ovu konferenciju te će se objaviti upravo po završetku prezentacije. Screenshot aplikacije u Silverlight i WPF prikazan je u narednoj slici.

Screenshot Demo aplikacije koje će biti prezentirana na MSNetwork 18. marta.

 

 

 

 

 

 

 

 

Prezentacijska datoteka kao i demo aplikacija biće objavljena poslije konferencije.

Master-details with Entity Framework in WPF by using MVVM pattern


In this short blog post we will present how to implement WPF application with Master-detail relation in Entity Framework by using MVVM pattern. We will start with creating the new Visual Studio 2010 WPF Application project, and add reference to MVVM Light Toolkit library, which you can find on http://mvvmlight.codeplex.com/.  The picture below shows the starting WPF project:

Now that we have starting project, we can add the new ADO.NET Entity Framework model with NorthWind SQL database. Map the only two tables Order and OrderDetails, after that we have the following situation. If you not familiar with this procedure, more details you can find on my previous post.

The next step in implementation will be creating the ModelView of the MainWindow. The ModelView will contain implementation of all logic of the Master-detail relation. To do that point with right-click on the project, select Add-Class of the context menu item and enter the name MainWindowViewModel. If you have full instatlation of the MVVM Light Toolkit you can use MVVM template specialized for creating ModelView class.

After we create file of the MainWindowViewModel, we have to implement class and add two properties MasterCollection, and DetailsCollection.

The Next source code listing shows implementation of the MainWindowViewModel. This is minimal code for work with master – details in Entity Framework.

using GalaSoft.MvvmLight;
using System.Windows.Data;

namespace WPF_EF_MasterDetailsDemo
{
   public class MainWindowViewModel:ViewModelBase
   {
      NorthwindEntities ctx = new NorthwindEntities();
      public MainWindowViewModel()
     {

     }
     private CollectionViewSource _entityMasterView;
     public CollectionViewSource EntityMasterView
     {
       get
       {
        if (_entityMasterView == null)
          GetMasterEntityCollection();
        return _entityMasterView;
       }
    }
    public CollectionViewSource _entityDetailsView;
    public CollectionViewSource EntityDetailsView
    {
     get
     {
      if (_entityDetailsView == null)
           GetMasterEntityCollection();
       return _entityDetailsView;
     }
   }
   private void GetMasterEntityCollection()
   {
       _entityDetailsView = new CollectionViewSource();
       _entityMasterView = new CollectionViewSource();
       _entityMasterView.Source = ctx.Orders;
       _entityMasterView.View.CurrentChanged += (x, y) =>
         {
           _entityDetailsView.Source =((Orders)_entityMasterView.View.CurrentItem).Order_Details;
         };
       _entityMasterView.View.Refresh();
   }
   }
}

After we implemented ViewModel, we have to put some GUI stuff on the MainWindow.xaml, so open the MainWindow.xaml, put two labels and two DataGrid controls in to Main Window. This looks line on the following picture:

The sample is so short that it can fit in to single image ;).

In the code-behind constructor create MainWindowViewModel and assign to Windows DataContext, and that’s it.

This post demonstrate one posible  implementation of the Master-detail relation in EF by using the MVVM pattern. The source code of this project you can find on SkyDrive.

Visual Studio 2010 Beta 2 i WPF dizajner -Kratak pregled


Uvod

Kako je i najavljeno VS 2010 Beta 2, dostupna je od 21.10. 2009. Na oficijelnoj stranici Visual Studia nalazi se link za instalaciju. Međutim, radi se o Bootstrapperu online instalaciji, koja kešira nekoliko mb, na vaš disk, a zatim po pokretanju simultano downloada i instalira komponente aplikacije. I ovom postu napravićemo jedan mali tutorijal oko instalacije VS 2010 Beta 2, kao i prezentirati neke novine kod razvoja WPF aplikacija. Iako instalacija je dosta trivijalna potrebno je podsjetiti koji su preduslovi instalacije ovog proizvoda.

  • Da bi instalirali VS 2010 potrebno je deinstalirati prethodnu verziju Beta 1 u koliko je instalirana.
  • Microsoftova je preporuka da se beta verzije ne instaliraju na produkcijske mašine.

U koliko želite da pogledate video prezentaciju instalacije VS 2010 i TFS 2010 možete je naći na Channel9 stranici.

Važno je napomenuti da VS 2010 u beta 2 dolazi u sljedećim SKU verzijama:

  • Visual Studio Express
  • Visual Studio 2010 Professional
  • Visual Studio 2010 Premium
  • Visual Studio 2010 Ultimate
    Šta koja od verzija predstavlja i sadržava možete pogledati na MSDN stranici. Sjetimo se da su prethodne verzije 2005 i 2008 dolazile u: Standard, Professional i Team Suite verzijama. VS 2010 može biti instaliran na istoj mašini na kojoj se nalazi VS 2008, i to je novina u ovoj verziji, tako da neće uticati jedan na drugog.

Ako ste deinstalirali Beta 1 verziju, otvorite oficijelnu stranicu VS 2010.

Instalacija VS 2010 Ultimate

Pokrenite IE i pristupite stranici http://www.microsoft.com/visualstudio/en-us/try/default.mspx. Na donjoj slici prikazana je početna stranica na kojoj se nalazi link za instalaciju VS 2010 beta2. Kliknite na Dugme „Download the beta now“ (Kao na slici dolje.)

image

Nakon nekoliko trenutaka pojaviće se dijalog za download. Potrvdite download i kliknite na Dugme „Run“.

image

Po završetku preuzimanja Bootstrapper datoteke pokreće se instalacija, čiji prvi prozor daje do znanja novog preuređenog i za ovakvu instalaciju podešenog instalacijskog programa.

image

Po učitavanju potrebih komponenti za pokretanje instalacije, pojavljuje se dijalog za prihvaćanje licencnih uslova, te načina instalacije.

image

Nakon klika na dugme Next pojavljuje se dijalog sa komponentima za instalaciju.

image

Za ovaj slučaj instaliraćemo samo C# i F# obzirom da su mi ti jezici interesantni za ovu beta. Naravno možete odabrati sve ostale komponente.

Nakon klika Next, počinje dugotrajni proces skidanja i instalacije Visual Studio 2010.

image

Nakon nekoliko sati pojavljuje se dijalog za instaliranim proizvodom.

image

Pokretanje VS 2010 i prvi projekat

Kada pokrenemo VS2010 dobijamo startni izgled programa. Možemo primjetiti da je startni screen preuređen u odnosu na Beta1 verziju.

image

Pokrenimo Start->New Project i formirajmo novu WPF aplikaciju.

image

U dijalogu za formiranje novog projekta primjetićemo multitargeting od 2.0,3.0, 3.5, 4.0 te novi link za podešavanje za ostale verzije .NET Frameworka npr. 3.5 SP1 i buduće verzije.

image

Kada govorimo o C# projektima, oni su ostali ne promjenjeni iz verzije 2008 .

Odaberimo WPF Application i kliknimo na dugme OK. Na samom startu primjetićemo brži rad u odnosu na Beta 1 verziju.

IntelliSense

IntelliSense prozor je dodatno uređen sa manjim borderom i ne može se resajzirati kao ni u prošloj verziji.

image

Markup IntelliSense pojavio u prethodnoj beta 1 verziji ali ga je važno spomenuti da je jedan od najčešće spominjanih zahtjeva korisnika.

image

Kod IntelliSense i Markup proširenja prilikom ukucavanje prve velike zagrade nije potrebno tipkati drugu jer Intelisense to radi automatski. U prvih nekoliko pokušaja potrebno se navići.

PropertyWindow

Ovaj prozor je i u Beta1 doživio znatna poboljšanja, a sve u svrhu olakšavanja razvoja WPF aplikacija. PropertyWindow podjeljen na Tab kartice za Properties i Events, dok to u prethodnim verzijama je bio u obliku trake.

PropertyWinodw preuređen i umjesto dugmadi za Properties i Events sada stoje tab kartice:

image image

Pored, alfabetnog sortiranja image , te prikaza osobina po kategorijamaimage, uveden je novi prikaz po Izvoru osobine image (Property Source). Donja slika pokazuje ovaj način prikaza:

image

Pored InteliSense-a za Markup proširenja, jedan od najpopularnijih novina je i PropertyMarkers dugme koje se nalazi izmedju Osobine i Vrijednosti u Propertygridu, a označava odakle vrijednost osobine potiče, a iste su označene različitim sličicama.

image

Klikom na PropertyMarkers dobijamo iskačići meni za postavljanje vrijednosti:

1. Reste Value – postavljanje podrazumijevane vrijednosti (Default Value)

2. Apply DataBinding … – Postavljenje vrijednosti preko DataBinding

3. Apply Resource.. – postavljanje vrijednosti iz resursa

Kada odaberemo drugu opciju menia dobijamo popup kontrolu sa nekoliko kategorija za povezivanje kontrole izvorom podataka:

1. Source: Ova stavka prikazije sve dostune izvore podataka u dotičnoj kontroli. Na sljedećoj slici prikazana je stavka Source, koja u prvoj koloni prikazuje dostupne resurse u ovom slučaju samo Windows.Resource, dok druga kolona prikazuje valide izvore (kolekcije) za dati resurs. Treća kolona služi prilikom odabire dodathim stavki za izvor podataka.

image

2. Path Stavka obezbjeđuje odabir putanje za izvor podataka.

image

3. Converters:Preko ove stave moguće je postaviti pretvarače, koji se nalaze kao standardni ili eksterni pretvaraći preko reference.

image

4. Options: Predstavlja razne vrijante prilikom povezivanja: Format, Binding Mode, …

image

Sa prikazanim dizajnerom za Binding praktično je moguće napraviti sve moguće načine povezivanja sa svim varijantama.

Bilo da smo za neku osobinu pridrižili vrijednost lokalnu, iz resursa ili preko Binding dizajnera,  sličica u Propertymarkeru prikazaće se različito. Donja slika prikazuje varijante pridruživanja vrijednosti osobinama.

image

Detaljan pregled Dizajnera za WPF i SL u VS 2010 možete pronaći na ovom linku.

Povezivanje Aplikacije sa bazom podataka preko ADO.NET EF

Ovom verzijom nastoji se produktivnost u razvoju WPF aplikacija dovesti na nivo Windows Forms-a, a to znači poboljšati WPF dizajnere. Pogledajmo na koji način i sa koliko vremena je potrebno naš primjer povezati sa bazom podataka i prikazati Master-Detail relaciju u WPF. Takav scenario u Windows Formsima smo poprilično brzo uspijevali napraviti zahvaljujući moćnim dizajnerima.

Dodajmo novu stavku u našem projektu, te izaberimo ADO .NET Entity Data Model. Pojavljuje nam se čarobnjak za povezivanje sa bazom podataka. Povezaćemo klasičnu NorthWind bazu sa SQL 2005 ili 2008 Servera.

image

Odaberimo dvije tabele Orders i Order_Details, te završimo sa čarobnjakom.

Iz menia Data, odaberimo Show Data Sources da se pokaže prozor DataSources, te identično kao i u Windows Formsima odvucimo Orders, pa zatim Order_Details, u sadržaj Windows1, kao na slici.

image

Pritisnimo F5 za Build projekta i bez i jedne linije koda imamo MasterDetail formu, potpuno isti način kao što to radimo u Windows Formsima.

image

Pomjeranjem retka u Orders tabeli, dobijamo Order detalje u tabeli ispod. Jedina razlika u generiranju koda između WindowsForms i WPF je što nemamo navigacijske trake za manipulaciju sa podacima (edit, delete, save), međutim to i nije nekakav nedostatak.

Prilikom izrade ovog primjera koristili smo DataGrid WPF grid kontrolu, proistekla iz WPFToolKit open source projekta na www.codeplex.com, koja je sada standardna WPF kontrola.

WPF Custom ComboBox članak na CodeProject


WpfCustomComboBox1 WpfCustomComboBox2

Zadnjih dana radio sam na kastomizaciji osnovnih windows kontrola u WPF. Jedna od interesantnih kontrola koju najviše koristim i koja ima puno prednosti u odnosu na običnu combobox kontrolu je combobox sa Grid iskačućom kontrolom. Jutros je članak koji sam napisao za www.codeproject.com, objavljen. Članak možete pogledati i naravno glasati za njega na  http://www.codeproject.com/KB/WPF/WPFCustomComboBox.aspx.

Inače na codeproject sam objavio ukupno 6 članaka, i jedan sam od prvih članova ove zajednice (redni broj 657 od preko 6 miliona članova koje broji).

Moj profil možete pogledati na http://www.codeproject.com/Members/Bahrudin-Hrnjica.