LearnRevitAPI
Nov 12, 2024
🤷♂️ Visual Studio Basics for Beginners
Welcome to the 3rd Lesson of WPF course for pyRevit
By now, you should have your Visual Studio installed, and you were able to create WPF project (for .NET Framework)
Now, let me take you on a short tour around Visual Studio to show you a few essential things.
I will show you the most important things, so you know where to focus your attention before we dive into XAML and start coding.
Let's continue where we stopped in the previous lesson.
Visual Studio
As I've mentioned in the previous lesson, Visual Studio is an IDE for large scale application development. It includes a lot of very advanced features.
But we don't need most of it. We only need the most important features for WPF so we can write XAML code efficiently and have a live preview of our forms.
So, let's go through the most important features and where to find them, so you feel more comfortable with the IDE before we start coding.
WPF Designer (Preview Feature)
Once you start a WPF Project and open XAML file, you will see the main working area.
This is a place for writing a XAML code and see live preview of your form. This is the most important feature, because you need to see how your XAML code will look like to your users.
💡 We could also open C# and other files, but we won't need that. We are here just for the XAML code.
When you start a new project, XAML file always includes a placeholder template with a <Window>
tag, which represents the WPF class of your form.
Let's add a new <Button>
control as an example like this:
💡 We will dive deeper in XAML controls and syntax in the next lesson.
In this lesson let's focus on the Visual Studio IDE.
Toolbox
When you start with WPF it's hard. There are lots of Controls (UI Components) and each has its own properties, events and you don't even know where to find them...
But there are places we can look inside of Visual Studio, like Toolbox for example. It's a menu where you can find a list of all WPF Controls.
🔎 You can find it on the Left Sidebar.
If it's closed you can open it again with CTRL+ALT+X shortcut.This is amazing for beginners to see all available elements. Once you know their name you can learn more about them.You can also drag and drop them on the canvas to explore the elements. But only do that for educational purposes, not your real forms.There are better ways to control positioning in XAML with Stacks and Grids.
💡Control refers to UI Components in WPF Framework that represent a visible object in the form. (e.g. Button, CheckBox, TextBox, Grid, StackPanel...)
Interactive Preview
Also, notice that when you drag any of WPF Controls on the canvas, you will see changes in your XAML code.
In Visual Studio you have an interactive Preview. Not only you can see how your code will look like in the preview, but you can also interact with it an make changes that will update your code.
So it's a two-way street.
It's great to experiment and see what's available, but usually it's better and quicker to write XAML code once you know what to do.
Properties
You can also look inside the elements and make changes to attributes by using UI Property menu. It's usually located at the bottom right corner under Project Explorer.
Or you can also right click any element and select Properties.
You can change many attributes inside this menu. They are sorted in different pulldown menus like Brushes(Colors), Layout, Text, Appearance, Common.
You can have a look and try to make some changes. And notice that once you change any value, your XAML code updates as well.
In XAML syntax, similar to HMTL, all attributes are going to be defined inside the the start tag of the Control (more on that in next lesson)
This is a great way for a beginner to find the right attributes for various elements. For Example:
I can also make changes in code and they will instantly be shown in Preview and Properties menus.
Event Handlers
When you design a UI Form, you will also use a lot of Events.
Events allow you to subscribe to certain actions and when this action is triggered you can execute some snippet or make UI changes based on the logic you provide.
For example, the most basics one is Button Click.
You can create many buttons, but then you would subscribe to their Events and add some logic what happens when you click. Maybe it triggers a change in UI form or you execute Revit API Code. That's up to you.
But keep in mind, that there are a lot of Events in WPF for nearly all WPF Controls. You can have a look at the list of events in the properties menu. There is a little Spark icon that will open a list of all available Events for selected Control.
🔎To see a list of all available Events for the element, we can click on the spark icon inside the properties menu.
As you can see there is a big list of events. Click, DragEnter, MouseOver, Pressed… You can set an event probably on any action you can imagine with UI Components.
We will cover how to work with events later in the course, for now you just need to know where to find a list of all events.
More Features
There are even more features in Visual Studio for WPF like:
Solution Explorer
WPF Form Previewer
Document Outline
And other Tips and Tricks
Check the full lesson right here to learn more. There is a Video and a Written Summary to help you get comfortable with Visual Studio.
I strongly recommend you to check it, because in the next lesson we will dive into XAML code and create your first WPF form.
So get familiar with Visual Studio before we start coding.
P.S.
Don't miss the upcoming Live-Webinar: How-To Create Good-Looking UI Forms in pyRevit with WPF
📅 Mark the date: 20th Nov 16:00 (CEST Time).
In this ~90-minute session, you'll discover:
🚀 Why WPF is a Game-Changer for pyRevit users
📚 WPF Basics for Beginners
🛠️ Hands-On Example: Build your first WPF Form in pyRevit
Plus, you can ask questions in real-time since it's a Live session.
Click Here to Register:
Join Newsletter
📩 You will be added to Revit API Newsletter
Join Us!
which is already read by 7400+ people!