Intersoft ClientUI 8 > ClientUI Fundamentals > Commanding Overview > Commanding How-to Topics > How-to: Implement a HybridRoutedCommand |
This example shows how to setup a tool bar button to implement a HybridRoutedCommand.
The hybrid routed command helps you elegantly address numerous challenges in UI programming. It is particularly useful in scenarios where an alternate user interface state is required to be updated according to the status of the command target. The commanding user interface in a text editing application describes this particular requirement and is the simplest way to understand how hybrid routed command works.
The following code example shows how to create the hybrid routed commands in a static class, setup the tool bar button and then implement the hybrid routed commands.
Before a HybridRoutedCommand can be consumed in your application, you need to create the HybridRoutedCommand definition in your application code. A HybridRoutedCommand is generally defined in a static class although it can be actually defined anywhere else in your application such as in the view's code behind or even in a view model. Defining HybridRoutedCommand in a static class allows the command to be easily reused throughout your entire application.
The following code example shows how to define the hybrid routed commands in a static class.
C# |
Copy Code
|
---|---|
using System.Windows.Documents; using System.Windows.Input; using Intersoft.Client.Framework.Input; namespace ClientUIApplication_Docs.Commands { public static class EditingCommands { private static readonly HybridRoutedCommand BoldCommand = new HybridRoutedCommand("Bold", "Bold", typeof(EditingCommands)); private static readonly HybridRoutedCommand ItalicCommand = new HybridRoutedCommand("Italic", "Italic", typeof(EditingCommands)); public static HybridRoutedCommand Italic { get { return ItalicCommand; } } public static HybridRoutedCommand Bold { get { return BoldCommand; } } public static void Initialize() { // empty static class initializer } } } |
The following code example shows how to setup the tool bar button and the hybrid routed command to pass the status of the current selection to the command source.
XAML |
Copy Code
|
---|---|
<Intersoft:UXPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:Intersoft="http://intersoft.clientui.com/schemas" xmlns:Commands="clr-namespace:ClientUIApplication_Docs.Commands" x:Class="ClientUIApplication_Docs.RoutedCommands.EditorHybridCommand" Title="EditorHybridCommand Page" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <Intersoft:CommandManager.CommandBindings> <Intersoft:CommandBindingCollection> <Intersoft:CommandBinding Command="Commands:EditingCommands.Bold" CanExecute="BoldCmdCanExecute" Executed="BoldCmdExecuted"/> <Intersoft:HybridCommandBinding Command="Commands:EditingCommands.Bold" CanExecute="BoldCmdCanExecute" Executed="BoldCmdExecuted" CanQueryStatus="BoldCmdCanQueryStatus" QueryStatus="BoldCmdQueryStatus"/> </Intersoft:CommandBindingCollection> </Intersoft:CommandManager.CommandBindings> <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom"> <Intersoft:UXToolBar Name="toolBar1" Intersoft:DockPanel.Dock="Top"> <Intersoft:UXToolGroup> <Intersoft:UXToolBarButton Name="btn_Bold" Command="Commands:EditingCommands.Bold" IsToggleButton="True" DisplayMode="Image" Icon="../Images/BoldHS.png" ToolTipService.ToolTip="Bold"/> <Intersoft:UXToolBarButton Name="btn_Italic" Command="Commands:EditingCommands.Italic" IsToggleButton="True" DisplayMode="Image" Icon="../Images/ItalicHS.png" ToolTipService.ToolTip="Italic"/> </Intersoft:UXToolGroup> </Intersoft:UXToolBar> <RichTextBox Name="textBox1" Intersoft:DockPanel.IsFillElement="True"> <Paragraph> <Run Text="Type your text here..."/> </Paragraph> </RichTextBox> </Intersoft:DockPanel> </Grid> </Intersoft:UXPage> |
The following code example shows the event handler for CanQueryStatus and QueryStatus routed event for the HybridCommandBinding associated to the Bold command.
C# |
Copy Code
|
---|---|
using System.Windows; using System.Windows.Documents; using ClientUIApplication_Docs.Commands; using Intersoft.Client.Framework.Input; using Intersoft.Client.UI.Navigation; namespace ClientUIApplication_Docs.RoutedCommands { public partial class EditorHybridCommand : UXPage { public EditorHybridCommand() { EditingCommands.Initialize(); InitializeComponent(); textBox1.SelectionChanged += new RoutedEventHandler(textBox1_SelectionChanged); } private void BoldCmdCanQueryStatus(object sender, CanQueryStatusRoutedEventArgs e) { e.CanQueryStatus = true; } private void BoldCmdQueryStatus(object sender, QueryStatusRoutedEventArgs e) { if (e.Command == EditingCommands.Bold) { // notifies the current bold status to the command source // that bound to the Bold command. e.QueryParameter.Value = (FontWeight)textBox1.Selection. GetPropertyValue(Run.FontWeightProperty) == FontWeights.Bold; } } private void BoldCmdCanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } private void BoldCmdExecuted(object sender, ExecutedRoutedEventArgs e) { // apply bold formatting if the current selection is not bold yet. if ((FontWeight)textBox1.Selection.GetPropertyValue(Run.FontWeightProperty) == FontWeights.Bold) textBox1.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Normal); else textBox1.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Bold); } private void textBox1_SelectionChanged(object sender, RoutedEventArgs e) { CommandManager.InvalidateRequerySuggested(); } } } |
Walkthrough: Create Consistent UI for Rich Text Editor using Routed Command
Walkthrough: Create Windows 7 Explorer UI using Hybrid Command