Click here to Skip to main content
15,033,418 members
Home / Discussions / WPF
   

WPF

 
GeneralRe: Problems pausing and restarting animations in XAML Pin
Gerry Schmitz6-Jan-18 9:32
mveGerry Schmitz6-Jan-18 9:32 
QuestionWPF Pin
Bogadamidi3-Jan-18 16:20
MemberBogadamidi3-Jan-18 16:20 
AnswerRe: WPF Pin
Kenneth Haugland3-Jan-18 18:31
professionalKenneth Haugland3-Jan-18 18:31 
QuestionBegin a storyboard in a ControlTemplate Pin
Kenneth Haugland1-Jan-18 22:28
professionalKenneth Haugland1-Jan-18 22:28 
AnswerRe: Begin a storyboard in a ControlTemplate Pin
Pete O'Hanlon2-Jan-18 0:55
mvePete O'Hanlon2-Jan-18 0:55 
GeneralRe: Begin a storyboard in a ControlTemplate Pin
Kenneth Haugland2-Jan-18 3:35
professionalKenneth Haugland2-Jan-18 3:35 
GeneralRe: Begin a storyboard in a ControlTemplate Pin
Pete O'Hanlon2-Jan-18 4:38
mvePete O'Hanlon2-Jan-18 4:38 
AnswerRe: Begin a storyboard in a ControlTemplate Pin
Pete O'Hanlon2-Jan-18 6:11
mvePete O'Hanlon2-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:
<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:
<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

GeneralRe: Begin a storyboard in a ControlTemplate Pin
Kenneth Haugland2-Jan-18 6:41
professionalKenneth Haugland2-Jan-18 6:41 
GeneralRe: Begin a storyboard in a ControlTemplate Pin
Pete O'Hanlon2-Jan-18 7:49
mvePete O'Hanlon2-Jan-18 7:49 
QuestionComboBoxEdit Control Pin
Kevin Marois21-Dec-17 6:09
professionalKevin Marois21-Dec-17 6:09 
AnswerRe: ComboBoxEdit Control Pin
Kenneth Haugland1-Jan-18 23:16
professionalKenneth Haugland1-Jan-18 23:16 
QuestionVB.Net/WPF/XAML "The video does not load via the executable." Pin
Member 1358548219-Dec-17 13:20
MemberMember 1358548219-Dec-17 13:20 
AnswerRe: VB.Net/WPF/XAML "The video does not load via the executable." Pin
Pete O'Hanlon19-Dec-17 19:33
mvePete O'Hanlon19-Dec-17 19:33 
GeneralRe: VB.Net/WPF/XAML "The video does not load via the executable." Pin
Member 1358548219-Dec-17 22:42
MemberMember 1358548219-Dec-17 22:42 
QuestionComboBox ItemTemplate Pin
Kevin Marois16-Dec-17 8:44
professionalKevin Marois16-Dec-17 8:44 
AnswerRe: ComboBox ItemTemplate Pin
Gerry Schmitz17-Dec-17 7:18
mveGerry Schmitz17-Dec-17 7:18 
GeneralRe: ComboBox ItemTemplate Pin
Kevin Marois17-Dec-17 8:14
professionalKevin Marois17-Dec-17 8:14 
GeneralRe: ComboBox ItemTemplate Pin
Gerry Schmitz17-Dec-17 8:30
mveGerry Schmitz17-Dec-17 8:30 
QuestionUsing Rx with MVVM pattern Pin
Kenneth Haugland16-Dec-17 0:40
professionalKenneth Haugland16-Dec-17 0:40 
AnswerRe: Using Rx with MVVM pattern Pin
Kenneth Haugland16-Dec-17 3:16
professionalKenneth Haugland16-Dec-17 3:16 
QuestionCustomize Scrollbar in wpf Pin
Member 105139666-Dec-17 22:22
professionalMember 105139666-Dec-17 22:22 
QuestionRe: Customize Scrollbar in wpf Pin
Richard MacCutchan6-Dec-17 22:24
mveRichard MacCutchan6-Dec-17 22:24 
AnswerRe: Customize Scrollbar in wpf Pin
Member 105139666-Dec-17 23:28
professionalMember 105139666-Dec-17 23:28 
GeneralRe: Customize Scrollbar in wpf Pin
Richard MacCutchan6-Dec-17 23:48
mveRichard MacCutchan6-Dec-17 23:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.