Using C1ToolbarCommand

1.   Open or create a new Silverlight application.

2.   Add two RowDefinitions to the default Grid element, giving the first row an automatic height, such as this:

<Grid.RowDefinitions>

    <RowDefinition Height="Auto" />

    <RowDefinition />

</Grid.RowDefinitions>

3.   Add a C1Toolbar to the fill the first row.

4.   Add a TextBox in the second row.

5.   Paste the following C1ToolbarCommand to the UserControl Resources such as this:

<UserControl.Resources>

    <c1:C1ToolbarCommand x:Key="cmdClear" LabelTitle="Clear Text" LargeImageSource="/Resources/delete.png" />

</UserControl.Resources>

This command will be used to clear the contents from the TextBox. You can specify a LargeImageSource and a SmallImageSource for C1ToolbarCommand, although this is not required.

6.   Paste the following XAML to fill C1Toolbar with a tab, group and button:

<c1:C1Toolbar Name="c1Toolbar1">

    <c1:C1ToolbarTabControl>

        <c1:C1ToolbarTabItem Header="Home">

            <c1:C1ToolbarGroup Header="Application">

                <c1:C1ToolbarButton c1:CommandExtensions.Command="{StaticResource cmdClear}" />

            </c1:C1ToolbarGroup>

        </c1:C1ToolbarTabItem>

    </c1:C1ToolbarTabControl>

</c1:C1Toolbar>

Here we are setting the attached c1:CommandExtensions.Command property to our command. Note that C1ToolbarButton also has an inherited Command property. It is better to use the attached property CommandExtensions.Command to set the command when using C1Commands.

7.   Add a TextBox to the page below the toolbar named “textBox1”

8.   Next, you need to register the command after the page initializes with this code:

// register command methods

CommandManager.RegisterClassCommandBinding(GetType(), new CommandBinding((C1ToolbarCommand)Resources["cmdClear"], Clear, CanClear));

// check the ability of registered commands to execute

CommandManager.InvalidateRequerySuggested();

The C1.Silverlight.CommandManager provides command related utility methods for registering commands. Here we pass event handlers for the Clear and CanClear

9.   Paste the following Clear and CanClear event handlers which perform the logic for the command:

private void Clear(object sender, ExecutedRoutedEventArgs e)

{

    textBox1.Text = "";

}

private void CanClear(object sender, CanExecuteRoutedEventArgs e)

{

    if (textBox1.Text.Length > 0)

    {

        e.CanExecute = true;

    }

    else

        e.CanExecute = false;

}

10.  In Silverlight you need to explicitly check the ability of registered commands in code. In the TextBox TextChanged event, add the following code:

private void textBox1_TextChanged(object sender, TextChangedEventArgs e)

{

    CommandManager.InvalidateRequerySuggested();

}

11.  Run the sample and you can now clear the contents of the textbox using a command in C1Toolbar using C1Command.