Canvas - neue Controls mit Animation einblenden

Hallo,

auf meinem Canvas können zur Laufzeit neue Controls hinzugefügt werden. Ich würde diese gerne mittels einer Animation einblenden. Bin leider nicht so der Animations Profi.

Ich habe probiert, zum Control das zum Canvas hinzugefügt wird, nach dem es fertig geladen wurde die Opacity von 0 auf 1 zu setzen.

    <Style TargetType="{x:Type local:myControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:myControl}">
                  [[..]]]
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:10:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

Allerdings passiert gar nichts. Hat jemand eine Idee warum? Muss ich die Animation doch im Canvas definieren? Wäre es auch möglich über RenderTransform das myControl von 0 auf 100% (also auf Width 40) zu skalieren. Also quasi dass die MyControls ins Canvas auf "poppen"?

LG

Hi Briefkasten,

so in etwa müßte es meiner Meinung nach aussehen:

	<ControlTemplate TargetType="{x:Type local:myControl}">
		<ControlTemplate.Resources>
			<Storyboard x:Key="HoverOn">
				<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
					<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
			<Storyboard x:Key="HoverOff">
				<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
					<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</ControlTemplate.Resources>


		<ControlTemplate.Triggers>
			<Trigger Property="IsMouseOver" Value="true">
				<Trigger.ExitActions>
					<BeginStoryboard Storyboard="{StaticResource HoverOff}" />
				</Trigger.ExitActions>
				<Trigger.EnterActions>
					<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
				</Trigger.EnterActions>
			</Trigger>
		</ControlTemplate.Triggers>
	</ControlTemplate>

Ist zwar ein ControlTemplate, aber man kann das ja relativ schnell in einen Stil umwandeln.

Christian

Danke für dein Bsp.

Ich habe es nochmal vereinfacht, weil ich es nicht zum Laufen bringe.
Habe ein Windows WPF Projekt mit folgendem Code erstellt:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Button DockPanel.Dock="Top" Click="Button_Click" Height="20"></Button>
        <Canvas DockPanel.Dock="Top" x:Name="_canvas" Background="Gray">
            <Canvas.Resources>
                <Style TargetType="{x:Type Button}">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Button.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </Canvas.Resources>
        </Canvas>
    </DockPanel>
</Window>

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            _canvas.Children.Add(new Button() { Width = 20, Height = 20 });
        }

Der Button wird ohne Transparent Effekt eingeblendet. Ich schau mal weiter, vlt finde ich noch den Fehler.
LG

Ähm ja, eins hatte noch übersehen. Man muß natürlich den Wert für Opacity ersteinmal auf 0 setzen! Also einfach im Style einen Setter dafür hinzufügen, dann wird das Control auch wirklich zunächst einmal ausgeblendet.
Christian

Oh... stimmt. das hatte ich ganz übersehen. :S

Jetzt funktionierts 😃