WPF Grids Example

Grids are used to create very custom layout of the form. You can create any number of columns and rows and you can also span your elements actoss multiple columns and rows if necessary.

Here is a simple example to make this:

As you know you need to create 2 files in .pushbutton for WPF forms:

  • script.py

  • GridsUI.xaml


Python

# -*- coding: utf-8 -*-
__title__   = "EF-WPF: Grids"
__doc__ = """Version = 1.0
Date    = 15.07.2024
_____________________________________________________________________
Description:
Example of using EF-WPF: Grids.
Learn how to create grids to organize your content on the form.
_____________________________________________________________________
How-To:
- Click the Button
_____________________________________________________________________
Last update:
- [15.07.2024] - V1.0 RELEASE
_____________________________________________________________________
Author: Erik Frits from LearnRevitAPI.com"""

# ╦╔╦╗╔═╗╔═╗╦═╗╔╦╗╔═╗
# ║║║║╠═╝║ ║╠╦╝ ║ ╚═╗
# ╩╩ ╩╩  ╚═╝╩╚═ ╩ ╚═╝ IMPORTS
#====================================================================================================
from Autodesk.Revit.DB import *
from pyrevit import forms   # By importing forms you also get references to WPF package! Very IMPORTANT
import wpf, os, clr         # wpf can be imported only after pyrevit.forms!

# .NET Imports
clr.AddReference("System")
from System.Collections.Generic import List
from System.Windows import Application, Window, ResourceDictionary
from System.Windows.Controls import CheckBox, Button, TextBox, ListBoxItem



# ╦  ╦╔═╗╦═╗╦╔═╗╔╗ ╦  ╔═╗╔═╗
# ╚╗╔╝╠═╣╠╦╝║╠═╣╠╩╗║  ║╣ ╚═╗
#  ╚╝ ╩ ╩╩╚═╩╩ ╩╚═╝╩═╝╚═╝╚═╝ VARIABLES
#====================================================================================================
PATH_SCRIPT = os.path.dirname(__file__)
uidoc   = __revit__.ActiveUIDocument
app     = __revit__.Application
doc     = __revit__.ActiveUIDocument.Document #type: Document


# ╔╦╗╔═╗╦╔╗╔  ╔═╗╔═╗╦═╗╔╦╗
# ║║║╠═╣║║║║  ╠╣ ║ ║╠╦╝║║║
# ╩ ╩╩ ╩╩╝╚╝  ╚  ╚═╝╩╚═╩ ╩ MAIN FORM
#====================================================================================================
class SimpleForm(Window):
    def __init__(self):
        # Connect to .xaml File (in same folder)
        path_xaml_file = os.path.join(PATH_SCRIPT, 'GridsUI.xaml')
        wpf.LoadComponent(self, path_xaml_file)

        # Show Form
        self.ShowDialog()

    # ╔╗ ╦ ╦╔╦╗╔╦╗╔═╗╔╗╔╔═╗
    # ╠╩╗║ ║ ║  ║ ║ ║║║║╚═╗
    # ╚═╝╚═╝ ╩  ╩ ╚═╝╝╚╝╚═╝ BUTTONS
    #==================================================
    def UIe_button_run(self, sender, e):
        """Button action: Rename view with given """
        self.Close()
        # You can do something here when button is clicked

# ╦ ╦╔═╗╔═╗  ╔═╗╔═╗╦═╗╔╦╗
# ║ ║╚═╗║╣   ╠╣ ║ ║╠╦╝║║║
# ╚═╝╚═╝╚═╝  ╚  ╚═╝╩╚═╩ ╩
# Show form to the user
UI = SimpleForm()


XAML

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:av="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="av"
        Title="EF-WPF Sample Form" 
        Height="300" Width="500" WindowStartupLocation="CenterScreen">

    <Grid Margin="10">
        <!-- Define main grid columns -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <!-- Left column content (1/4 width) -->
        <StackPanel Grid.Column="0" Margin="0,0,10,0">
            <Image Source="https://framerusercontent.com/images/LRmkkOk8c7TWErBSS6H9jhFklU.png" Height="30" HorizontalAlignment="Center" Margin="0,0,0,10"/>
            <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Padding="10">
                <StackPanel>
                    <TextBlock Text="EF-WPF Gridsorm" FontSize="14" FontWeight="Bold" Margin="0,0,0,10"/>
                    <TextBlock TextWrapping="Wrap"><Run Text="Here is an example of using Grids in WPF."/><LineBreak/><Run/><LineBreak/><Run Text="Happy Coding!"/><LineBreak/><Run Text="-Erik Frits"/></TextBlock>
                </StackPanel>
            </Border>
            <Separator Margin="0,10,0,5"/>
            <Button Click="UIe_button_run" Content="Submit!" Width="75" Height="25" Margin="0,0,0,10"/>
        </StackPanel>

        <!-- Right column content (3/4 width) -->
        <Grid Grid.Column="1">
            <!-- Define nested grid rows and columns -->
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>

            <!-- Row and column span examples with different gray shades -->
            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="LightGray"  >
                <TextBlock Text="StackPanel A" FontSize="16" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" />
            </StackPanel>
            
            <StackPanel Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Background="Gray" >
                <TextBlock Text="StackPanel B" FontSize="16" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" />
            </StackPanel>

            <StackPanel Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Background="DimGray" >
                <TextBlock Text="StackPanel C" FontSize="16" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" />
            </StackPanel>

            <StackPanel Grid.Row="1" Grid.Column="1" Background="DarkGray" >
                <TextBlock Text="StackPanel D" FontSize="16" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" />
            </StackPanel>
                     
            <StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Background="SlateGray" >
                <TextBlock Text="StackPanel E" FontSize="16" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" />
            </StackPanel>

⌨️ Happy Coding!
Erik Frits