Question

within my current project file I have a user control that has a storyboard animation applied to the control. When a button is clicked in the page the storyboard starts and basically visually presents the control to the user. The storyboard resides in the current page as a resource

<navigation:Page.Resources>
    <Storyboard x:Name="PreferncesOpen">....</Storyboard x:Name="PreferncesOpen">
        </navigation:Page.Resources>

Within the page I have button that I have a click event on that starts the storyboard

private void btnOpenPreferences_Click(object sender, RoutedEventArgs e)
    {
        preferencesPanel.Visibility = System.Windows.Visibility.Visible;
        PreferncesOpen.Begin();
    }

Within the userControl (preferencesPanel) I have a button that when clicked needs to close/collapse the user control. I plan to do this using Visibility.collapsed. I assume that I need to use routed commands since the button is within the user control but the actions need to be called within the page that contains the control? I’m still new to routed commands and I assume this is the correct approach. I’m just unsure how to click on a button within the user control and have it modify or execute commands that would impact how the page (in which this control resides) may change or for that part affect other elements within the page? For example when the button is clicked within the user control I would like the visibility of the user control to be set to collapsed. I also would like to have the width of one of the grid columns within the main page re-size. I have done this in the past using the code behind for the page but I am trying to separate some of this and I thought routed commands would be the way to go?
I’d greatly appreciate any tips.

Thank you in advance

Answer 1

The title is a bit misleading, you’re asking about commands rather then routed events if I understand you correctly.

Here’s an example of using a DelegateCommand<T> from the Prism library; It happens to be my personal preference.

Markup :

<Button x:Name="MyButton" Content="Btn" Command="{Binding DoSomethingCommand}"/>

Code-behind* or ViewModel :

(* if you’re not using MVVM make sure to add MyButton.DataContext = this; so you’re sure that the button can databind to your code behind effectively)

public DelegateCommand<object> DoSomethingCommand
{
    get 
    { 
        if(mDoSomethingCommand == null)
            mDoSomethingCommand = new DelegateCommand(DoSomething, canDoSomething);
        return mDoSomethingCommand;
    }

private DelegateCommand<object> mDoSomethingCommand;

// here's where the command is actually executed
void DoSomething(object o)
{}

// here's where the check is made whether the command can actually be executed
// insert your own condition here
bool canDoSomething(object o)
{ return true; }


// here's how you can force the command to check whether it can be executed
// typically a reaction for a PropertyChanged event or whatever you like
DoSomethingCommand.RaiseCanExecuteChanged();

The argument that’s passed to the above function is the CommandParameter dependency property (in Prism it’s an attached property as well as the Command property if memory serves me right).
When it’s set, you can pass a value of your choosing to the command that you wish to execute.

Hope that helps.