RadCollectionNavigator: Commands binding to ViewModel

7 posts, 0 answers
  1. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 12 Jul Link to this post

    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

     

  2. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 12 Jul in reply to Birgit Link to this post

    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>
  3. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    603 posts

    Posted 14 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 14 Jul in reply to Dilyan Traykov Link to this post

    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

     

  5. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    603 posts

    Posted 17 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 17 Jul in reply to Dilyan Traykov Link to this post

    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

  7. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    603 posts

    Posted 18 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top