Re: Problems pausing and restarting animations in XAML - WPF Discussion Boards

Dwayne Barsotta27-Jan-18 6:24

Dwayne Barsotta

27-Jan-18 6:24

I took your last comment to heart. After a discussion with him he finally understood, I informed him he needed to break his data down into more manageable chunks.

Gerry Schmitz7-Jan-18 7:26

7-Jan-18 7:26

I read both your explanations, and still can't visualize your planned UI.

In any event, one might use a ScrollViewer to "wrap" the "target control" in order to provide it with scrollbars when it exceeds a certain dimension.

Note that the expected results depends on how the target control was constructed; i.e stack panels behave differenently than grids, when it comes to layout.

And sometimes, one has to disable one scrollbar, in order for the "other" (V or H) to work properly.

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

Kenneth Haugland7-Jan-18 17:41

7-Jan-18 17:41

Sounds like you need something like this:
WPF: Data Virtualization[^]

Further explanations by Bea Stollnitz here[^].

Dwayne Barsotta27-Jan-18 6:39

Dwayne Barsotta

27-Jan-18 6:39

Seems I got downvoted for something here, not sure what. I completed the initial usable version of this application.

Per the comments, I received here I redesigned the GUI and operating concepts of the program. Keep in mind this was my first - fully installable C#-WPF-MVVM application ever (second C#).

When I got to a (mostly operational) point I had one small bug, I had our company programmer guy look at my program and direct me on my bug (i did have it right, just put the function call in the wrong place).

The main idea behind my program was to load a cvs file containing repair order numbers and warranty values, the user can select a min warranty value and the number of records wanted, click a button and the number of random records will be displayed. I was able to include several other (convienence) features as well.

I figured - since I got a lot of help here and I really like this site I would share the first version, I have made the GitHub repo public. Hopefully, it will help some others as well as offer me some constructive criticism.

BTW - I am being invited to help our code team at work on our in-house projects, this was brought on by him viewing the code for this project, ultimately from the help for y'all. I have always loved coding as a hobby and even took 2 years of online Computer Science, but at 41 years old I resigned myself to the idea I will not become a professional developer, well it looks like that is changing (at least ina small way).

This is my long-winded Thank You to all who help! The link to me GitHub Project is below!

[Link to my GitHub Project done with your help!]

Gerry Schmitz27-Jan-18 12:47

Problems pausing and restarting animations in XAML

27-Jan-18 12:47

If you believe the news, "programming", in terms of quality of life, has exceeded dental and other medical vocations as a preference.

Certainly if you can work remotely.

I have also found (almost) no "age" discrimination working remote versus "local".

(Only do "voice interviews" tho ... tell them "video chats" are for voyeurs).

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

Kenneth Haugland6-Jan-18 0:52

Re: Problems pausing and restarting animations in XAML

6-Jan-18 0:52

As per title, I assume that is the problem.

My XAML is the following:

HTML

<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="120" Height="30" Background="Black" x:Name="PopupParent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="25"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" x:Name="txt" Foreground="White"
               VerticalAlignment="Center" Margin="10"
               Text="Description" TextAlignment="Left">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Setter Property="FontWeight" Value="Normal"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Mode=OneWay,ElementName=PopupChild,Path=IsOpen}" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
    <Path Grid.Column="1"  Width="10" Height="14" Stretch="Fill" Stroke="Black"
        Fill="{Binding ElementName=txt,Path=Foreground}"
        Data="F1 M 319.344,237.333L 287.328,218.849L 287.328,255.818L 319.344,237.333 Z "/>
    <Popup
    PlacementTarget="{Binding ElementName=PopupParent}"
    x:Name="PopupChild"
    Placement="Right"
    AllowsTransparency="True"
    PopupAnimation = "Slide">
        <Popup.Resources>
            <Storyboard x:Key="ImidiateClosePopupAnimation" TargetProperty="IsOpen" >
                <BooleanAnimationUsingKeyFrames
                              Duration="0:0:0.0">
                    <DiscreteBooleanKeyFrame Value="False" KeyTime="100%"/>
                </BooleanAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="ClosePopupAnimation" TargetProperty="IsOpen">
                <BooleanAnimationUsingKeyFrames
                              Duration="0:0:0.05">
                    <DiscreteBooleanKeyFrame Value="False" KeyTime="100%"/>
                </BooleanAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="OpenPopupAnimation"  Name="OpenPopupAnimation2" TargetProperty="IsOpen">
                <BooleanAnimationUsingKeyFrames Duration="0:0:0">
                    <DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/>
                </BooleanAnimationUsingKeyFrames>
            </Storyboard>
        </Popup.Resources>
        <Popup.Style>
            <Style TargetType="Popup">
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Mode=OneWay,ElementName=PopupParent,Path=IsMouseOver}" Value="False"/>
                            <Condition Binding="{Binding Mode=OneWay,ElementName=PopupChild,Path=IsMouseOver}" Value="False"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource ClosePopupAnimation}"/>
                        </MultiDataTrigger.EnterActions>
                        <MultiDataTrigger.ExitActions>
                            <BeginStoryboard Name="OpenPopupAnimation2" Storyboard="{StaticResource OpenPopupAnimation}"/>
                        </MultiDataTrigger.ExitActions>
                    </MultiDataTrigger>
                    <DataTrigger Binding="{Binding Mode=OneWay,ElementName=PopupParent,Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <PauseStoryboard BeginStoryboardName="closing"/>
                            <ResumeStoryboard BeginStoryboardName="OpenPopupAnimation2"/>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <EventTrigger RoutedEvent="MouseDown">
                        <EventTrigger.Actions>
                            <PauseStoryboard BeginStoryboardName="OpenPopupAnimation2"/>
                            <BeginStoryboard Name="closing" Storyboard="{StaticResource ImidiateClosePopupAnimation}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Popup.Style>

        <StackPanel  Width = "200" Height = "100" Background = "Black" Margin = "5">
            <TextBlock TextWrapping = "Wrap" Foreground = "White" Text = "Some information goes here"/>
            <Button Content="I'm unstyled, Click me"/>
            <Button Content="Or Click me"></Button>
        </StackPanel>
    </Popup>
</Grid>

What I'm trying to do is to have the popup appear when the mouse is over the Parent element and it will stay open as long as you are on the Parent element or its popup child. The popup closes when the mouse is no longer over any of these elements. The problem is that I want the popup to close when any of buttons on popup is pushed. As the code is now, the popup will close when the mouse is pressed on the popup, but not on the buttons. The problem is then that the animations refuse to restart and it won't show the popup when the mouse is over the parent item again. Any suggestions on what to do here?

Gerry Schmitz6-Jan-18 7:48

Re: Problems pausing and restarting animations in XAML

6-Jan-18 7:48

Did you try setting popup's .IsOpen to false in the button handler?

One might assume popup is not "seeing" the button clicks due to the event routing in this case.

You could try adding a Button.Click handler on the popup if you can go with a common handler.

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

Kenneth Haugland6-Jan-18 8:09

Re: Problems pausing and restarting animations in XAML

6-Jan-18 8:09

I did try out this:

HTML

<StackPanel  Width = "200" Height = "100" Background = "Black" Margin = "5">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Click">
                    <BeginStoryboard Name="closing" Storyboard="{StaticResource ImidiateClosePopupAnimation}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>

    <TextBlock TextWrapping = "Wrap" Foreground = "White" Text = "Some information goes here"/>
    <Button Click="Button_Click" Content="I'm unstyled, Click me"/>
    <Button Click="Button_Click" Content="Or Click me"></Button>
</StackPanel>

But that throws an error saying that:

Quote:
Cannot resolve all property references in the property path 'IsOpen'. Verify that applicable objects support the properties.

I couldnt figure out what the problem was:
wpf - Cannot resolve all property references in the propertypath - Stack Overflow[^]

The button click does swallow the button pressed, and although I can use PreviewMouseDown, that will stop the click event. I could put all of this in a UserControl and hardcode everything, but this seemed very doable in XAML, or so I thought.

Gerry Schmitz6-Jan-18 8:26

Re: Problems pausing and restarting animations in XAML

6-Jan-18 8:26

For me, if I can get there with less stress using some code-behind, I'll go with the code-behind.

I need to ship; sometimes daily.

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

Kenneth Haugland6-Jan-18 8:41

Re: Problems pausing and restarting animations in XAML

6-Jan-18 8:41

Yeah, but this is really bugging me out. I did get it to work, sort of:

<Popup.Style>
         <Style TargetType="Popup">
             <Style.Triggers>
                 <MultiDataTrigger>
                     <MultiDataTrigger.Conditions>
                         <Condition Binding="{Binding Mode=OneWay,ElementName=PopupParent,Path=IsMouseOver}" Value="False"/>
                         <Condition Binding="{Binding Mode=OneWay,ElementName=PopupChild,Path=IsMouseOver}" Value="False"/>
                     </MultiDataTrigger.Conditions>
                     <MultiDataTrigger.EnterActions>
                         <BeginStoryboard Storyboard="{StaticResource ClosePopupAnimation}"/>
                     </MultiDataTrigger.EnterActions>
                     <MultiDataTrigger.ExitActions>
                         <BeginStoryboard Storyboard="{StaticResource OpenPopupAnimation}"/>
                     </MultiDataTrigger.ExitActions>
                 </MultiDataTrigger>
                 <EventTrigger RoutedEvent="Button.Click">
                     <BeginStoryboard Storyboard="{StaticResource ClosePopupAnimation}"/>
                 </EventTrigger>
             </Style.Triggers>
         </Style>
     </Popup.Style>

But now the popup wont open again after I clicked the button.

Gerry Schmitz6-Jan-18 8:51

Re: Problems pausing and restarting animations in XAML

6-Jan-18 8:51

I'm not sure that trying to manipulate the animation itself is better than working with .IsOpen.

All will affect the "state" of things in different ways.

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

Kenneth Haugland6-Jan-18 9:17

Re: Problems pausing and restarting animations in XAML

6-Jan-18 9:17

I cheated and solved it:

<EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard>
        <Storyboard  >
            <DoubleAnimation Storyboard.TargetProperty="Width" To="0" Duration="0:0:0"/>
            <DoubleAnimation BeginTime="0:0:01" Storyboard.TargetProperty="Width" To="210" Duration="0:0:0"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Gerry Schmitz6-Jan-18 9:32

6-Jan-18 9:32

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

WPF

Bogadamidi3-Jan-18 16:20

Bogadamidi

3-Jan-18 16:20

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

Re: WPF

Kenneth Haugland3-Jan-18 18:31

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