Tuesday, 1 May 2012

Burn UI Customisations

I have written a couple of WiX burn UI customisations and thought they were worth sharing. They are both based on the standard WiX burn templates and can be easily implemented as mentioned in my previous post http://neilsleightholm.blogspot.co.uk/2012/05/wix-burn-tipstricks.html.

HyperlinkLicense

I changed this to include the following features:
  1. Resized to match standard WiX UIs.
  2. Add welcome text
  3. Display version number.
image

The relevant bits of code to do this is shown below, all other code it the same as the standard UI:

<Theme xmlns="http://wixtoolset.org/schemas/thmutil/2010">
    <Window Width="500" Height="390" HexStyle="100a0000" FontId="0">#(loc.Caption)</Window>


    <Page Name="Install">
        <Text X="11" Y="80" Width="-11" Height="30" FontId="2">#(loc.InstallHeader)</Text>
        <Text X="11" Y="121" Width="-11" Height="-129" FontId="3">#(loc.InstallMessage)</Text>
        <Hypertext Name="EulaHyperlink" X="11" Y="-107" Width="-11" Height="17" TabStop="yes" FontId="3" HideWhenDisabled="yes">#(loc.InstallLicenseLinkText)</Hypertext>
        <Text X="11" Y="-73" Width="246" Height="17" FontId="3">#(loc.InstallVersion)</Text>
        <Checkbox Name="EulaAcceptCheckbox" X="-11" Y="-41" Width="246" Height="17" TabStop="yes" FontId="3" HideWhenDisabled="yes">#(loc.InstallAcceptCheckbox)</Checkbox>
        <Button Name="OptionsButton" X="-171" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0" HideWhenDisabled="yes">#(loc.InstallOptionsButton)</Button>
        <Button Name="InstallButton" X="-91" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallInstallButton)</Button>
        <Button Name="WelcomeCancelButton" X="-11" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallCloseButton)</Button>
    </Page>

This also requires the addition of a few items in the HyperlinkTheme.wxl file:

  <String Id="InstallHeader">Welcome</String>
  <String Id="InstallMessage">Setup will install [WixBundleName] on your computer. Click install to continue, options to set the install directory or Close to exit.</String>
  <String Id="InstallVersion">Version [WixBundleVersion]</String>

RtfLicense

I changed this to include the following features:
  1. Resized to match standard WiX UIs.
  2. Change odd looking 3D outline to a single line.
image

The relevant bits of code to do this is shown below, all other code it the same as the standard UI:

    <Page Name="Install">
        <Text X="11" Y="80" Width="-11" Height="-70" TabStop="no" FontId="2" HexStyle="0x800000" />
        <Richedit Name="EulaRichedit" X="12" Y="81" Width="-12" Height="-71" TabStop="yes" FontId="0" />
        <Checkbox Name="EulaAcceptCheckbox" X="-11" Y="-41" Width="246" Height="17" TabStop="yes" FontId="3" HideWhenDisabled="yes">#(loc.InstallAcceptCheckbox)</Checkbox>
        <Button Name="OptionsButton" X="-171" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0" HideWhenDisabled="yes">#(loc.InstallOptionsButton)</Button>
        <Button Name="InstallButton" X="-91" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallInstallButton)</Button>
        <Button Name="WelcomeCancelButton" X="-11" Y="-11" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallCloseButton)</Button>
    </Page>

19 comments:

Varun Pandey said...

Thanks for the post. I am new to Wix. I am using ManagedBootstrapperApplicationHost to create my bootstrapper application. My problem is that the hyperlinks (or hypertext) & buttons are not responding. Actually I don't know where to put the reference for rtf so that it could be displayed. Please help!!! Thanks in advance.

Neil Sleightholm said...

See my previous post http://neilsleightholm.blogspot.co.uk/2012/05/wix-burn-tipstricks.html for some examples.

VKC said...

How can we enable feature selection using the theme file ? I am having hard time figuring out if I need a WPF for feature selection or theme file would suffice.

Sorin Chitu said...

Hi Neil, Thanks for this excellent post. Well, I need to add a combobox on my bootstrapper, so, do you have any idea how can I achive this? Thanks.

Neil Sleightholm said...

I don't think this is supported, if you only have a few options then this http://wixextba.codeplex.com/ supports radio buttons.

Farrukh Waheed said...

Can we add a ListBox or similar control to show list of applications being installed and each entry is marked with some icon depending upon install success/failure or absent or already installed states?

Neil Sleightholm said...

I am afraid something like that is not implemented.

Anonymous said...

I just do not get it.

I followed the previous post on Burn tips and trics and I got a burn bootstrapper with a HyperlinkLicense screen working nicely.

Now to customise that screen as per this page, do I place the XML for the dialog theme inside the BootstrapperApplicationRef tag?

You also say a modification is required to a HyperlinkTheme.wxl file. Where do I get that? I have wix installed, searched my hard drive, but I get no such file.

Neil Sleightholm said...

If you look here http://neilsleightholm.blogspot.co.uk/2012/05/wix-burn-tipstricks.html in the custom UI it should show you how to added the reference.

To get the file you would need to download the WiX source.

Suneel Yadav said...

@ Neil Sleightholm..i need one help from you i want to put the radio button in bundle to customize UI so based on the radio button i want to copy some files..can you suggest me how to add the radio buttons

Suneel Yadav said...

HI Neil,I want to customize bundle UI,just wanted to put the the radio button,on selection of radio button want to copy some configuration file..how can we customized the burn UI.Please give me some idea as i am stuck now.
thanks

Neil Sleightholm said...

Take a look here http://wixextba.codeplex.com there are some samples that should do what you want.

Anonymous said...

How to set a Burn variable with a value from textbox from options page? Please Help, thanks in advance.

Sumeet said...

Hello,
I've provided checkboxes to select MSI's, I want to show the Install page even though the Bundle has been installed, as the user might want to install the MSI's which he had'nt installed during previous runs.

Is there a way to achieve this?

Sumeet said...

Hello,
I've provided checkboxes to select MSI's, I want to show the Install page even though the Bundle has been installed, as the user might want to install the MSI's which he had'nt installed during previous runs.

Is there a way to achieve this?

Neil Sleightholm said...

@ Sumeet - not that I know of.

SHA said...

is there anyway to show and accept inputs from "check boxes" listed in uninstall/modify page.

Neil Sleightholm said...

I am not aware of any method.

Anonymous said...

Is there a way to enable the button to reach the Options page? What I want is an Install page with a checkbox and a "Next" button which is disabled and gets enabled only when the checkbox is selected. When the "Next" button is selected, it goes to the Options page which has one more checkbox and an "Install" button which is disabled and gets enabled only when the checkbox is selected. Once the button is clicked it should start the install. I am able to make the checkbox and the Install button on the second page to work but unable to implement the button disable/enable on checkbox selection on my first page to work.

I have a Button element and a Checkbox element but don't know what to pass for the Name for the Checkbox element. Thanks for your help in advance.