2

ボタンをクリックした後、ラベルの値が毎秒更新される単純なアプリがあります。開発したいプログレスバーコントロールのPOCとしてこれを行っています。

ある種のスクローラー アニメーションをラベルに適用する方法があるかどうかを知りたいです。

1）ラベルの内容が更新されると、新しい値が上からスクロールされ、古い値が下にスクロールされてビューから消えます（これが意味をなすことを願っています）。

これはおそらくある種のアニメーションで達成できることを知っていますが、これを行う方法を知っている人がいる場合は、ウェブ上で役立つ例を見つけることができませんでした。専門知識を共有してください:

意見：

<Window x:Class="WpfApplication1.ScrollerView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Scroller" DataContext="{StaticResource scrollerVM}" Height="150" Width="300">
    <Grid>
        <ListBox ItemsSource="{Binding Messages}" Width="200" Height="50" BorderThickness="0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Text}"  />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ListBox>
        <Button Width="70" Height="24" Content="Add new" Command="{Binding AddNew}" HorizontalAlignment="Left" Margin="0,56,0,30" />
    </Grid>
</Window>

モデルを見る:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Threading;

namespace WpfApplication1.Scroller
{
    public class Message
    {
        public Message(string _text)
        {
            text = _text;
        }

        private string text;
        public string Text
        {
            get { return text; }
            set {text = value;}
        }
    }

    public class ScrollerViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public DelegateCommand AddNew { get; protected set; }

        ObservableCollection<Message> _messages = new ObservableCollection<Message>();
        public ObservableCollection<Message> Messages
        {
            get { return _messages; }
            set
            {
                _messages = value;
                OnPropertyChanged("Messages");
            }
        }

        public ScrollerViewModel()
        {
            AddNew = new DelegateCommand(Add);
        }

        private void Add(object parameter)
        {
            DispatcherTimer timer = new DispatcherTimer();
            timer.Tick += new System.EventHandler(timer_Tick);
            timer.Interval = new System.TimeSpan(0, 0, 1);
            timer.Start();
        }

        private void timer_Tick(object sender, EventArgs e)
        {
            Messages.Clear();
            Messages.Add(new Message(DateTime.Now.ToString("ss")));
        }

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}
4

2 に答える 2

0

より包括的な/異なる例はこちら。

以下は、基本的な垂直マーキー (スクロールするテキスト ブロック) になります。

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Loaded="Window_Loaded">
    <Canvas  Name="canvas1" >
        <TextBlock  Name="textBlock1">Hello</TextBlock>
    </Canvas>
</Window>

コード：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void BeginAnimation()
    {
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.From = -textBlock1.ActualHeight;
        doubleAnimation.To = canvas1.ActualHeight;
        doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
        doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(3));
        textBlock1.BeginAnimation(Canvas.TopProperty, doubleAnimation);
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        BeginAnimation();
    }
}
于 2012-08-29T19:15:58.740 に答える
0

まず、ListBox で「スムーズなスクロール」が必要になります。

ScrollViewer.CanContentScroll="False"

次に、カスタムの添付プロパティを作成して、スクロールする垂直方向のオフセットを指定できます。次に、ListBox の ItemsSource の「ItemsSourceChanged」イベントに接続するカスタム Behavior を作成します。これにより、動作内で定義できるアニメーションが開始されます。それは少なくとも最初の一歩になるはずです。特定のアニメーションがどうなるかわかりません...オフセットと新しいアイテムの高さの計算を使用したDoubleAnimationです。

于 2012-08-23T15:47:36.387 に答える