none
WP8.1 Apply Storyboard Scale while TranslateX Manipulation RRS feed

  • Frage

  • Hallo, ich habe mein Problem zu erst auf englisch geschildert. Ich übersetze es in deutsch und lasse die englische Fassung unten angehängt.

    Ich programmiere mit C# auf WP8.1 und habe einen transparenten slider in der obersten Ebene, den man nicht sieht und einen Grid (eine Ebene tiefer), der dem Pfad über eine `TranslateX` Manipulation folgt. Code:

    <Grid Opacity="1" x:Name="innerGrid" HorizontalAlignment="Left" Margin="4,0,0,0">
    <Grid.RenderTransform>
       <CompositeTransform TranslateX="{Binding transXexact}" />
    </Grid.RenderTransform>
    
       [... stuff inside Grid ...]
    
    </Grid>
    <Slider x:Name="sliderPercent2" Minimum="0" Maximum="100" Value="0" Opacity="0" Style="{StaticResource customSliderBigOverlay}" ValueChanged="sliderPercent_ValueChanged" ManipulationMode="TranslateX" ManipulationStarted="sliderPercent2_ManipulationStarted" ManipulationCompleted="sliderPercent2_ManipulationCompleted" />

    und der Code dazu:

    private void sliderPercent_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            if (sender != null)
            {
                myPercView.transX = Convert.ToInt32(e.NewValue);
                myPercView.transXexact = e.NewValue * (Window.Current.Bounds.Width - 38 - 40 - 10) / 100;
            }
        }
    
        private void sliderPercent2_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            Storyboard s = new Storyboard();
    
            DoubleAnimation doubleAni = new DoubleAnimation();
            doubleAni.To = 0;
            doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(200));
            Storyboard.SetTarget(doubleAni, innerGrid);
            Storyboard.SetTargetProperty(doubleAni, "Opacity");
    
            s.Children.Add(doubleAni);
    
            s.Begin();
        }
    
        private void sliderPercent2_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            Storyboard s = new Storyboard();
    
            DoubleAnimation doubleAni = new DoubleAnimation();
            doubleAni.To = 1;
            doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(300));
            Storyboard.SetTarget(doubleAni, innerGrid);
            Storyboard.SetTargetProperty(doubleAni, "Opacity");
    
            s.Children.Add(doubleAni);
    
            s.Begin();
        }

    das funktioniert so weit auch supergut. Allerdings will ich ein kleines eye-candy hinzufügen. Sobald ich also mit der Manipulation anfange, die den `innerGrid` nach links und rechts auf der x-Achse manipuliert, soll nun zusätzlich dieser `innerGrid` in einen 0-Punkt gezoomt werden, also `ScaleX` und `ScaleY`sollen gegen 0 animiert werden. Dazu habe ich Storyboard mit  folgenden Code verwendet: 

        var xAnim = new DoubleAnimation();
        var yAnim = new DoubleAnimation();
        xAnim.Duration = TimeSpan.FromMilliseconds(300);
        yAnim.Duration = TimeSpan.FromMilliseconds(300);
        xAnim.To = 1;
        yAnim.To = 1;
        Storyboard.SetTarget(xAnim, innerGrid);
        Storyboard.SetTarget(yAnim, innerGrid);
        Storyboard.SetTargetProperty(xAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
        Storyboard.SetTargetProperty(yAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");

    Das Problem dabei ist, dass der `innerGrid` dann nur nach 0 zoomt und sich nicht mehr mit der Manipulation mitbewegt. Das sieht doof aus. Er bleibt einfach an der Stelle der Manipulation stehen und zommt nach 0, während mein Finger eigentlich schon wo ganz anders ist.

    Was ich also will ist, dass ich nach 0 zommen kann, während der `innerGrid` immer noch meiner `TranslateX` Manipulation nach links oder rechts folgt.


    ------------------------------------------------------------------------------------------------------

    I'm using C# for Windows Phone 8.1.

    What I have: I drag an transparent (not visible, but accessible) slider and a Grid follows the path of the slider with `TranslateX` Manipulation:   

    <Grid Opacity="1" x:Name="innerGrid" HorizontalAlignment="Left" Margin="4,0,0,0">
          <Grid.RenderTransform>
             <CompositeTransform TranslateX="{Binding transXexact}" />
          </Grid.RenderTransform>
    
          [... stuff inside Grid ...]
    
        </Grid>
        <Slider x:Name="sliderPercent2" Minimum="0" Maximum="100" Value="0" Opacity="0" Style="{StaticResource customSliderBigOverlay}" ValueChanged="sliderPercent_ValueChanged" ManipulationMode="TranslateX" ManipulationStarted="sliderPercent2_ManipulationStarted" ManipulationCompleted="sliderPercent2_ManipulationCompleted" />

    and the code side:       

    private void sliderPercent_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            if (sender != null)
            {
                myPercView.transX = Convert.ToInt32(e.NewValue);
                myPercView.transXexact = e.NewValue * (Window.Current.Bounds.Width - 38 - 40 - 10) / 100;
            }
        }
    
        private void sliderPercent2_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            Storyboard s = new Storyboard();
    
            DoubleAnimation doubleAni = new DoubleAnimation();
            doubleAni.To = 0;
            doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(200));
            Storyboard.SetTarget(doubleAni, innerGrid);
            Storyboard.SetTargetProperty(doubleAni, "Opacity");
    
            s.Children.Add(doubleAni);
    
            s.Begin();
        }
    
        private void sliderPercent2_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            Storyboard s = new Storyboard();
    
            DoubleAnimation doubleAni = new DoubleAnimation();
            doubleAni.To = 1;
            doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(300));
            Storyboard.SetTarget(doubleAni, innerGrid);
            Storyboard.SetTargetProperty(doubleAni, "Opacity");
    
            s.Children.Add(doubleAni);
    
            s.Begin();
        }

    now this works all fine, but I want to go further. Now I also want the `innerGrid` to Zoom into 0. Thatfore I need `ScaleX` and `ScaleY`. I can add it to the Storyboard with this code:   

        var xAnim = new DoubleAnimation();
        var yAnim = new DoubleAnimation();
        xAnim.Duration = TimeSpan.FromMilliseconds(300);
        yAnim.Duration = TimeSpan.FromMilliseconds(300);
        xAnim.To = 1;
        yAnim.To = 1;
        Storyboard.SetTarget(xAnim, innerGrid);
        Storyboard.SetTarget(yAnim, innerGrid);
        Storyboard.SetTargetProperty(xAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
        Storyboard.SetTargetProperty(yAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");

    BUT then it does NOT translate in X direction, when I move the slider, but just zoom into 0 on the position it was, when I started the manipulation.

    What I want: Scale the Grid into 0 with animation while still applying `TranslateX` Manipulation, so the Grid follows my movement while zooming out.

    • Bearbeitet vinc() Samstag, 13. Juni 2015 13:39 falsche Sprache verwendet
    Samstag, 13. Juni 2015 07:05

Antworten

  • Die Lösung war einfach als gedacht: Einfach den Teil, der mit ScaleX und ScaleY transformiert werden soll in einen weiteren Grid2 IN den Grid1 einzufügen, der den TranslateX-Teil übernimmt. Damit muss beim oben genannten C#-Code nur noch das Ziel von Grid1 auf Grid2 geändert werden.
    • Als Antwort markiert vinc() Mittwoch, 24. Juni 2015 14:21
    Mittwoch, 24. Juni 2015 14:21

Alle Antworten

  • Hello vinc(),

    as this is the german forum, I would suggest you to ask this question in german.

    In case you are not a german, please use the english forum: https://social.msdn.microsoft.com/Forums/en-us


    © 2015 Thomas Roskop

    Germany // Deutschland

    Samstag, 13. Juni 2015 09:17
  • ah, das tut mir Leid, habe den Text nun ins deutsche übersetzt. Bei mir ist es mittlerweile ein Reflex, bei Codeproblemen auf englisch zu schreiben und zu antworten.
    Samstag, 13. Juni 2015 13:41
  • Die Lösung war einfach als gedacht: Einfach den Teil, der mit ScaleX und ScaleY transformiert werden soll in einen weiteren Grid2 IN den Grid1 einzufügen, der den TranslateX-Teil übernimmt. Damit muss beim oben genannten C#-Code nur noch das Ziel von Grid1 auf Grid2 geändert werden.
    • Als Antwort markiert vinc() Mittwoch, 24. Juni 2015 14:21
    Mittwoch, 24. Juni 2015 14:21