RadCollectionNavigator: Commands binding to ViewModel

[Birgit]

Hello

is it possible, to bind the Edit-Button to a Command in ViewModel?

If it's not possible: could i place a Custom-Button (with VM-Command-Binding) inside the RadCollectionNavigator?

 

Kind regards

Birgit

 

[Birgit]

I copied this whole code into my view, so I can bind the Edit button to a command in my ViewModel. This is very elaborate, I hope there is a simple solution. The control should be a bit more dynamic for WPF.

<DataTemplate x:Key="NavigationActionTemplate">
    <Grid>
        <!--Navigation-->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <telerik:RadButton x:Name="MoveCurrentToFirst"
                               Style="{StaticResource CollectionNavigatorButtonStyle}"
                               Visibility="{Binding NavigationButtonsVisibility}"
                               RenderTransformOrigin="0.5,0.5"
                               Command="{Binding MoveToFirstCommand}">
                <ToolTipService.ToolTip>
                    <ToolTip telerik:LocalizationManager.ResourceKey="DataForm_MoveCurrentToFirst"/>
                </ToolTipService.ToolTip>
                <Path Data="M5,0 L5,7.5 L1,4 z M0,0 L1,0 L1,4 L1,8 L0,8 z"
                      Fill="{telerik:Windows8Resource ResourceKey=MarkerBrush}"
                      Stretch="Fill"
                      RenderTransformOrigin="0.5,0.5"
                      Width="5" Height="8">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </telerik:RadButton>
            <telerik:RadButton x:Name="MoveCurrentToPrevious"
                               Style="{StaticResource CollectionNavigatorButtonStyle}"
                               Visibility="{Binding NavigationButtonsVisibility}"
                               RenderTransformOrigin="0.5,0.5"
                               Command="{Binding MoveToPreviousCommand}">
                <ToolTipService.ToolTip>
                    <ToolTip telerik:LocalizationManager.ResourceKey="DataForm_MoveCurrentToPrevious"/>
                </ToolTipService.ToolTip>
                <Path Fill="{telerik:Windows8Resource ResourceKey=MarkerBrush}" Stretch="Fill" Data="M0,0 L7,0 L3.4999998,4 z" RenderTransformOrigin="0.5,0.5" Width="7" Height="4">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </telerik:RadButton>
            <telerik:RadButton x:Name="MoveCurrentToNext"
                               Style="{StaticResource CollectionNavigatorButtonStyle}"
                               Visibility="{Binding NavigationButtonsVisibility}"
                               RenderTransformOrigin="0.5,0.5"
                               Command="{Binding MoveToNextCommand}">
                <ToolTipService.ToolTip>
                    <ToolTip telerik:LocalizationManager.ResourceKey="DataForm_MoveCurrentToNext"/>
                </ToolTipService.ToolTip>
                <Path Fill="{telerik:Windows8Resource ResourceKey=MarkerBrush}" Stretch="Fill" Data="M0,0 L7,0 L3.4999998,4 z" RenderTransformOrigin="0.5,0.5" Width="7" Height="4">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <telerik:RadButton.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="-1"/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </telerik:RadButton.RenderTransform>
            </telerik:RadButton>
            <telerik:RadButton x:Name="MoveCurrentToLast"
                               Style="{StaticResource CollectionNavigatorButtonStyle}"
                               Visibility="{Binding NavigationButtonsVisibility}"
                               RenderTransformOrigin="0.5,0.5"
                               Command="{Binding MoveToLastCommand}">
                <ToolTipService.ToolTip>
                    <ToolTip telerik:LocalizationManager.ResourceKey="DataForm_MoveCurrentToLast"/>
                </ToolTipService.ToolTip>
                <Path Fill="{telerik:Windows8Resource ResourceKey=MarkerBrush}" Stretch="Fill" Data="M5,0.5 L5,7.5 L1,4 z M0,0 L1,0 L1,4 L1,8 L0,8 z" RenderTransformOrigin="0.5,0.5" Width="5" Height="8">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <telerik:RadButton.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="-1"/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </telerik:RadButton.RenderTransform>
            </telerik:RadButton>
        </StackPanel>

        <!--Actions-->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <telerik:RadMenuItem Command="{Binding OpenItemCommand}" BorderThickness="0">
                <telerik:RadMenuItem.Icon>
                    <TextBlock FontFamily="{StaticResource TelerikWebUI}"
                               FontSize="16"
                               Text="{StaticResource GlyphEdit}"
                               FontWeight="Normal"
                               Foreground="{telerik:Office2016Resource ResourceKey=IconBrush}"/>
                </telerik:RadMenuItem.Icon>
                <ToolTipService.ToolTip>
                    <ToolTip Content="Kulanz öffnen"/>
                </ToolTipService.ToolTip>
            </telerik:RadMenuItem>
        </StackPanel>
    </Grid>
</DataTemplate>

[Dilyan Traykov]

Hello Birgit,

In order to achieve the desired behavior, you can set a custom command provider for your RadCollectionNavigator and override the BeginEdit method.

To execute a custom command from you view model, you can create a custom control which inherits from RadCollectionNavigator and define an ICommand dependency property which will be used to pass the command to the custom collection navigator.

Here's what I have in mind:

public class CustomCollectionNavigator : RadCollectionNavigator
{
    public static readonly DependencyProperty EditCommandProperty =
    DependencyProperty.Register(
    "EditCommand",
    typeof(ICommand),
    typeof(CustomCollectionNavigator),
    new PropertyMetadata(OnEditCommandChanged));

    private static void OnEditCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var cn = d as CustomCollectionNavigator;
        (cn.CommandProvider as CustomCommandProvider).EditCommand = e.NewValue as ICommand;
    }

    public ICommand EditCommand
    {
        get
        {
            return (ICommand) GetValue(EditCommandProperty);
        }

        set
        {
            SetValue(EditCommandProperty, value);
        }
    }

    public CustomCollectionNavigator()
    {
        this.CommandProvider = new CustomCommandProvider(this.EditCommand);
    }
}

public class CustomCommandProvider : CollectionNavigatorBaseCommandProvider
{
    public ICommand EditCommand { get; set; }

    public CustomCommandProvider(ICommand command) : base(null)
    {
        this.EditCommand = command;
    }
    public CustomCommandProvider(RadCollectionNavigator collectionNavigator)
        : base(collectionNavigator)
    {

    }

    public override void BeginEdit()
    {
        this.EditCommand.Execute(null);
        //base.BeginEdit();
    }
}

<my:CustomCollectionNavigator EditCommand="{Binding EditCommand}" />

Please let me know whether such an approach would work for you.

Regards,
Dilyan Traykov
Progress Telerik

[Birgit]

Hi Dilyan

 

Thank you for your reply.

I will try this and replace my various actions with the CustomCommandProvider. I will give feedback as soon as I get to it.

 

Kind Regards

Birgit

 

[Dilyan Traykov]

Hello Birgit,

Do inform me once you get a chance to test this out. I'm looking forward to your reply.

Regards,
Dilyan Traykov
Progress Telerik

[Birgit]

Hi Dilyan

 

I'm still trying to get your code running. The default RadCollectionNavigator is no Problem, but if I take your code, the NavigationCollection is no longer visible.

<!--<telerik:RadCollectionNavigator Grid.Row="1" Height="30" Margin="0" Source="{Binding ItemView}"/>-->
       <controls:CustomCollectionNavigator Grid.Row="1" Height="30" Margin="0" Source="{Binding ItemView}" EditCommand="{Binding OpenItemCommand}"/>

 

Kind regards

Birgit

[Dilyan Traykov]

Hello Birgit,

The reason the CustomCollectionNavigator is not visible is most probably because you're using implicit styles. In such case, custom controls will not automatically receive the inherited control's style and you need to base your custom style on the default style of the control that is inherited.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/System.Windows.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Data.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="my:CustomCollectionNavigator" BasedOn="{StaticResource RadCollectionNavigatorStyle}" />
    </ResourceDictionary>
</Application.Resources>

Please let me know if this solves your issue.

Regards,
Dilyan Traykov
Progress Telerik