WPF and Revit Addin/API: Make WPF Window and Button Fancy

We demonstrated creating a WPF Window from an External Command of Revit Addins before, either through creating a WPF window on the fly and hosting a User Control into it or through converting a WPF Application project to a Revit Class Library then creating a WPF window from a XMAL template directly.

In this article, let us see how to make the WPF window (and/or the hosted User Control) and its primary button a bit fancier. It can be easily achieved by the WPF XMAL technology but will be very hard for the WinForm.

Say we’d like to add a gradient background to the window/control and make the button have an elliptical shape and a cadet blue color, what shall we do?

It is pretty easy with WPF.

To make the gradient background, we can add one more element, Rectangle, to the grid of the User Control or WPF Window and set up its Fill LinearGradientBrush attributes as follows:

        <Rectangle Width="Auto" Height="Auto">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Azure" Offset="0.0" />
                    <GradientStop Color="Orchid" Offset="0.15" />
                    <GradientStop Color="Purple" Offset="0.25" />
                    <GradientStop Color="RosyBrown" Offset="0.5" />
                    <GradientStop Color="Purple" Offset="0.75" />
                    <GradientStop Color="Orchid" Offset="0.85" />
                    <GradientStop Color="Azure" Offset="1.0" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

So as to make the button have a different shape from the default rectangular and a different color from the default system, we create a Button.Template (in turn ControlTemplate) for the button and set its shape as Ellipse, Background as apparent, and Fill color as what we want as follows:        

        <Button Name="button1" Click="button1_Click"  Height="35" Width="200">
            <Button.Template>
                <ControlTemplate TargetType="Button" >
                    <Grid Background="#00FFFFFF">
                        <Ellipse Fill="CadetBlue"/>
                        <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
            Helllo from WPF
        </Button>

We can check the visual effect immediately after changing something in the XMAL:
 

Now the whole XMAL looks like:

<UserControl x:Class="RevitAddinCSWPF.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
 
    <Grid>
        <Rectangle Width="Auto" Height="Auto">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Azure" Offset="0.0" />
                    <GradientStop Color="Orchid" Offset="0.15" />
                    <GradientStop Color="Purple" Offset="0.25" />
                    <GradientStop Color="RosyBrown" Offset="0.5" />
                    <GradientStop Color="Purple" Offset="0.75" />
                    <GradientStop Color="Orchid" Offset="0.85" />
                    <GradientStop Color="Azure" Offset="1.0" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
       
        <Button Name="button1" Click="button1_Click"  Height="35" Width="200">
            <Button.Template>
                <ControlTemplate TargetType="Button" >
                    <Grid Background="#00FFFFFF">
                        <Ellipse Fill="CadetBlue"/>
                        <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
            Helllo from WPF
        </Button>
       
        <!--<Button Margin="53,49,34,0" Name="button1" Click="button1_Click" Height="35" VerticalAlignment="Top">Helllo from WPF</Button>-->
        <Button Height="27" HorizontalAlignment="Left" Name="button2" VerticalAlignment="Top" Width="24">TL</Button>
        <Button Height="27" HorizontalAlignment="Left" Name="button3" VerticalAlignment="Bottom" Width="24">BL</Button>
        <Button Height="27" HorizontalAlignment="Right" Name="button4" VerticalAlignment="Top" Width="24">TR</Button>
        <Button Height="27" HorizontalAlignment="Right" Name="button5" VerticalAlignment="Bottom" Width="24">BR</Button>
        <Button Height="27" HorizontalAlignment="Left" Margin="53,0,0,33" Name="button_Cancel" VerticalAlignment="Bottom" Width="84" Click="button_Cancel_Click">Cancel</Button>
        <Button Height="27" HorizontalAlignment="Right" Margin="0,0,34,33" Name="button_OK" VerticalAlignment="Bottom" Width="84" Click="buttonOK_Click">OK</Button>
    </Grid>
</UserControl>

 

If it is fine, we can compile the addin project, launch Revit, give the WPF window a try, and have a look at its appearance now:

 
If the button is pressed, the test addin will say hi and introduce itself a bit as usual.

There are surely some spaces for the little simple example to improve such as putting the template into a style of a dictionary, making the fancy effect more friendly to our eyes, or something like that, but it proves the concept clearly enough.

So once again, nothing should prevent us from adopting the WPF technology and its fancy stuffs into the addin development for Revit 2011 and newer.

More articles about WPF and Revit Addin/API can be expected soon. Please stay tuned. RevitAddinWizard may provide a few coders to address some such common situations in the near future.