Questions on how to use

[Bernhard König]

I'm very happy you have introduced a ContextMenu with this release and as I hoped it's finally a performant implementation unlike the jaggy control in SL Toolkit.

But when trying to use it in my acutal project, I have problems on understanding how it works.

I like the possiblilty to put the context menu only on top of the listbox instead of every item (as this would also allow direct databinding to the VM instead of going over a code behind event and invoking the VM command from there, like I have to in the SL Toolkit control).
But: looking at the samples project I see there's some code needed to get this working. I see you have to do some manual positioning and finally getting the actual item that was clicked on in the command.

This is done by getting the visual ancestor of a control passed in in the parameter object to the Execute() method. Now here is where I hit a wall:

Where does the content of the parameter object come from?

It's a command, it can has a parameter. Ok. But in XAML, there is no parameter binding done in any way on each command binding. If I try this "at home", I also get NULL passed in this parameter, althought I have to say I'm not doing my own ICommand implementations but rather using RelayCommand<object> from the MVVM Light framework.

Just that you know what I want to achieve: I have a DataBoundListBox where I want to have a ContextMenu on each item. The ContextMenu can differ from item to item depending on what kind of item it is. I want to bind the Command of each ContextMenuItem to a VM command.

Having the limitation that I cannot bind to the VM in Silverlight for WP7 as I have no way to walk up the visual tree like in WPF with things like RelativeBinding/FindAncestor, I have done it in my current implementation with code behind event handlers that invoke the VM commands, passing in the right item as parameter. To view/hide individual menu items depending on the kind of item it is, I use VisualStates that collapse menu items I don't need.

So this is what I want to rebuild with your control now.

cheers,
Bernhard

[Victor]

Hello Bernhard König,

 Thank you for writing.
In the beta release we are aware of a problem related to setting bindings to the CommandParameter property of the context menu items. For some reason the bindings just don't work so we are temporarily setting the command parameters through code. We will do our best to figure out a workaround for this issue for the final release.

Also, in the final release, we have prepared a mechanism which will allow RadContextMenu to figure out which visual element should pop out when the context menu opens. What I mean by that is that RadContextMenu will have a semi-automatic way to walk up the element tree and find the correct element. For example, when you set a context menu to RadDataBoundListBox it will automatically know that it should open for a RadDataBoundListBoxItem. This list box item will be available in the event arguments of the opening event so that you may bind the menu to a specific data source (or populate it manually) that depends on the type of the item. Finally, since this item will be found automatically, there will no longer be a need for manual positioning.

I hope this information is helpful. Please write again if you have other questions.

Best wishes,
Victor
the Telerik team

[Bernhard König]

Hi Victor,

that sounds fantastic and would be exactly what I need! Being able to use the ContextMenu inside a Listbox just with binding and without any extra code will be a huge advantage over the SL Toolkit implemenation, besides the fact that your control already performs really smooth compared to the SL control.

Thanks for letting me know!

cheers,
Bernhard

[Nathan J Pledger]

Hi,

I guess I've just stumbled upon this, whereby the following code doesn't seem to bind anything to the CommandParameter (or menu option), I just get null.

<DataTemplate x:Key="ListBoxItemWithSourceTemplate">
    <StackPanel Orientation="Vertical"
                >

        <TextBlock TextWrapping="Wrap" Text="{Binding Value}" FontSize="{StaticResource PhoneFontSizeLarge}">
          <telerikPrimitives:RadContextMenu.ContextMenu>
            <telerikPrimitives:RadContextMenu IsFadeEnabled="False"
                                  IsZoomEnabled="False">
                <telerikPrimitives:RadContextMenuItem Content="{Binding Value}"
                                          Command="{Binding CopyTranslation}"
                                          CommandParameter="Translation"/>
                <telerikPrimitives:RadContextMenuItem Content="copy term"
                                          Command="{Binding CopyTerm}"
                                          CommandParameter="Term"/>
            </telerikPrimitives:RadContextMenu>

        </telerikPrimitives:RadContextMenu.ContextMenu>
        </TextBlock>
        <TextBlock TextWrapping="Wrap" Text="{Binding Source}" FontSize="{StaticResource PhoneFontSizeNormal}" Margin="15,0,0,0" Foreground="{StaticResource PhoneAccentBrush}" />
        <TextBlock TextWrapping="Wrap" Text="{Binding TranslatorDictionarySignature.Name}" FontSize="{StaticResource PhoneFontSizeSmall}" Margin="15,10,0,0" Foreground="{StaticResource PhoneSubtleBrush}" />
    </StackPanel>
</DataTemplate>

You mentioned "Final release". I'm using 2011 Q3 - is this not a "final release"? If not, when can we expect to see this code working?

Edit:
Just noticed code above has debugging code to prove that the value in CommandParameter was being passed. The true version would be:

<DataTemplate x:Key="ListBoxItemWithSourceTemplate">
    <StackPanel Orientation="Vertical"
                >

        <TextBlock TextWrapping="Wrap" Text="{Binding Value}" FontSize="{StaticResource PhoneFontSizeLarge}">
          <telerikPrimitives:RadContextMenu.ContextMenu>
            <telerikPrimitives:RadContextMenu IsFadeEnabled="False"
                                  IsZoomEnabled="False">
                <telerikPrimitives:RadContextMenuItem Content="{Binding Value}"
                                          Command="{Binding CopyTranslation}"
                                          CommandParameter="{Binding Value}"/>
                <telerikPrimitives:RadContextMenuItem Content="copy term"
                                          Command="{Binding CopyTerm}"
                                          CommandParameter="{Binding Source}"/>
            </telerikPrimitives:RadContextMenu>

        </telerikPrimitives:RadContextMenu.ContextMenu>
        </TextBlock>
        <TextBlock TextWrapping="Wrap" Text="{Binding Source}" FontSize="{StaticResource PhoneFontSizeNormal}" Margin="15,0,0,0" Foreground="{StaticResource PhoneAccentBrush}" />
        <TextBlock TextWrapping="Wrap" Text="{Binding TranslatorDictionarySignature.Name}" FontSize="{StaticResource PhoneFontSizeSmall}" Margin="15,10,0,0" Foreground="{StaticResource PhoneSubtleBrush}" />
    </StackPanel>
</DataTemplate>

[Victor]

Hi Nathan,

 I have attached a sample application that demonstrates a working RadContextMenu. Do note that you need to use RadControls For Windows Phone Q3 2011_3_1303 (an internal build) or later.

Please write again if you are still experiencing problems.

Greetings,
Victor
the Telerik team

[Nathan J Pledger]

Thanks Victor. I have downloaded the interim build and it now binds to the values accordingly.
However, now I can't bind against my RelayCommands in my ViewModel ... they no longer "fire" ....

    public class TranslateViewModel : ExtendedViewModelBase

    {

        public RelayCommand<string> CopyTerm { get; private set; }

        public RelayCommand<string> CopyTranslation { get; private set; }

 

 

        public TranslateViewModel()

        {

            if (IsInDesignMode)

            {

            else

            {

                // Code runs "for real"

                CopyTerm = new RelayCommand<string>((t) =>

                    {

                        SetClipboardText((string)t); // breakpoint here does not fire

                    });


                CopyTranslation = new RelayCommand<string>((t) =>

                    {

                        SetClipboardText((string)t); // breakpoint here does not fire

                    });

            }

        }

 

     

 

        private void SetClipboardText(string text)

        {

            Clipboard.SetText(text);

            MessageBox.Show(string.Format("The text '{0}' is now in your clipboard.",text));

        }

    }

}

[Nathan J Pledger]

The Code Formatter has a bug in it and I forgot that I had to enter a few lines, go back up and THEN paste in the Code Block, so I've added a bit more:

I haven't changed anything of material value on the XAML side of things. I didn't see that I needed to based on your example?

[Victor]

Hi Nathan,

 Please explain in more detail how you are using your view model. When you have a context menu in the data template of a listbox item, the data context of the menu is the data item of the list box item. If you need to bind to the view model you have to explicitly bind to it. Is your listbox bound to a list of view models? Does your RelayCommand class implement the ICommand interface?

I am looking forward to your reply.

Greetings,
Victor
the Telerik team

[Bernhard König]

Hi Victor,

I was finally able to implement your RTM ContextMenu control now into my app and I just wanted to let you know it works like a charm now. It is so much better than the Silverlight Toolkit's control, it performs much better and it is much easier to work with.

The only issue I have is that I need to write code behind code to handle a special behavior for single items (show/hide menu items over specific list items) what I would prefer to do via ViewModel bindings, but this is more a problem because of Silverlight for WP's binding limitations than your control.

So thanks again, your control is a great help!

Bernhard