Sergiy Baydachnyy

Blog about technologies

Archive for the ‘Visual Studio’ Category

Live Visual Tree in Visual Studio

leave a comment »

In this post I am going to talk about a cool tool in Visual Studio – Live Visual Tree. This tool is available for Store and WPF applications including Store applications for Windows 8.x.

Live Visual Tree allows to observe XAML visual tree in runtime, review properties of elements there and even change properties in runtime in order to check how changes will affect interface without restarting application itself. There are lots of scenarios when you need to use a tool like this and I have already adopted this tool for the following tasks:

· If you have a huge number of visual states in your interface it’s really hard to understand while a state is not fired. Thanks to Live Visual Tree you can check properties of all controls and see what happens applying changes to these properties – check if a state is applied and how the result looks like;

· Visual designer in Visual Studio works fine but if you have lots of bindings you can use Live Visual Tree to change something in runtime and see how it affects the design of the running application with active bindings and data there;

· Live Visual Tree allows to visualize layout in order to show alignments and space for UI elements. It allows to find some mistakes which you cannot find in design mode due to absence of real data;

· Checking count of elements in each container you can find potential problem with performance;

· Live Visual Tree allows to check XAML tree not just for your applications – you can easily attach debugger to any running “XAML application” and see XAML visual tree there and apply any changes in the same way;

In order to open the Live Visual Tree window for your application you need to run your application in the Debug Mode and you can find the Live Visual Tree using Debug->Windows menu item. The second window, which is associated with the Live Visual Tree, is Live Property Explorer. Using the Live Visual Tree you can navigate between XAML elements and using Live Property Explorer you can check, change and create properties there.

clip_image002

You can see that Live Visual Tree provides information about number of XAML elements inside each container. Pay special attention that you can see elements from XAML visual tree only. So, Live Visual Tree contains visible elements only, and if interface changes from one state to another you can see that Live Visual Tree is changing in runtime.

Live Property Explorer shows default values for properties, values which were inherited from other controls and local values of control properties itself. Of course, you can modify local values only. If a value has been assigned to a property previously you can modify it but you can add any other available properties and assign values to them as well.

In Live Visual Tree window you can find two useful buttons. The first one allows to select any element in the running application in order to find it in the XAML tree. It’s very useful when you want to locate a place of a button and other controls that have tap event handler. The second one allows to visualize layout. Once you select any element you will be able to see layout there.

As I mentioned earlier you can attach Visual Studio to any existing “XAML window”. For example, you can run the settings window and select Attach to Process in Debug menu of Visual Studio 2015. In the Attach to Process dialog select SystemSettings process and you will be able to see the structure of the window. You even can change current settings and check layout of the window.

clip_image004

So, Live Visual Tree is a very powerful tool which can help to make your application better.

Advertisements

Written by Sergiy Baydachnyy

08/11/2015 at 9:41 PM

Visual Studio Code and Visual Studio Online

leave a comment »

Visual Studio Code has lots of different advantages like:

· It’s very fast and doesn’t require much resources. Even on my Windows laptop, where I have Visual Studio Enterprise installed, I like to use Visual Studio Code to open JavaScript or TypeScript files just to check something using formatting features. It’s as fast as opening a text file in Notepad but I have fully featured IDE;

· It supports more than 30 programming languages. So, I can easy use it together with Unity 3D to edit C# and JavaScript files or I can edit HTML markup and TypeScript files;

· It supports different operation systems like Linux and MacOS. Therefore, you can continue to use Visual Studio Code running Unity3D projects on Mac or when you create web sites or server-side components using Node.js;

But today I am going to talk about another important advantage, which is integration with Git. Since even I am the only person in the team I will use version control system in any case. Of course, Git is just a platform and it requires a provider, if you are not going to setup your own infrastructure. And if you are planning to create an open source project which will be uploaded to a public repository, probably, you will use GitHub as a provider. GitHub allows you to create an unlimited number of public repositories for free. But once you want to create a private repository or want to have access to number of tools which help you to support Software Development Life Cycle, it’s better to use Visual Studio Online.

Visual Studio Online allows you to have up to 5 developers per your account for free and you can create any number of projects there and use some additional features like Sprint planning tools, Task and Kanban boards, virtual team room etc. And, of course, Visual Studio Online supports Git and thanks to that you can use Visual Studio Code and Visual Studio Online together.

If you still don’t have an account for Visual Studio Online, it’s time to get one for free.

Once you get access to Visual Studio Online you can create a project. In this case project means everything that is related to application lifecycle management: dashboards, repository, team room etc. Pay special attention that Visual Studio Online supports two types of version control including Git. Because we are going to use Visual Studio Code we need to select Git:

clip_image002

Once the project is created you need to do one more thing inside Visual Studio Online – open your profile and use Security tab to apply Alternate authentication credentials. By default Visual Studio Online uses LiveID to make authentication but Git tools don’t support LiveID. So, without this step you will not be able to setup Git on your PC.

clip_image004

One more step on the server side is getting URL that you can use as a remote repository in Git. Just navigate to the project and open CODE tab. You will see the URL – just copy it for next step.

clip_image006

That’s all done on server side.

I assume that you already installed Git on your PC and know how to run the command line. First of all you need to provide Git your user name which you defined in Visual Studio Online as an alternate credential:

git config –global user.name sbaidachni

If you still have not created a local repository, you can do it by using the following commands:

git init

This command will make the current folder a local git repository.

Finally, you can add the reference to our remote repository:

git remote add origin https://canadaapps.visualstudio.com/DefaultCollection/_git/VSCodeProject

That’s all. Just open the local folder using Visual Studio Code and you should see that most of menu items of Git tab are already enabled for you:

clip_image007

You can start coding and commit all changes to Visual Studio Online.

Written by Sergiy Baydachnyy

08/04/2015 at 8:00 PM