2013-03-10 12 views
14

मैं TranslateTransform के साथ टेक्स्ट स्क्रॉल कर सकता हूं लेकिन जब एनीमेशन खत्म होने के करीब है तो मैं इसे फिर से शुरू करना चाहता हूं। एक साँप :)डब्ल्यूपीएफ मार्की टेक्स्ट एनीमेशन

की तरह यह है कि मैं क्या मिल गया है है:

<StackPanel Orientation="Horizontal" Margin="0,0,0,0"> 
    <StackPanel.RenderTransform> 
     <TranslateTransform x:Name="transferCurreny" X="-40"/> 
    </StackPanel.RenderTransform> 
    <StackPanel.Triggers> 
     <EventTrigger RoutedEvent="StackPanel.Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation From="0" To="-900" Duration="00:00:10" 
         Storyboard.TargetProperty="X" 
         Storyboard.TargetName="transferCurreny" 
         RepeatBehavior="Forever"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </StackPanel.Triggers> 
    <TextBlock FontSize="25" x:Name="txtKron" Margin="10,0,7,0"/> 
</StackPanel> 

यह मैं चाहता क्या है:

enter image description here

+0

प्रश्न क्या है? वांछित व्यवहार क्या है, आपको क्या व्यवहार मिलता है? –

+0

प्रश्न है; मैं पाठ को मार्की करना चाहता हूं लेकिन सांप – meymetkaplan

+0

के रूप में मुझे अभी भी समझ में नहीं आता है। क्या आप एक तस्वीर पेंट कर सकते हैं? या हमें उस स्थान पर इंगित करें जहां आपने पहले इस प्रभाव को देखा है? –

उत्तर

12

कुछ इस तरह चाल करना चाहिए।

आप StackPanel की ActualWidth को 0 और एक सेट स्थिति, तो जब पाठ की पहली ब्लॉक हो जाता है गुप्त अन्य ब्लॉक को देखने में आ जाएगा एक के साथ सेट के लिए एक Canvas जोड़ सकते हैं।

कारण मैं Canvas इस्तेमाल किया है, क्योंकि Canvas केवल तत्व यह है कि वास्तव में ClipToBounds="false" इस भले ही Canvas ही

की सीमा के बाहर अपनी रखा 2 TextBlock दिखाई दे सकता है हम भी एक IValueConverter जरूरत है पाने के लिए अनुमति देता है का समर्थन करता है यदि आप दाएं से बाएं स्क्रॉल करना चाहते हैं तो सही नकारात्मक मान।

मैंने SizeChanged पर ईवेंट ट्रिगर भी जोड़ा ताकि यदि विंडो का आकार बदल दिया गया है तो एनीमेशन मान सही तरीके से अपडेट हो जाएंगे।

कोड:

namespace WpfApplication9 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 

     public MainWindow() 
     { 
      InitializeComponent(); 
     } 
    } 

    public class NegatingConverter : IValueConverter 
    { 

     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      if (value is double) 
      { 
       return -((double)value); 
      } 
      return value; 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      if (value is double) 
      { 
       return +(double)value; 
      } 
      return value; 
     } 
    } 
} 

Xaml:

<Window x:Class="WpfApplication9.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication9" 
     Title="MainWindow" Height="83" Width="222" Name="UI" Tag="Tol Level"> 
    <StackPanel Orientation="Horizontal" x:Name="stack"> 
     <StackPanel.Resources> 
      <local:NegatingConverter x:Key="NegatingConverter" /> 
      <Storyboard x:Key="slide"> 
       <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:10" 
         Storyboard.TargetProperty="X" 
         Storyboard.TargetName="transferCurreny" 
         RepeatBehavior="Forever"/> 
      </Storyboard> 
     </StackPanel.Resources> 
     <StackPanel.RenderTransform> 
      <TranslateTransform x:Name="transferCurreny" X="0"/> 
     </StackPanel.RenderTransform> 
     <StackPanel.Triggers> 
      <EventTrigger RoutedEvent="StackPanel.Loaded"> 
       <BeginStoryboard Storyboard="{StaticResource slide}" /> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="StackPanel.SizeChanged"> 
       <BeginStoryboard Storyboard="{StaticResource slide}" /> 
      </EventTrigger> 
     </StackPanel.Triggers> 
     <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}"> 
      <TextBlock Text="StackOverflow" FontSize="25" x:Name="txtKron" Canvas.Left="0"/> 
      <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/> 
     </Canvas> 
    </StackPanel> 
</Window> 

परिणाम:

enter image description hereenter image description here

संपादित करें: बाएं, दाएं को

<StackPanel Orientation="Horizontal" x:Name="stack"> 
     <StackPanel.Resources> 
      <local:NegatingConverter x:Key="NegatingConverter" /> 
      <Storyboard x:Key="slide"> 
       <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas}" Duration="00:00:10" 
         Storyboard.TargetProperty="X" 
         Storyboard.TargetName="transferCurreny" 
         RepeatBehavior="Forever"/> 
      </Storyboard> 
     </StackPanel.Resources> 
     <StackPanel.RenderTransform> 
      <TranslateTransform x:Name="transferCurreny" X="0"/> 
     </StackPanel.RenderTransform> 
     <StackPanel.Triggers> 
      <EventTrigger RoutedEvent="StackPanel.Loaded"> 
       <BeginStoryboard Storyboard="{StaticResource slide}" /> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="StackPanel.SizeChanged"> 
       <BeginStoryboard Storyboard="{StaticResource slide}" /> 
      </EventTrigger> 
     </StackPanel.Triggers> 
     <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}"> 
      <TextBlock Text="StackOverflow" FontSize="25" x:Name="txtKron" Canvas.Left="0"/> 
      <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}"/> 
     </Canvas> 
    </StackPanel> 
+0

हाय यह वाकई बहुत अच्छा है। मैं इसे शीर्ष पर काम कर रहा हूं :) लेकिन मुझे इसके बारे में एक समस्या है; जब पहली बार शीर्ष पर ब्लॉक (वास्तव में एक छवि) यह शीर्ष = 0 पर जा रहा है लेकिन छवि लगभग शीर्ष = 50 है, मैंने इसे ठीक नहीं किया है। धन्यवाद! – meymetkaplan

+0

यहां एक समस्या है - एनीमेशन शुरू नहीं होता है। मैंने लोड किए गए ईवेंट को जोड़कर कोड में इसे ठीक किया है और इसमें: स्टोरीबोर्ड एसबी = (स्टोरीबोर्ड) this.stack.FindResource ("स्लाइड"); स्टैक। डिस्पैचर.बिनजिन इनवोक (डिस्पैचर प्रिरिटी.लोडेड, नई एक्शन (() => { एसबी.बिन(); }); –

+0

हम इस कोड को छवि में भी उपयोग कर सकते हैं। धन्यवाद sa_ddam – Sagotharan

3

उपरोक्त उत्तर में कोड निरंतर स्क्रॉल नहीं करता है। निरंतर चिकनी स्क्रॉल के लिए कोड यहां दिया गया है।

XAML:

<Window x:Class="Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 
    <Grid> 
     <Canvas Margin="6,83,9,0" Name="ViewingBox" Background="YellowGreen" Height="35" VerticalAlignment="Top"> 
      <Label Canvas.Left="263" Canvas.Top="-2" Height="49" Name="BoxOne" FontSize="20">I need breakfast.</Label> 
      <Label Canvas.Left="263" Canvas.Top="-2" Height="49" HorizontalAlignment="Stretch" Name="BoxTwo" VerticalAlignment="Top" FontSize="20">You can have oranges and egg.</Label> 
     </Canvas> 
    </Grid> 
</Window> 

वीबी कोड के पीछे:

Imports System.Windows.Media.Animation 

Public Enum Texts 
    BoxOne 
    BoxTwo 
End Enum 

Class Window1 
    Private dubAnim As New DoubleAnimation() 
    Private dubAnim2 As New DoubleAnimation() 
    Private NewsTimer As New Windows.Threading.DispatcherTimer() 
    Dim leadText As Texts = Texts.BoxOne 

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded 
     dubAnim.From = ViewingBox.ActualWidth 
     dubAnim.To = -BoxOne.ActualWidth 
     dubAnim.SpeedRatio = 0.05 
     AddHandler dubAnim.Completed, AddressOf dubAnim_Completed 
     Timeline.SetDesiredFrameRate(dubAnim, 320) 
     BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim) 

     dubAnim2.From = ViewingBox.ActualWidth 
     dubAnim2.To = -BoxTwo.ActualWidth 
     dubAnim2.SpeedRatio = 0.05 
     Timeline.SetDesiredFrameRate(dubAnim2, 320) 
     AddHandler dubAnim2.Completed, AddressOf dubAnim2_Completed 

     AddHandler NewsTimer.Tick, AddressOf NewsTimer_Tick 
     NewsTimer.Interval = New TimeSpan(0, 0, 0.9) 
     NewsTimer.Start() 
    End Sub 

    Private Sub NewsTimer_Tick(ByVal sender As Object, ByVal e As EventArgs) 
     Dim BoxOneLocation As Point = BoxOne.TranslatePoint(New Point(0, 0), ViewingBox) 
     Dim BoxTwoLocation As Point = BoxTwo.TranslatePoint(New Point(0, 0), ViewingBox) 

     If leadText = Texts.BoxOne Then 
      Dim loc As Double = BoxOneLocation.X + BoxOne.ActualWidth 
      If loc < ViewingBox.ActualWidth/1.5 Then 
       BoxTwo.BeginAnimation(Canvas.LeftProperty, dubAnim2) 
       NewsTimer.Stop() 
      End If 
     Else 
      Dim loc As Double = BoxTwoLocation.X + BoxTwo.ActualWidth 
      If loc < ViewingBox.ActualWidth/1.5 Then 
       BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim) 
       NewsTimer.Stop() 
      End If 
     End If 
    End Sub 

    Private Sub dubAnim_Completed(ByVal sender As Object, ByVal e As EventArgs) 
     leadText = Texts.BoxTwo 
     NewsTimer.Start() 
    End Sub 

    Private Sub dubAnim2_Completed(ByVal sender As Object, ByVal e As EventArgs) 
     leadText = Texts.BoxOne 
     NewsTimer.Start() 
    End Sub 
End Class 
+0

अच्छा। अच्छा काम करता है! –

संबंधित मुद्दे