How to add User Interface

We show in previous post how to create simple installer now we create installer with UI 

and which component are use.

There are five types of UI wizard provided by wix

 Now add UI in your installer you need to add referance "WixUIExtension"

1. WixUI_Mondo :- It contain welcome dialog,license-agreement dialog,setup type dialog,feature selection dialog and maintenance dialog. feature selection dialog contain facility of feature tree, disk costing and browsing.
2. WixUI_InstallDir
3. WixUI_FeatureTree
4. WixUI_Minimal :-  It contain single welcome dialog,license-agreement dialog and direct install no choice for user to install perticulre component. Simply add <UIRef Id="WixUI_Minimal" /> 
5. WixUI_Advanced  :-  Its like Minimal , it provide user selection of features  via tree view and also provide choose folder or path.
   

Syntax :-
<UIRef: Id="WixUI_Mondo"/>  if you want WixUI_Mondo OR

<UIRef: Id="WixUI_Minimal"/> for WixUI_Minimal  OR

<UIRef: Id="WixUI_FeatureTree"/> for WixUI_FeatureTree  etc.

In your product.wxs page add any above UIReference,
1. R+cliclk on references add select Addreference 
2. Select browse tab "C:\Program Files (x86)\WiX Toolset v3.7\bin\" select
    WixUIExtension reference.

Minimal UI contain single dialog for install

In WixUI_Mondo  UI reference welcome dialog, License and Agreement  dialog , Custom setup dialog and feature tree.

Selection of feature using feature

By using this reference you can add your custom dialogs also.
Customdialogs:-
You can add in dialog tag

Text,ComboBox,CheckBox, Bitmap(image),Icon, RadioButtonGroup,Line, SelectionTree,  PushButton,PathEdit, Billboard,DirectoryCombo, DirectoryList, Edit, GroupBox, ListBox, ListView, MaskedEdit,  ProgressBar,ScrollableText,  VolumeCostList or VolumeSelectCombo

1.Add new page name like dialos.wxs
       in <fragment> add this two references
                    <UIRef Id="WixUI_FeatureTree" />
                    <UIRef Id="WixUI_ErrorProgressText" />
2. Add license dialog reference tag and give name of your dialog as id and publish in this tag your 
   dialog in the next 
here an example of custom dialog
       

<?xml version="1.0" encoding="UTF-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
    <Fragment>
    <UI Id="UIDialogs">
      <!-- This uses the WixUI plugin -->
      <UIRef Id="WixUI_FeatureTree" />
      <UIRef Id="WixUI_ErrorProgressText" />

      <!-- Injection of custom UI. -->
      <DialogRef Id="SetupDlg" />
      <Publish Dialog="LicenseAgreementDlg" Control="Next" Event="NewDialog" Value="SetupDlg" Order="3">LicenseAccepted = "1"</Publish>     
    </UI>   
    </Fragment>
  <Fragment>
    <UI>
      <Dialog Id="SetupDlg" Width="370" Height="270" Title="IIS Settings - [ProductName]" NoMinimize="yes">
        <!-- Web App details prompt -->
        <Control Id="NameLabel" Type="Text" X="45" Y="53" Width="100" Height="15" TabSkip="no" Text="&amp; Name:" />
        <Control Id="NameEdit" Type="Edit" X="45" Y="65" Width="220" Height="18" Property="NAME" Text="{80}" />

        <!-- Back button -->
        <Control Id="Back" Type="PushButton" X="180" Y="243" Width="56" Height="17" Text="&amp;Back">
          <Publish Event="NewDialog" Value="LicenseAgreementDlg">1</Publish>
        </Control>
       
        <!--Next Button-->
        <Control Id="Next" Type="PushButton" X="236" Y="243" Width="56" Height="17" Default="yes" Text="&amp;Next">
          <Publish Event="NewDialog" Value="CustomizeDlg">        
          </Publish>
        </Control>

        <Control Id="Cancel" Type="PushButton" X="304" Y="243" Width="56" Height="17" Cancel="yes" Text="Cancel">
          <Publish Event="SpawnDialog" Value="CancelDlg">1</Publish>
        </Control>
        <Control Id="BannerBitmap" Type="Bitmap" X="0" Y="0" Width="370" Height="44" TabSkip="no" Text="WixUI_Bmp_Banner" />
        <Control Id="Description" Type="Text" X="25" Y="23" Width="280" Height="15" Transparent="yes" NoPrefix="yes">
          <Text>Please enter  Configuration</Text>
        </Control>

        <Control Id="BottomLine" Type="Line" X="0" Y="234" Width="370" Height="0" />
        <Control Id="Title" Type="Text" X="15" Y="6" Width="200" Height="15" Transparent="yes" NoPrefix="yes">
          <Text>{\WixUI_Font_Title}IIS Settings</Text>
        </Control>

        <Control Id="BannerLine" Type="Line" X="0" Y="44" Width="370" Height="0" />
      </Dialog>
    </UI>
  </Fragment>
    </Wix>

and your new dialog look like this

    now your own dialog ready.... you can insert here combobox etc but the important part is 
'Publish event', what you want new dialog or SpawnDialog ? SpawnDialog create new confirmation dialog. and some dialogs are wix generated so you have no need to create it just add reference of it like 
      <UIRef Id="WixUI_FeatureTree" /> For feature tree and
      <UIRef Id="WixUI_ErrorProgressText" /> for progress text
so test your new lil app.....