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

Begin a storyboard in a ControlTemplate

3-Jan-18 18:31

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?

Kenneth Haugland1-Jan-18 22:28

1-Jan-18 22:28

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?

Pete O'Hanlon2-Jan-18 0:55

2-Jan-18 0:55

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

Kenneth Haugland2-Jan-18 3:35

2-Jan-18 3:35

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?

Pete O'Hanlon2-Jan-18 4:38

2-Jan-18 4:38

I would use a Behavior to solve this.

This space for rent

Pete O'Hanlon2-Jan-18 6:11

2-Jan-18 6:11

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:

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

Kenneth Haugland2-Jan-18 6:41

2-Jan-18 6:41

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:

Pete O'Hanlon2-Jan-18 7:49

2-Jan-18 7:49

I'm pleased you got it working.

This space for rent

ComboBoxEdit Control

Kevin Marois21-Dec-17 6:09

Kevin Marois

21-Dec-17 6:09

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.

Re: ComboBoxEdit Control

Kenneth Haugland1-Jan-18 23:16

VB.Net/WPF/XAML "The video does not load via the executable."

1-Jan-18 23:16

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

Member 1358548219-Dec-17 13:20

Member 13585482

19-Dec-17 13:20

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.

Re: VB.Net/WPF/XAML "The video does not load via the executable."

Pete O'Hanlon19-Dec-17 19:33

Re: VB.Net/WPF/XAML "The video does not load via the executable."

19-Dec-17 19:33

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

Member 1358548219-Dec-17 22:42

Member 13585482

19-Dec-17 22:42

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.

ComboBox ItemTemplate

Kevin Marois16-Dec-17 8:44

Kevin Marois

16-Dec-17 8:44

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.

Re: ComboBox ItemTemplate

Gerry Schmitz17-Dec-17 7:18

Gerry Schmitz

17-Dec-17 7:18

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

Re: ComboBox ItemTemplate

Kevin Marois17-Dec-17 8:14

Kevin Marois

17-Dec-17 8:14

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.

Re: ComboBox ItemTemplate

Gerry Schmitz17-Dec-17 8:30

Gerry Schmitz

17-Dec-17 8:30

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

Using Rx with MVVM pattern

Kenneth Haugland16-Dec-17 0:40

Re: Using Rx with MVVM pattern

16-Dec-17 0:40

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:

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:

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?

Kenneth Haugland16-Dec-17 3:16

Customize Scrollbar in wpf

16-Dec-17 3:16

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?

Member 105139666-Dec-17 22:22

Member 10513966

6-Dec-17 22:22

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?
[^]

Richard MacCutchan6-Dec-17 22:24

Richard MacCutchan

6-Dec-17 22:24

Help you with what?

Member 105139666-Dec-17 23:28

Member 10513966

6-Dec-17 23:28

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

Richard MacCutchan6-Dec-17 23:48

Richard MacCutchan

6-Dec-17 23:48

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