Re: Begin a storyboard in a ControlTemplate - WPF Discussion Boards

If there are no side-effects, works for me too.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Create a WPF custom control with Polygon. What can we do to Load 100000 of this custom control in a Canvas in under 2secs?

As you have written it I could say get better hardware.

In reality, it really would depend on what you want to do with the polygons? Hit testing etc? How are you drawing these, with DrawingVisuals? The best option would perhaps be to leverage DirectX directly?

So I was reading the documentation about Prism 7: Composing the User Interface Using the Prism Library 5.0 for WPF[^] and downloaded the source code for the application here:
Prism for WPF Reference Implementation Code Sample in C# for Visual Studio 2013[^]

I really liked the animated TabControl and thought I'd implement it based on that application. The trouble was that when I implemented it on a different new solution I ran into a problem with the animated Template.

<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>

    <Style TargetType="Controls:AnimatedTabControl">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Padding" Value="4,4,4,4"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
        <Setter Property="Background" Value="#F9F9F9"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:AnimatedTabControl">

                    <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <Border Height="30" Margin="10,0,10,10"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Grid.Row="1" CornerRadius="12,12,12,12" Background="{TemplateBinding Background}" BorderThickness="2,2,2,2" BorderBrush="#FFFFFFFF">
                            <TabPanel x:Name="HeaderPanel" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="true" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
                        </Border>

                        <Grid Grid.Row="1" Margin="0,40,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Viewport3D x:Name="vp3D" Visibility="Hidden" Width="Auto" Height="Auto">
                                <Viewport3D.Camera>
                                    <PerspectiveCamera x:Name="camera" Position="0,0,0.5" LookDirection="0,0,-1" FieldOfView="90" />
                                </Viewport3D.Camera>
                                <Viewport3D.Children>
                                    <ModelVisual3D>
                                        <ModelVisual3D.Content>
                                            <Model3DGroup>
                                                <DirectionalLight Color="#444" Direction="0,0,-1" />
                                                <AmbientLight Color="#BBB" />
                                            </Model3DGroup>
                                        </ModelVisual3D.Content>
                                    </ModelVisual3D>
                                    <ModelVisual3D>
                                        <ModelVisual3D.Content>
                                            <GeometryModel3D>
                                                <GeometryModel3D.Geometry>
                                                    <MeshGeometry3D  TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0" Positions="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0" />
                                                </GeometryModel3D.Geometry>
                                                <GeometryModel3D.Material>
                                                    <DiffuseMaterial>
                                                        <DiffuseMaterial.Brush>
                                                            <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform" />
                                                        </DiffuseMaterial.Brush>
                                                    </DiffuseMaterial>
                                                </GeometryModel3D.Material>
                                                <GeometryModel3D.BackMaterial>
                                                    <DiffuseMaterial>
                                                        <DiffuseMaterial.Brush>
                                                            <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform">
                                                                <VisualBrush.RelativeTransform>
                                                                    <ScaleTransform ScaleX="-1" CenterX="0.5" />
                                                                </VisualBrush.RelativeTransform>
                                                            </VisualBrush>
                                                        </DiffuseMaterial.Brush>
                                                    </DiffuseMaterial>
                                                </GeometryModel3D.BackMaterial>
                                                <GeometryModel3D.Transform>
                                                    <RotateTransform3D>
                                                        <RotateTransform3D.Rotation>
                                                            <AxisAngleRotation3D x:Name="rotate" Axis="0,3,0" Angle="0" />
                                                        </RotateTransform3D.Rotation>
                                                    </RotateTransform3D>
                                                </GeometryModel3D.Transform>
                                            </GeometryModel3D>
                                        </ModelVisual3D.Content>
                                    </ModelVisual3D>
                                </Viewport3D.Children>
                            </Viewport3D>
                            <Border x:Name="BorderOut" VerticalAlignment="Stretch">
                                <Border x:Name="BorderIn" VerticalAlignment="Stretch" Background="#00000000" >
                                    <Grid>
                                        <Controls:RoundedBox Margin="10" />
                                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="20"/>
                                    </Grid>
                                </Border>
                            </Border>
                        </Grid>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Controls:AnimatedTabControl.SelectionChanging">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="vp3D"  Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
                                        <DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Hidden}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation To="0" Duration="0:0:0.05" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation BeginTime="0:0:1.05" Duration="0:0:0.05" To="1" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" />
                                    <Point3DAnimation To="0,0,1.1" From="0,0,0.5"  BeginTime="0:0:0.05" Duration="0:0:0.5" AutoReverse="True" DecelerationRatio="0.3"  Storyboard.TargetName="camera" 
                                            Storyboard.TargetProperty="(PerspectiveCamera.Position)" />
                                    <DoubleAnimation From="0" To="180" AccelerationRatio="0.3" DecelerationRatio="0.3" BeginTime="0:0:0.05" Duration="0:0:1"  Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>


            </Setter.Value>
        </Setter>
    </Style>

It first complained that I could not find any of the TargetName's in the storyboard. I replaced the targetnames with a binding TargetName="{Binding Element=vp3D}" etc, so It now found the properties. However, that only resulted in a new error, namely that "Cannot freeze this Storyboard timeline tree for use across threads". I think I figured out why, or sort of why:
https://social.msdn.microsoft.com/Forums/vstudio/en-US/9336022f-badb-4b40-a86c-a50ab1a64ba5/cannot-freeze-this-storyboard-timeline-tree-for-use-across-threads?forum=wpf

But I have no idea about what to do to fix the issue. I tried to define the storyboard as a Static resource, but the same error persisted. If I comment out the Storyboard code the TabControl works as expected. What am I missing here?

The problem you're facing is that you cannot have a Binding inside a storyboard. Fortunately, you might be able to leverage the technique here[^] to help solve this.

This space for rent

WPF won't let me play today, I can't seem to make the trick work. However, I have to say that not being able to make bindings on a ControlTemplate animation seems to be quite the limitation. What do pros do to make this work? Code behind?

I would use a Behavior to solve this.

This space for rent

Right, I thought I'd give the original implementation a run out to see what your problem might be. The first thing I did (once I'd created a Wpf application ready to test this), was to create AnimatedTabControl.cs. It contains this code:

C#

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace WpfTabSample
{
    public class AnimatedTabControl : TabControl
    {
        public static readonly RoutedEvent SelectionChangingEvent = EventManager.RegisterRoutedEvent(
            "SelectionChanging", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(AnimatedTabControl));

        private DispatcherTimer timer;

        public AnimatedTabControl()
        {
            DefaultStyleKey = typeof(AnimatedTabControl);
        }

        public event RoutedEventHandler SelectionChanging
        {
            add { AddHandler(SelectionChangingEvent, value); }
            remove { RemoveHandler(SelectionChangingEvent, value); }
        }

        protected override void OnSelectionChanged(SelectionChangedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(
                (Action)delegate
                {
                    this.RaiseSelectionChangingEvent();

                    this.StopTimer();

                    this.timer = new DispatcherTimer { Interval = new TimeSpan(0, 0, 0, 0, 500) };

                    EventHandler handler = null;
                    handler = (sender, args) =>
                    {
                        this.StopTimer();
                        base.OnSelectionChanged(e);
                    };
                    this.timer.Tick += handler;
                    this.timer.Start();
                });
        }

        // This method raises the Tap event 
        private void RaiseSelectionChangingEvent()
        {
            var args = new RoutedEventArgs(SelectionChangingEvent);
            RaiseEvent(args);
        }

        private void StopTimer()
        {
            if (this.timer != null)
            {
                this.timer.Stop();
                this.timer = null;
            }
        }
    }
}

Next I added in a XAML usercontrol, called RoundedBox. It looks like this:

XML

<UserControl x:Class="WpfTabSample.RoundedBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfTabSample"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid Margin="-6,-5,-12,-13">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="27"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="27"/>
            </Grid.RowDefinitions>
            <!--<Image Height="20" Width="20" Source="../Resources/shadow_tl.png" Stretch="Fill"/>
            <Image Height="20" Grid.Column="1" Source="../Resources/shadow_t.png" Stretch="Fill"/>
            <Image Height="20" Width="27" Grid.Column="2" Source="../Resources/shadow_tr.png" Stretch="Fill"/>
            <Image Width="27" Grid.Column="2" Grid.Row="1" Source="../Resources/shadow_r.png" Stretch="Fill"/>
            <Image Width="20" Grid.Row="1" Source="../Resources/shadow_l.png" Stretch="Fill"/>
            <Image Height="27" Grid.Column="1" Grid.Row="2" Source="../Resources/shadow_b.png" Stretch="Fill" />
            <Image Height="27" Width="20" Grid.Row="2" Source="../Resources/shadow_bl.png" Stretch="Fill"/>
            <Image Height="27" Width="27" Grid.Column="2" Grid.Row="2" Source="../Resources/shadow_br.png" Stretch="Fill"/>-->
        </Grid>
        <Border Background="#99FFFFFF" Opacity="0.8" CornerRadius="12,12,12,12" VerticalAlignment="Stretch" />
    </Grid>
</UserControl>

You may notice that I have commented out the Image entries rather than downloading the png files. Finally, I rewrote the MainWindow.xaml file so that it looked like this:

XML

<Window x:Class="WpfTabSample.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:Controls="clr-namespace:WpfTabSample"
        mc:Ignorable="d" UseLayoutRounding="True"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>

        <Style TargetType="Controls:AnimatedTabControl">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Padding" Value="4,4,4,4"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
            <Setter Property="Background" Value="#F9F9F9"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Controls:AnimatedTabControl">

                        <Grid ClipToBounds="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Border Height="30" Margin="10,0,10,10"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Grid.Row="1" CornerRadius="12,12,12,12" Background="{TemplateBinding Background}" BorderThickness="2,2,2,2" BorderBrush="#FFFFFFFF">
                                <TabPanel x:Name="HeaderPanel" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="true" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
                            </Border>

                            <Grid Grid.Row="1" Margin="0,40,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Viewport3D x:Name="vp3D" Visibility="Hidden" Width="Auto" Height="Auto">
                                    <Viewport3D.Camera>
                                        <PerspectiveCamera x:Name="camera" Position="0,0,0.5" LookDirection="0,0,-1" FieldOfView="90" />
                                    </Viewport3D.Camera>
                                    <Viewport3D.Children>
                                        <ModelVisual3D>
                                            <ModelVisual3D.Content>
                                                <Model3DGroup>
                                                    <DirectionalLight Color="#444" Direction="0,0,-1" />
                                                    <AmbientLight Color="#BBB" />
                                                </Model3DGroup>
                                            </ModelVisual3D.Content>
                                        </ModelVisual3D>
                                        <ModelVisual3D>
                                            <ModelVisual3D.Content>
                                                <GeometryModel3D>
                                                    <GeometryModel3D.Geometry>
                                                        <MeshGeometry3D  TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0" Positions="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0" />
                                                    </GeometryModel3D.Geometry>
                                                    <GeometryModel3D.Material>
                                                        <DiffuseMaterial>
                                                            <DiffuseMaterial.Brush>
                                                                <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform" />
                                                            </DiffuseMaterial.Brush>
                                                        </DiffuseMaterial>
                                                    </GeometryModel3D.Material>
                                                    <GeometryModel3D.BackMaterial>
                                                        <DiffuseMaterial>
                                                            <DiffuseMaterial.Brush>
                                                                <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform">
                                                                    <VisualBrush.RelativeTransform>
                                                                        <ScaleTransform ScaleX="-1" CenterX="0.5" />
                                                                    </VisualBrush.RelativeTransform>
                                                                </VisualBrush>
                                                            </DiffuseMaterial.Brush>
                                                        </DiffuseMaterial>
                                                    </GeometryModel3D.BackMaterial>
                                                    <GeometryModel3D.Transform>
                                                        <RotateTransform3D>
                                                            <RotateTransform3D.Rotation>
                                                                <AxisAngleRotation3D x:Name="rotate" Axis="0,3,0" Angle="0" />
                                                            </RotateTransform3D.Rotation>
                                                        </RotateTransform3D>
                                                    </GeometryModel3D.Transform>
                                                </GeometryModel3D>
                                            </ModelVisual3D.Content>
                                        </ModelVisual3D>
                                    </Viewport3D.Children>
                                </Viewport3D>
                                <Border x:Name="BorderOut" VerticalAlignment="Stretch">
                                    <Border x:Name="BorderIn" VerticalAlignment="Stretch" Background="#00000000" >
                                        <Grid>
                                            <Controls:RoundedBox Margin="10" />
                                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="20"/>
                                        </Grid>
                                    </Border>
                                </Border>
                            </Grid>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Controls:AnimatedTabControl.SelectionChanging">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="vp3D"  Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
                                            <DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Hidden}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation To="0" Duration="0:0:0.05" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" />
                                        <DoubleAnimation BeginTime="0:0:1.05" Duration="0:0:0.05" To="1" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" />
                                        <Point3DAnimation To="0,0,1.1" From="0,0,0.5"  BeginTime="0:0:0.05" Duration="0:0:0.5" AutoReverse="True" DecelerationRatio="0.3"  Storyboard.TargetName="camera" 

                                            Storyboard.TargetProperty="(PerspectiveCamera.Position)" />
                                        <DoubleAnimation From="0" To="180" AccelerationRatio="0.3" DecelerationRatio="0.3" BeginTime="0:0:0.05" Duration="0:0:1"  Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>


                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Controls:AnimatedTabControl>
            <TabItem Header="One" />
            <TabItem Header="Two" />
            <TabItem Header="Three" />
        </Controls:AnimatedTabControl>
    </Grid>
</Window>

(Note - I removed the SnapsToDevicePixels and set UsesLayoutRounding for the Window instead; this is a performance enhancement but not strictly necessary for your problem).

This space for rent

It's working now, thank you so much. Smile | :)

I had implemented the two first items but I got my error in the XAML file so I just posted that. The pictures you commented out just creates some nice shader effects. But, I'm not quite sure why It didn't work for me. D'Oh! | :doh:

I'm pleased you got it working.

This space for rent

I'm working on a ComboBoxEdit Control

I got the idea from this.

The trick was to add to the buttons to control template. No problem there.

So to use it I have:
XAML

<cbe:ComboBoxEdit Height="32"
                    Width="350"
                    ItemsSource="{Binding Items}"
                    SelectedItem="{Binding SelectedItem}"
                    PopupFooterButtons="OkCancel"
                    VerticalAlignment="Top"
                    Margin="5,20,0,0">

<pre>
<ComboBox.ItemTemplate>

    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsItemChecked}"
                        Margin="2"/>
            <TextBlock Text="{Binding Caption}"
                        Margin="2"/>
        </StackPanel>
    </DataTemplate>

</ComboBox.ItemTemplate>

Code Behind

public MainWindow()
{
    InitializeComponent();
    this.DataContext = this;
    Items = new ObservableCollection<Item>
    {
        new Item
        {
            Caption = "Awarded",
            IsItemChecked = false
        },
        new Item
        {
            Caption = "Bidding",
            IsItemChecked = true
        },
        new Item
        {
            Caption = "Cancelled",
            IsItemChecked = false
        },
        new Item
        {
            Caption = "Completed",
            IsItemChecked = false
        },
        new Item
        {
            Caption = "In Progress",
            IsItemChecked = true
        },
        new Item
        {
            Caption = "On Hold",
            IsItemChecked = false
        }
    };
}

So far all works awesome.

So here's the question. What I want to do track what items are checked. Selected and checked are not the same thing. Selected it whem the item's row is selected, where checked is when the checkbox value is set. Then, when the user clicks Ok I'm going to populate a list of selected items.

The problems is how does the control know about the list of items bound to it? How does the control ever know that there a bool property called "IsItemChecked" on the data class?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Cant you use a filter like CollectionViewSource:
How to: Filter Data in a View | Microsoft Docs[^]

Hello,
Excuse me for English, but I'm French.
I integrated a video mp4 in the resources of my application.
Then I inserted it in MediaElement.
Until then, it works fine, but as soon as I run the executable on another computer, the video does not start. Yet the video file is in the resources.
I seem to have set the video file correctly:

File properties
Generation Action: Embedded Resource
Copy to output directory: Copy if newer

Media Properties:
Source: Resources/VideoMedia.mp4
LoadedBehavior: Play

Grid>
<mediaelement x:="" name="Video" horizontalalignment="Center" height="300" verticalalignment="Center" width="350" volume="100" source="Resources/VideoMedia.mp4">

Should we add Visual Basic code lines, so that it works.

Thank you for your help, Eratos.

The question I would have is, does the other machine have video CODECs suitable for playing back your MP4? You could use Microsoft Media Encoder or a tool like a free video converter to convert the file format.

This space for rent

Hello, Pete O'Hanlon.
Yes, it's the same video codec.
Anyway, when I make a copy of the executable and I put it on the desktop, I have the same problem.
For this to work perfectly, I have to leave the executable in its original place. Eratos.

I want to create a combobox with checkboxes. In the popup but below the list of checkboxes I want Apply and Clear buttons.

This is what I'm looking for.

So far I have

<pre><ComboBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">

<pre>
        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsSelected}"
                    Margin="5" />
            <TextBlock Text="{Binding Caption}"
                    Margin="5" />
        </StackPanel>

    </StackPanel>
</DataTemplate>

Not sure how to get the two buttons below the list. Can someone show me how to do this?

Thanks

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Nobody get points for doing weird things with "standard controls".

Pretty sure a GridView or DataGrid with checkboxes would accomplish the same thing without wasting time on "decorating".

Maybe with an "Expander" thrown in.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Wow.. Why did you even bother posting?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

It's a parent-child / master-detail relationship.

Sync a "plain, standard" combobox with any "detail": listview, data grid, grid view for your "check boxes". Buttons operate on what's "current".

Read "Common User Access Guidelines".

Keep the weird stuff in custom / user controls.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

I have a canvas which I hook to the ViewModel:

XML

<Border Grid.Row="0" Margin="5" BorderThickness="1" BorderBrush="Black" x:Name="container">
    <Canvas x:Name="cnvMainView" Background="White" Height="{Binding Path=ActualHeight,
                                   ElementName=container}" Width="{Binding Path=ActualWidth, ElementName=container}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseDown" >
                <i:InvokeCommandAction Command="{Binding MouseDown}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Canvas>
</Border>

With the ViewModel:

C#

class MainViewModel
    {
        public MainViewModel()
        {
            this.MouseDown = new DelegateCommand<object>(
                                             this.OnMouseDown, this.CanMouseDown);
        }

        public ICommand MouseDown { get; private set; }

        private void OnMouseDown(object arg)
        {
        //Do Something
        }
        private bool CanMouseDown(object arg) { return true; }
    }

But I really don't need all these details, I just need the positions received:

C#

var MouseDownPosition = from evt in Observable.FromEventPattern<MouseEventHandler,MouseEventArgs>(
                             h => cnvMainView.MouseDown += h,
                             h => cnvMainView.MouseDown -= h)
                             select evt.EventArgs.GetPosition(cnvMainView);

So how do people hook the Rx observables to the ViewModel?

I gave up on the Rx part and did my own EventCommand:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;

namespace WpfSimpleReflectionAssistant
{
    //Code from:
    //https://social.msdn.microsoft.com/Forums/silverlight/en-US/5cd586e7-640f-447b-9040-e9270173abf7/passing-drop-event-data-in-a-command-parameter-using-mvvm-and-the-interactivity-framework?forum=silverlightmvvm
    public sealed class EventCommand : TriggerAction<DependencyObject>
    {

        public static readonly DependencyProperty CommandParameterProperty =
            DependencyProperty.Register("CommandParameter", typeof(object), typeof(EventCommand), null);


        public static readonly DependencyProperty CommandProperty = DependencyProperty.Register(
            "Command", typeof(ICommand), typeof(EventCommand), null);


        public static readonly DependencyProperty InvokeParameterProperty = DependencyProperty.Register(
            "InvokeParameter", typeof(object), typeof(EventCommand), null);

        private string commandName;

        public object InvokeParameter
        {
            get
            {
                return this.GetValue(InvokeParameterProperty);
            }
            set
            {
                this.SetValue(InvokeParameterProperty, value);
            }
        }


        public ICommand Command
        {
            get
            {
                return (ICommand)this.GetValue(CommandProperty);
            }
            set
            {
                this.SetValue(CommandProperty, value);
            }
        }

        public string CommandName
        {
            get
            {
                return this.commandName;
            }
            set
            {
                if (this.CommandName != value)
                {
                    this.commandName = value;
                }
            }
        }

        public object CommandParameter
        {
            get
            {
                return this.GetValue(CommandParameterProperty);
            }

            set
            {
                this.SetValue(CommandParameterProperty, value);
            }
        }

        public object Sender { get; set; }

        protected override void Invoke(object parameter)
        {
            this.InvokeParameter = parameter;
            if (this.AssociatedObject != null)
            {
                ICommand command = this.Command;
                if ((command != null) && command.CanExecute(this.CommandParameter))
                {
                    if (this.CommandParameter.GetType() == typeof(Canvas))
                    {
                        Canvas myCanvas = (Canvas)this.CommandParameter;
                        Point pass = Mouse.GetPosition(myCanvas);
                        command.Execute(pass);
                    }
                    else
                        command.Execute(this.CommandParameter);
                }
            }
        }
    }
}

This would probably be better as an Attached property instead, but I didn't bother just now. But surely there has to be a better way or?

I am working on a wpf to developer an scrollbar exactly as same as a client send me the screen, so is their any one who can help me?
[^]

Help you with what?

this is the link i uploaded am image and i need to develop this kind of scrollviewer.

Please read How to get an answer to your question - Silverlight / WPF Discussion Boards[^]