Blinkender Button, Blinken unterbrechen und wieder weiter laufen

  • WPF

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von MichaHo.

    Blinkender Button, Blinken unterbrechen und wieder weiter laufen

    Hallo,
    ich habe mir einen Blinkenden Button erstellt mit einem Icon:
    Der Style

    XML-Quellcode

    1. <Style x:Key="IconBlinkButton" TargetType="{x:Type Button}" >
    2. <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
    3. <Setter Property="Background" Value="Transparent"/>
    4. <Setter Property="Foreground" Value="{StaticResource DefaultBlueBrush}"/>
    5. <Setter Property="BorderThickness" Value="0" />
    6. <Setter Property="FontSize" Value="{StaticResource FontSizeRegular}" />
    7. <Setter Property="Padding" Value="10 10"/>
    8. <Setter Property="Margin" Value="5"/>
    9. <Setter Property="Width" Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
    10. <Setter Property="Template">
    11. <Setter.Value>
    12. <ControlTemplate TargetType="{x:Type ButtonBase}">
    13. <Border x:Name="border"
    14. BorderBrush="{TemplateBinding BorderBrush}"
    15. BorderThickness="{TemplateBinding BorderThickness}"
    16. Background="{TemplateBinding Background}"
    17. SnapsToDevicePixels="True">
    18. <Border.RenderTransform>
    19. <ScaleTransform />
    20. </Border.RenderTransform>
    21. <Border.RenderTransformOrigin>
    22. <Point X="0.5" Y="0.5" />
    23. </Border.RenderTransformOrigin>
    24. <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    25. <ContentPresenter Content="{TemplateBinding Content}" Focusable="False" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
    26. </Grid>
    27. </Border>
    28. <ControlTemplate.Triggers>
    29. <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" Value="True">
    30. <DataTrigger.EnterActions>
    31. <BeginStoryboard Name="BlinkStoryBoard">
    32. <Storyboard>
    33. <DoubleAnimation To="1.2" Duration="0:0:0.50" Storyboard.TargetName="border" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" />
    34. <DoubleAnimation To="1.2" Duration="0:0:0.50" Storyboard.TargetName="border" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" />
    35. </Storyboard>
    36. </BeginStoryboard>
    37. </DataTrigger.EnterActions>
    38. <DataTrigger.ExitActions>
    39. <RemoveStoryboard BeginStoryboardName="BlinkStoryBoard"/>
    40. </DataTrigger.ExitActions>
    41. </DataTrigger>
    42. </ControlTemplate.Triggers>
    43. </ControlTemplate>
    44. </Setter.Value>
    45. </Setter>
    46. </Style>


    die Zuweisung im Window:

    XML-Quellcode

    1. <Button Style="{StaticResource IconBlinkButton}" Height="40" Content="{StaticResource IconSave}"/>


    das Icon:

    XML-Quellcode

    1. <Canvas x:Key="IconSave" Width="24" Height="24" >
    2. <Path Data="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3M19 19H5V5H16.17L19 7.83V19M12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12M6 6H15V10H6V6Z" Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Control}}" />
    3. </Canvas>


    Das funktionierd wunderbar.
    Schöner wäre es allerdings, wenn der Button kurz (sagen wir 2 mal) blinkt, pausiert, blinkt, pausiert usw.

    Ich hab gesehen, das es PauseStoryBoard und ResumeStoryborad gibt, kann dort aber keine Duration angeben.
    ist das überhaupt möglich im Xaml, oder muss ich da per CodeBehind ran?

    Danke Euch
    Grüße
    Michael
    "Hier könnte Ihre Werbung stehen..."
    Hallo Michael

    In diesem Fall bietet sich die DoubleAnimationUsingKeyFrames anstatt der DoubleAnimation an da diese KeyFrames unterstützt. Durch KeyFrames kannst du Schrittweise die Animationsschritte definieren.

    In deinem Fall könnte das in etwa so aussehen:

    XML-Quellcode

    1. <BeginStoryboard Name="BlinkStoryBoard">
    2. <Storyboard>
    3. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    4. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    5. <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1.2"/>
    6. <EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
    7. <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="1.2"/>
    8. <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    9. <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
    10. </DoubleAnimationUsingKeyFrames>
    11. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" >
    12. <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    13. <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1.2"/>
    14. <EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
    15. <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="1.2"/>
    16. <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    17. <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
    18. </DoubleAnimationUsingKeyFrames>
    19. </Storyboard>
    20. </BeginStoryboard>



    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    @MichaHo

    darf ich fragen, wie du

    Quellcode

    1. <Path Data="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3M19 19H5V5H16.17L19 7.83V19M12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12M6 6H15V10H6V6Z"


    hinbekommen hast? gibts da irgendein editor oder ein hilfe programm? Danke
    Klar darfst Du.
    da gibts ne Seite, wo du die Icons aussuchen kannst und bekommst dann den xaml Code dafür.
    materialdesignicons.com/

    Du kannst die auch selbst zeichnen, aber da Blick ich nicht durch...
    "Hier könnte Ihre Werbung stehen..."

    MichaHo schrieb:

    Du kannst die auch selbst zeichnen, aber da Blick ich nicht durch...

    Schau dir mal Expression Design von Microsoft an. Ist ein Vektorbasiertes Grafikprogramm wie Adobe Illustrator oder Corel Draw eines ist. Früher war es kostenpflichtig, dann bei Blend dabei und wurde mit Blend automatisch mitinstalliert. Mittlerweile nicht mehr umfang von Blend da Blend auch nicht mehr kostanpflichtig und bei VS auch in der Community dabei. Seither gibt es Expression Design nur noch als "extra Download".

    Alternativ kann man auch jedes SVG zu einem XAML konvertieren. Klappt nicht immer zu 100% aber es ist immer ein sehr guter Anhaltspunkt.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    MichaHo schrieb:


    manchmal fehlt doch das ein oder andere Icon


    Ich kann dir für Vektorgrafiken sonst auch noch Inkscape empfehlen.
    Der Anfang ist zwar etwas schwierig für den Laien, ist aber jedoch sehr kraftvoll und auch kostenlos.

    Nur so am Rande! :)
    ----------------------------------------------------------------------------------------------------------------------

    Hier könnte meine Signatur stehen, aber die ist mir abfußen gekommen.

    ----------------------------------------------------------------------------------------------------------------------
    @Elanda Jepp, Inkscape kenne ich, hatte mich da früher schon mal dran versucht um mir ein Logo zu erstellen.... bin kein designer und daher völlig ungeeignet für die Erstellung von Logos und Icons....

    Edit:
    Ach ja @Nofear23m das mit dem blinkenden Button hat wunderbar funktioniert.
    Man kann lustige Sachen machen mit den KeyFrames.... Danke für den Tip....
    Meine Default Buttons (aufs Bild klicksen, ist ein Gif):
    "Hier könnte Ihre Werbung stehen..."
    @MichaHo ja, Willkommen in der wunderbaren Welt der WPF.
    Es ist natürlich arbeit, ganz klar. Aber wenn man es mal intus hat gehts. Das ist jetzt ja nur ein "dreckiger" Button. Wenn man Grafisch gut drauf ist und gute Ideen hat kann man hier ein wunderschönes und benutzerfreundliches UI bauen. WPF rules!!

    Ach, übrigens. die "Designer" bzw. die UI Designer erarbeiten und erstellen sollche ding meißt in Blend. (ist ja bei VS dabei). Das geht das mit den animationen und den ganzen per klicki bunti und Timeline usw.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##