none
Rectangle OpacityMask RRS feed

  • Frage

  • Hallo!

    Ich habe ein Tastatur-UserControl und möchte eine Animation erstellen, mit der man die Tastatur wie in einer Schublade herausziehen kann. Eine einfache Height-Animation des UserControls sieht unschön aus, da alle Objekte im UserControl entsprechend der aktuellen Höhe "angepasst" werden. Deshalb habe ich das UserControl in ein Canvas gepackt und animiere die Canvas.Top-Eigenschaft des UserControls:

    <Canvas Width="{Binding ElementName=grdTastatur, Path=ActualWidth}" Height="{Binding ElementName=grdTastatur, Path=ActualHeight}">
        <Grid x:Name="grdTastatur" Canvas.Left="0" Canvas.Top="0">
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="200" Duration="0:0:2" />
    ...

    Beim Laden des TastaturControls wird die Tastatur nach unten verschoben, alles schön.

    Nun möchte ich jedoch (synchron zur Tastaturbewegung) den Teil des UserControls ausblenden, der noch nicht sichtbar sein soll. Ich wollte dies über eine OpacityMask lösen, der ich ein Rectangle zuordne und die Höhe des Rectangle synchron zur Verschiebung kleiner werden lassen. OpacityMasken kann man aber nur Brush'es zuordnen, deshalb habe ich einen GradientStop animiert (Bsp. mit Rectangle als Tastatur-UserControl):

    <Canvas>
        <Rectangle Name="ucTastatur" Width="200" Height="100" Fill="Blue" Stroke="Gray" StrokeThickness="2" Canvas.Top="0" Canvas.Left="50">
            <Rectangle.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Transparent" Offset="0" />
                    <GradientStop x:Name="GradientStop" Color="Transparent" Offset="0.99" />
                    <GradientStop Color="Black" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.OpacityMask>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="GradientStop" Storyboard.TargetProperty="Offset" From="0.99" To="0" Duration="0:0:2" />
                            <DoubleAnimation Storyboard.TargetName="ucTastatur" Storyboard.TargetProperty="(Canvas.Top)" To="{Binding ElementName=ucTastatur, Path=Height}" Duration="0:0:2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>

    In dieser Form bleibt am Ende aber immer ein Opacity "Übergang" (Rechteck wird nicht vollständig angezeigt).

    Deshalb meine Frage: Wie kann man einen rechteckigen Teil als OpacityMask gestalten???

    Fred.




    • Bearbeitet perlfred Montag, 10. Juli 2017 10:08
    Montag, 10. Juli 2017 09:50

Antworten


  • Deshalb meine Frage: Wie kann man einen rechteckigen Teil als OpacityMask gestalten???

    Fred.

    Hi,

    meinst Du so etwas? [Einfach zwei Gradientstops synchron aninieren? Und dabei einen scharfen Übergang der Farben wählen?]

            <Canvas>
                <Rectangle Name="ucTastatur" Width="200" Height="100" Fill="Blue" Stroke="Gray" StrokeThickness="2" Canvas.Top="0" Canvas.Left="50">
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Transparent" Offset="0" />
                            <GradientStop x:Name="GradientStop" Color="Transparent" Offset="0.99" />
                            <GradientStop x:Name="GradientStop2" Color="Black" Offset="0.99" />
                            <GradientStop Color="Black" Offset="1" />
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                    <Rectangle.Triggers>
                        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="GradientStop" Storyboard.TargetProperty="Offset" From="0.99" To="0" Duration="0:0:2" />
                                    <DoubleAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Offset" From="0.99" To="0" Duration="0:0:2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Rectangle.Triggers>
                </Rectangle>
            </Canvas>

    Viele Grüße,

      Thorsten

    • Als Antwort markiert perlfred Dienstag, 11. Juli 2017 06:36
    Montag, 10. Juli 2017 21:47

Alle Antworten


  • Deshalb meine Frage: Wie kann man einen rechteckigen Teil als OpacityMask gestalten???

    Fred.

    Hi,

    meinst Du so etwas? [Einfach zwei Gradientstops synchron aninieren? Und dabei einen scharfen Übergang der Farben wählen?]

            <Canvas>
                <Rectangle Name="ucTastatur" Width="200" Height="100" Fill="Blue" Stroke="Gray" StrokeThickness="2" Canvas.Top="0" Canvas.Left="50">
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Transparent" Offset="0" />
                            <GradientStop x:Name="GradientStop" Color="Transparent" Offset="0.99" />
                            <GradientStop x:Name="GradientStop2" Color="Black" Offset="0.99" />
                            <GradientStop Color="Black" Offset="1" />
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                    <Rectangle.Triggers>
                        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="GradientStop" Storyboard.TargetProperty="Offset" From="0.99" To="0" Duration="0:0:2" />
                                    <DoubleAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Offset" From="0.99" To="0" Duration="0:0:2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Rectangle.Triggers>
                </Rectangle>
            </Canvas>

    Viele Grüße,

      Thorsten

    • Als Antwort markiert perlfred Dienstag, 11. Juli 2017 06:36
    Montag, 10. Juli 2017 21:47
  • Hallo Thorsten!

    Ja, so einen coooolen "Trick" hatte ich gesucht!  :-))

    Hatte schon begonnen, von dem UserControl ein Bild erstellen zu lassen (Stichwort: RenderTargetBitmap)

    und dieses jeweils bearbeitet zu schieben ... !  

    Deine Lösung ist (einfach) perfekt!!!

    Vielen Dank! 

    Dienstag, 11. Juli 2017 06:50