WPF bind a dynamic generated slider to function

Question

First: Not a duplicate of Binding Button click to a method --- it's about button, and Relay command can't pass the arguments I need

Also, not a duplicate of How do you bind a Button Command to a member method? - it's a simple method with no arguments - nothing to do with my question.

Obviously (but just to make sure and avoid trolls) not a duplicate of this either Silverlight MVVM: where did my (object sender, RoutedEventArgs e) go?.

Now after clearing this (sorry, I am just really sick of being marked as "duplicate" by people who didn't understand my question), let's talk about the issue: :D

I am trying to bind a generated slider (using data template) to an event (value changed), I know it's impossible to bind an event and I must use ICommand, but I don't know how to get the event arguments to the command function, this is the xaml relevant code: (without the binding since it doesnt work)

<Slider Grid.Column="1"  Grid.Row="1" Height="30" IsSnapToTickEnabled="True"  Maximum="100" SmallChange="1" IsMoveToPointEnabled="True"/>

And this is the function I want it to be binded to:

public void vibrationSlider_move(object Sender, RoutedPropertyChangedEventArgs<double> e)
        {
            VibrationValue = (byte)e.NewValue;
            SendPacket(cockpitType, (byte)Index.VibrationSlider, VibrationValue);
        }

As you can see, I need to use the 'e' coming with the event, I have no idea how to reach it without using the "ValueChanged" slider event.

Notes:

Please don't tell me to add the "ValueChanged" attribute like this:

<Slider ValueChanged="VibrationSlider_move"/>

:)

It's a generated dynamic slider using DataTemplate with an observableCollection, the function isn't in the window.cs file, therefore just using an event is not possible.

Thank you.

ohh... why so negative. – Mikko Viitala Jan 03 '16 at 15:44 — Mikko Viitala, Jan 03 '16 at 15:44
Not negatve :) just over cautious, I will add some smiles! – Guy Ben-Moshe Jan 03 '16 at 15:50 — Guy Ben-Moshe, Jan 03 '16 at 15:50

score 4 · Answer 1 · answered Jan 03 '16 at 16:12

You can use the MVVMLight Toolkit, which allows to send the EventArgs as CommandParameter to the ViewModel:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="ValueChanged">
        <cmd:EventToCommand Command="{Binding ValueChangedCommand}" PassEventArgsToCommand="True"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

In your command.Execute method, you now get an object as parameter which you just have to parse to the correct type...

Mikko Viitala · Answer 2 · 2016-01-03T17:07:32.513

As @Philip W stated, you could use e.g. MVVMLight to help dealing with MVVM pattern and with your problem at hand.

You could, for example, have a XAML with DataTemplate and Slider like so:

<Window x:Class="WpfApplication1.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:command="http://www.galasoft.ch/mvvmlight"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="250" 
        Width="250">
    <Window.Resources>
        <DataTemplate x:Key="SomeTemplate">
            <StackPanel Margin="15">
                <!-- Wrong DataContext can drive you mad!1 -->
                <StackPanel.DataContext>
                    <local:SomeTemplateViewModel />
                </StackPanel.DataContext>
                <TextBlock Text="This is some template"/>
                <Slider 
                    Height="30" 
                    IsSnapToTickEnabled="True" 
                    Maximum="100" 
                    SmallChange="1" 
                    IsMoveToPointEnabled="True">
                    <!-- Bind/pass event as command -->
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="ValueChanged">
                            <command:EventToCommand 
                        Command="{Binding Mode=OneWay, Path=ValueChangedCommand}"
                        PassEventArgsToCommand="True" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Slider>
                <!-- Show current value, just for sake of it... -->
                <TextBlock 
                    Text="{Binding Value}"
                    FontWeight="Bold"
                    FontSize="24">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <ContentControl ContentTemplate="{StaticResource SomeTemplate}" />
</Window>

So basically you bind desired event to named Command and pass EventArgs to it as parameter. Then in your ViewModel, being the DataContext of you Slider, you handle the event-passed-as-command.

public class SomeTemplateViewModel : ViewModelBase
{
    private double _value;

    public SomeTemplateViewModel()
    {
        // Create command setting Value as Slider's NewValue
        ValueChangedCommand = new RelayCommand<RoutedPropertyChangedEventArgs<double>>(
            args => Value = args.NewValue);
    }

    public ICommand ValueChangedCommand { get; set; }

    public double Value
    {
        get { return _value; }
        set { _value = value; RaisePropertyChanged(); } // Notify UI
    }
}

This would give you something similar to this.

Hey Mikko thanks for the super detailed answer, I'm having hard time using the "" labels, do I need to install or use some kind of package? I am not familiar with the MVVMLight pattern — Guy Ben-Moshe, Jan 03 '16 at 16:57
Added the missing imports to XAML code. You need to download MVVMLight via NuGet Package Manager. — Mikko Viitala, Jan 03 '16 at 17:08
I'm not sure, but I think you also have to add System.Windows.Interactivity to your References. And instead of adding the complete MVVMLight NuGet package, you could just copy&paste the relevant EventToCommand class from the repository... — Philip W, Jan 03 '16 at 17:11
It's amazing how complicate this have to be, I dont understand how Microsoft haven't just implemented binding a function to an event... — Guy Ben-Moshe, Jan 03 '16 at 17:29

score 2 · Accepted Answer · answered Jan 04 '16 at 07:29

You could create an extension

public partial class Extensions
{
    public static readonly DependencyProperty ValueChangedCommandProperty = DependencyProperty.RegisterAttached("ValueChangedCommand", typeof(ICommand), typeof(Extensions), new UIPropertyMetadata((s, e) =>
    {
        var element = s as Slider;

        if (element != null)
        {
            element.ValueChanged -= OnSingleValueChanged;

            if (e.NewValue != null)
            {
                element.ValueChanged += OnSingleValueChanged;
            }
        }
    }));

    public static ICommand GetValueChangedCommand(UIElement element)
    {
        return (ICommand)element.GetValue(ValueChangedCommandProperty);
    }

    public static void SetValueChangedCommand(UIElement element, ICommand value)
    {
        element.SetValue(ValueChangedCommandProperty, value);
    }

    private static void OnSingleValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        var element = sender as Slider;
        var command = element.GetValue(ValueChangedCommandProperty) as ICommand;

        if (command != null && command.CanExecute(element))
        {
            command.Execute(element);
            e.Handled = true;
        }
    }
}

which then can be used in xaml as below.

<Slider Minimum="0" Maximum="100" local:Extensions.ValueChangedCommand="{Binding ValueChangedCommand}"/>

I created a whole new class named "Extentions" and copied that code, it says "local is an undeclard prefix" about the xaml line, any idea why? — Guy Ben-Moshe, Jan 07 '16 at 15:03
Because you need to add the namespace for the extensions in the xaml declaration. — Janne Matikainen, Jan 07 '16 at 17:31

score 0 · Answer 4 · edited May 23 '17 at 12:03

Since your slider is dynamically generated, nothing prevents you from adding your ValueChanged event at a later time:

XAML:

<Slider x:Name="slider" HorizontalAlignment="Left" Margin="10,143,0,0" VerticalAlignment="Top" Width="474" Grid.ColumnSpan="2" />

Code-behind:

public MainWindow()
{
    InitializeComponent();

    // it is a good idea to not allow designer to execute custom code
    if (DesignerProperties.GetIsInDesignMode(this))
       return;

    slider.ValueChanged += Slider_ValueChanged;
}

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    // do your stuff here
}

Checking design mode is not simple in any context, as pointed out here.

WPF bind a dynamic generated slider to function

4 Answers4