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.

 

 

 

Advertisement

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.