RADF:How to Extend the Graphical User Interface (GUI)

From DocR23

Jump to: navigation, search

XAML files manage the Graphical User Interface (GUI) content of the application.

Note: MainWindow.XAML manages the core contents of the application GUI. This file resides in the SpaRadfDesktop Project.

Note: Each plug-in adds its own GUI to the core application GUI. The XAML files for plug-ins can be found under their respective Projects.


Contents

Ribbon Menu

Creating a RibbonCommand

A RibbonCommand must be created before adding new Ribbon features, Ribbon groups, or Ribbon buttons. A RibbonCommand is the repository for storing all GUI-related data at one location for a particular command. Examples of GUI related data include: Tool tips, Labels, Title, and Image. The RibbonCommand can be used in multiple locations; it eliminates the maintenance burden of changing GUI-related content at several locations for the same command.

Note: For the core application GUI, RibbonCommands can be found in AppCommands.xaml. This file resides in the RADFApp Project.

Note: For plug-ins, RibbonCommands can be found at the top of the XAML file between the <ResourceDictionary></ResourceDictionary> tags which are responsible for creating the plug-in-specific GUI.


A sample RibbonCommand appears as follows: 

<r:RibbonCommand x:Key="cOpen"
        LabelTitle="{x:Static pp:Resources.sOpen}"
        ToolTipTitle="{x:Static pp:Resources.sOpen}"
        ToolTipDescription="{x:Static pp:Resources.sOpenToolTip}"
        SmallImageSource="images/open.png"
        LargeImageSource="images/open.png" />

Key is the command name used to represent the command anywhere in the Project. GUI-related properties (such as LabelTitle and SmallImageSource) may reference Project resources such as Strings and Images.

Note: Any new strings (for example, sBlend) added to the XAML file must be added to the resources.resx file in the Properties folder of the project.


Adding a New Image to a RibbonCommand

  1. Using Windows Explorer, copy the new image file (formatted to 16x16 px or 32x32 px) to the images folder inside the current project.
  2. Right-click on the images folder inside the current Project.
  3. Add the image file as a resource using Add -> Existing Item.
    RADF Add Image.png
  4. Right-click on the added image, and select Properties.
    RADF Image Properties.png
  5. Change Build Action to Resource.
    RADF Image Properties Edit.png
  6. Change the path in the RibbonCommand to point to the new image file: 
...
 SmallImageSource="images/open.png"
 LargeImageSource="images/open.png" />

Adding a CommandBinding

CommandBinding binds the command key to its corresponding implementation functions. Once CommandBinding is added, these functions can be implemented using C# in the .cs files. CommandBinding can be added with the definition of RibbonCommand. 

<r:RibbonCommand x:Key="cOpen"
        LabelTitle="{x:Static pp:Resources.sOpen}"
        ToolTipTitle="{x:Static pp:Resources.sOpen}"
        ToolTipDescription="{x:Static pp:Resources.sOpenToolTip}"
        SmallImageSource="images/open.png"
        LargeImageSource="images/open.png" />

CommandBinding can also be added explicitly in the XAML file where the RibbonCommand is being used. 

<CommandBinding Command="{StaticResource cOpen}" Executed="cmdOpenFile" />

Once the CommandBinding has been created, it can be implemented in the code behind (xaml.cs) file. A sample implementation appears as follows: 

internal void cmdOpenFile(object sender, ExecutedRoutedEventArgs e)
        {
 
            ........
        }

Creating New Ribbon Features

Ribbon features include Ribbon tabs, Ribbon groups, and Ribbon buttons. Add Ribbon features using the following XAML code. 

<r:RibbonGroup Name="CgmTkModelingHomeGroup" HasDialogLauncher="True" Command="{StaticResource CgmTkModelingHomeCommand}">
        <r:RibbonButton Name="btnGo" Command="{StaticResource cmdGo}"  />
        <r:RibbonButton Name="btnUndo" Command="{StaticResource cmdUndo}"   />
        <r:RibbonButton Name="btnRedo" Command="{StaticResource cmdRedo}"  />
    </r:RibbonGroup>
    <r:RibbonGroup Name="CgmTkModelingGroup" HasDialogLauncher="True" Command="{StaticResource CgmTkModelingCommand}">
        <r:RibbonToggleButton Name="btnBlendEdges" Command="{StaticResource cmdBlendEdges}"  />
        <r:RibbonToggleButton Name="btnRemoveFaces" Command="{StaticResource cmdRemoveFaces}"  />
        <r:RibbonToggleButton Name="btnSlice" Command="{StaticResource cmdSlice}"  />
    </r:RibbonGroup>

The above XAML code snippet appears as follows in the GUI:

Ribbon Created through XAML

Note: Refer to MainWindow.xaml, AppCommands.xaml, and AppStyles.xaml in the SpaRadfDesktop Project for samples and more details.


Multi-Tab Docking Interface

Adding a New Tab-Docking Window

The infrastructure for Tab-Docking windows is already in place in MainWindow.xaml. Add new windows using the following XAML code. 

<ad:DockableContent Title="{x:Static pp:Resources.sSample}">
</ad:DockableContent>

Important: Insert the text of the quote here, without quotation marks.


Note: Refer to MainWindow.xaml, AppCommands.xaml, and AppStyles.xaml in the SpaRadfDesktop Project for samples on how tab-docking is used in RADF.


Tab-Docking Samples

The RADF user interface is completely customizable. Different layouts can be created by changing the Tabs layout in MainWindow.xaml. Samples are provided below.

Default Layout

The Default layout of the RADF tab-docking windows appears as follows:

RADF Default Layout.png

The following XAML in MainWindow.xaml generates the Default layout.

Retrieved from "http://doc.spatial.com/index.php/RADF:How_to_Extend_the_Graphical_User_Interface_(GUI)"
Personal tools