5

次の接続ダイアログでテキストを赤でアニメーション化すると、ラベルの内容が表示されます...

Frame 1: Connecting
Frame 2: Connecting.
Frame 3: Connecting..
Frame 4: Connecting...
Go to frame 1 if connection isn't established yet.
When connection is established: display "Connected".

スクリーンショット

テキストのアニメーションについてのチュートリアルは見つかりましたが、テキストの内容については見つかりませんでした。WPFを使用して簡単に実行できるものですか？ヘルプ/チュートリアルのリンクをいただければ幸いです。

これが、スクリーンショットの生成に使用したWPFコードです。

<Window x:Class="radar_test_ui.SerialConnectionWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Connection" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Content="COM:" Margin="5,0,5,0" />
        <ComboBox Grid.Row="1" Margin="10,0,10,0">
            <ComboBoxItem Content="COM1" IsSelected="True" />
            <ComboBoxItem Content="COM2" />
            <ComboBoxItem Content="COM3" />
        </ComboBox>
        <Label Grid.Row="2" Content="Baud rate:" Margin="5,10,5,0" />
        <ComboBox Grid.Row="3" Margin="10,0,10,0">
            <ComboBoxItem Content="9600" IsSelected="True" />
            <ComboBoxItem Content="19200" />
        </ComboBox>
        <Separator Grid.Row="4" Margin="0,15,0,15" />
        <Grid Grid.Row="5" Margin="10,0,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Label Content="Connecting..." FontSize="10" Width="100" VerticalAlignment="Bottom" Margin="0,0,0,-5" Name="LabelStatus" />
            <Button Grid.Column="1" Content="Connect" Padding="10,3,10,3" Margin="0,0,10,0" Click="ConnectClick" />
            <Button Grid.Column="2" Content="Cancel" Padding="10,3,10,3" Click="CancelClick" />
        </Grid>
    </Grid>
</Window>
4

1 に答える 1

6

キーフレームには、好きなものを使用ObjectAnimationUsingKeyFramesして設定できます。Duration

これが簡単な例です。接続ボタンをクリックするLabelと「接続中..」のアニメーションが開始され、もう一度クリックLabelすると「接続済み」と表示されます。

<Label Name="LabelStatus" FontSize="10" Width="100" VerticalAlignment="Bottom" Margin="0,0,0,-5">
    <Label.Style>
        <Style TargetType="Label">
            <Setter Property="Content" Value="Connecting..."/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Connecting}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Content">
                                <ObjectAnimationUsingKeyFrames Duration="00:00:04"
                                                                RepeatBehavior="Forever">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00"
                                                            Value="Connecting"/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:01"
                                                            Value="Connecting."/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:02"
                                                            Value="Connecting.."/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:03"
                                                            Value="Connecting..."/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Content">
                                <ObjectAnimationUsingKeyFrames Duration="00:00:00">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00"
                                                            Value="Connected"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Label.Style>
</Label>
<Button Grid.Column="1" Content="Connect" Padding="10,3,10,3" Margin="0,0,10,0"
        Click="ConnectClick"/>

そして、背後にあるコードで、ブールプロパティを追加してConnecting実装しINotifyPropertyChangedました。


PropertyChangedウィンドウに。がないため、更新DataContextはnullです。

public MainWindow()
{
    InitializeComponent();
    this.DataContext = this;
}

private bool _connecting;
public bool Connecting
{
    get { return _connecting; }
    set
    {
        _connecting = value;
        OnPropertyChanged("Connecting");
    }
}

private void ConnectClick(object sender, RoutedEventArgs e)
{
    Connecting = !Connecting;
}

public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
于 2012-06-03T18:50:56.950 に答える