Bild für eine Sekunde anzeigen, ausblenden, anzeigen anderes Bild zeigen

Question

Salü alle zusamme

In einer WPF anwendung möchte ich mit C# ein Bild anzeigen, dieses nach einer Sekunde ausblenden, wieder anzeigen für eine Sekunde und dann ein anderes Bild anzeigen.

Mein Code macht das was ich sage, zeigt es aber am Bildschirm nicht an. Es bleibt immer das erste Bild stehen, das Bild wird nicht versteckt und das zweite Bild erscheint nicht. Auch der Inhalt des Labels wird nicht angezeigt.

Welchen Code muss ich zusätzlich einbauen, damit angezeigt wird was angezeigt werden soll?

Vielen lieben Dank für Hilfestellungen

C# Code:

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage bi01 = new BitmapImage();
            bi01.BeginInit();
            bi01.UriSource = new Uri("myApfel.jpg", UriKind.Relative);
            bi01.EndInit();

            imgBild.Source = bi01;

            lblInfo.Content = "Bild1 erstmals anzeigen";
            Thread.Sleep(1000);
            Console.Beep();

            imgBild.Visibility = Visibility.Hidden;
            lblInfo.Content = "Bild1 Verstecken";
            Thread.Sleep(1000);
            Console.Beep();

            imgBild.Visibility = Visibility.Visible;
            lblInfo.Content = "Bild1 wieder zeigen";

            Thread.Sleep(1000);
            Console.Beep();
            Console.Beep();

            BitmapImage bi02 = new BitmapImage();
            bi02.BeginInit();
            bi02.UriSource = new Uri("myBirne.jpg", UriKind.Relative);
            bi02.EndInit();

            imgBild.Source = bi02;

            lblInfo.Content = "Bild2 erstmals anzeigen";
            Thread.Sleep(1000);
            Console.Beep();
        }

Und hier noch das WPF:

    <StackPanel>
        <Image Name="imgBild" Source="myBirne.jpg"></Image>
        <Button Name="btnStart" Click="btnStart_Click">Start</Button>
        <Label Name="lblInfo" Height="23"></Label>
    </StackPanel>

Answer 1

Hallo, wenn du auf den Button klickst, dann wird der Eventhandler im GUI Thread ausgeführt. Solange dieser Arbeitet, aktualisiert sich die GUI nicht. Du musst also die Animation in einen 2. Thread auslagern und anschließend über einen Dispatcher die Eigenschaften ändern. Eine vielleicht besser möglichkeit wäre ein Storyboard zu nehmen und dieses auszuführen.

---

Koopakiller [kuːpakɪllɐ] - http://koopakiller.ko.ohost.de/

Answer 2

Salü Koopakiller

Vielen lieben Dank für Deine Antwort. Habe zuerst mit dem 2. Tread probiert, aber da stosse ich an meine Grenzen. Zudem hast Du gesagt, dass es besser wäre über ein Storybord. Ok, ich habe das studiert und ein kleines Beispiel gemacht.

Rein in WPF schaffe ich es, durch Klick auf den Button ein Bild zu verkleinern oder zu vergrössern indem ich den Boarder ändere. Mein Button "auslösen" in welchem ich das ganze per code mache, funktioniert auch. Aber der macht das ja nur für ein Bild und nur einmal.

Ich möchte ja nun aber das Bild zuerst eine sekunde lang anzeigen, dann eine Sekunde lang nicht, dann wieder eine Sekunde lang zeigen um danach nach einer erneuten Pause ein anderes Bild anzuzeigen für eine Sekunde.

Das passiert aber nicht. Es wird nur das letzte Bild mit meiner Animation angezeigt (heul).

Was mache ich falsch? Erkennt das jemand?

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage bi01 = new BitmapImage();
            bi01.BeginInit();
            bi01.UriSource = new Uri("myApfel.jpg", UriKind.Relative);
            bi01.EndInit();

            imgBild.Source = bi01;

            lblInfo.Content = "Bild1 erstmals anzeigen";
            myAnimation();
            Thread.Sleep(1000);
            Console.Beep();

            imgBild.Visibility = Visibility.Hidden;
            lblInfo.Content = "Bild1 Verstecken";
            myAnimation();
            Thread.Sleep(1000);
            Console.Beep();

            imgBild.Visibility = Visibility.Visible;
            lblInfo.Content = "Bild1 wieder zeigen";

            myAnimation();
            Thread.Sleep(1000);
            Console.Beep();
            Console.Beep();

            BitmapImage bi02 = new BitmapImage();
            bi02.BeginInit();
            bi02.UriSource = new Uri("myBirne.jpg", UriKind.Relative);
            bi02.EndInit();

            imgBild.Source = bi02;

            lblInfo.Content = "Bild2 erstmals anzeigen";
            myAnimation();
            Thread.Sleep(1000);
            Console.Beep();
            Console.Beep();
            Console.Beep();
        }

        private void btnstbAusloesen_Click(object sender, RoutedEventArgs e)
        {
            myAnimation();            
        }

        private void myAnimation()
        {
            imgBild.Margin = new Thickness(150);
            ThicknessAnimation ta = new ThicknessAnimation(new Thickness(15), TimeSpan.FromSeconds(3), FillBehavior.HoldEnd);
            imgBild.BeginAnimation(FrameworkElement.MarginProperty, ta);
        }

wpf:

<Window x:Class="WpfApplication_Controls.wpfBilderZeigen"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="wpfBilderZeigen" Height="464" Width="288">
    <Window.Resources>
        <Storyboard x:Key="HoeheAendern" TargetName="imgBild" TargetProperty="Height">
            <DoubleAnimation From="0" To="400" Duration="0:0:3" FillBehavior="Stop">
                
            </DoubleAnimation>
        </Storyboard>
        <Storyboard Name="stbAusloesen" x:Key="stbBoarderAendern" TargetName="imgBild" TargetProperty="Margin">
            <ThicknessAnimation From="100" To="15" Duration="00:00:03" />
        </Storyboard>
    </Window.Resources>
    <StackPanel>
        <Image Name="imgBild" Source="myBirne.jpg" ></Image>
        <Button Name="btnStart" Click="btnStart_Click" >Start</Button>
        <Button Name="btnStoryBoard" Content="StoryBoard kleiner">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation To="100" Storyboard.TargetName="imgBild" Storyboard.TargetProperty="Margin" Duration="0:0:2" />
                        </Storyboard>
                    </BeginStoryboard>
                    
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Button Name="btnstbAusloesen" Click="btnstbAusloesen_Click">Auslösen per Code</Button>

        <Button Name="btnStoryBoardGroesser" Content="StoryBoard groesser">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation To="0" Storyboard.TargetName="imgBild" Storyboard.TargetProperty="Margin" Duration="0:0:2" />
                        </Storyboard>
                    </BeginStoryboard>

                </EventTrigger>
            </Button.Triggers>
        </Button>

        <Label Name="lblInfo" Height="23"></Label>
        
    </StackPanel>
</Window>

Answer 3

Ich habe es mal rein über XAML geregelt:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		x:Class="WpfApplication2.MainWindow"
		x:Name="Window"
		Title="MainWindow"
		Width="640" Height="480">
	<Window.Resources>
		<Storyboard x:Key="ImageAnimation">
			<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Source)">
				<!-- Bild Anzeigen -->
				<DiscreteObjectKeyFrame KeyTime="00:00:00.5">
					<DiscreteObjectKeyFrame.Value>
						<BitmapImage UriSource="img1.png" />
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Visibility)">
				<!-- Image ausblenden -->
				<DiscreteObjectKeyFrame KeyTime="0:0:1.5" Value="{x:Static Visibility.Collapsed}"/>
				<!-- Image einblenden -->
				<DiscreteObjectKeyFrame KeyTime="0:0:2.5" Value="{x:Static Visibility.Visible}"/>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Source)">
				<!-- Bild wechseln -->
				<DiscreteObjectKeyFrame KeyTime="00:00:02.5">
					<DiscreteObjectKeyFrame.Value>
						<BitmapImage UriSource="img2.png" />
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>

	<Grid x:Name="LayoutRoot">
		<Image Margin="250,125,249,191" Name="image"/>
		<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="35,50.04,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
			<Button.Triggers>
				<EventTrigger RoutedEvent="Button.Click">
					<BeginStoryboard Storyboard="{StaticResource ImageAnimation}"/>
				</EventTrigger>
			</Button.Triggers>
		</Button>
	</Grid>
</Window>

An sich muss man nur die ganzen Teile der Animation zusammenstückeln. Wenn du die Animation nicht über einen Trigger starten möchtest kannst du es auch aus der Resource hohlen und mit Begin() Starten.

Die Lösung über einen 2. Thread würde über die CPU ablaufen, über das Storyboard aber auf deer GPU, dadurch werden solche Sachen oftmals als Storyboard auch flüssiger ausgeführt. Die Methode mit dem 2. Thread wäre eig. nur dann eine Lösung, wenn die Animation nicht von Irgendwelchen Zeiten, sondern von Berechnungen im Hintergrund abhängen.

---

Koopakiller [kuːpakɪllɐ] - http://koopakiller.ko.ohost.de/

Answer 4

Hallo Sabrina,

Hat Dir die Antwort von Koopakiller geholfen? Wenn ja - bitte markiere diese "als Antwort".

Danke und Gruß,
Ionut

Answer 5

Hallo Sabrina Sanders,

Ich gehe davon aus, dass die Antwort Dir weitergeholfen hat.
Solltest Du noch "Rückfragen" dazu haben, so gib uns bitte Bescheid.

Grüße,
Robert

---

Robert Breitenhofer, MICROSOFT   Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „Entwickler helfen Entwickler“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.