5

私が取り組んでいるフルスクリーン WPF アプリケーションの「クールに見える」効果を作成する方法を探しています。これは、画面全体をアニメーション化または移動して光沢のある表示体験を放つ「スクリーングリント」効果です。 . 画面全体でアニメーション化できる、ハイライトされたグラデーションと透明な背景を持つ大きな長方形を作成することを考えています。これを XAML で効果的に行う方法はありますか?

4

4 に答える 4

6

私はかなりよく見える解決策を思いついた。Blend 2.0 SP1でチョークしたサンプルXAMLは、次のようになります。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ScreenGlintApplication.Window1"
    x:Name="Window"
    Title="Window1"
    Width="500" Height="250" Background="#FF000000" Foreground="#FF3EE229" >

    <Grid x:Name="LayoutRoot">
        <TextBlock TextWrapping="Wrap" FontSize="40" >
        <Run Text="This is some sample text to have something to work with. Have a nice day! /Johan"/>
        </TextBlock>
        <Canvas Panel.ZIndex="99" >
        <Rectangle x:Name="ScreenGlintRect"  
            Width="{Binding Path=ActualWidth, ElementName=Window, Mode=Default}" 
            Height="{Binding Path=ActualHeight, ElementName=Window, Mode=Default}" 
            Opacity="0.4" >
            <Rectangle.Triggers> 
                <EventTrigger RoutedEvent="Rectangle.Loaded"> 
                  <BeginStoryboard> 
                    <Storyboard> 
                    <DoubleAnimation Storyboard.TargetName="ScreenGlintRect" 
                    Storyboard.TargetProperty="(Canvas.Left)"
                    From="-500" To="1000" Duration="0:0:2" />
                    </Storyboard> 
                  </BeginStoryboard> 
                </EventTrigger> 
          </Rectangle.Triggers> 

            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="Transparent" Offset="0.0" />
                    <GradientStop x:Name="GlintColor" Color="LightGreen" Offset="0.50" />
                    <GradientStop Color="Transparent" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        </Canvas>
    </Grid>
</Window>

オプションは、コードビハインドでこれを行うことです。これは、アニメーションをきめ細かく制御したい場合に非常に便利です。例えば：

    ScreenGlintRect.Width = Width;
    ScreenGlintRect.Height = Height;
    var animation = new DoubleAnimation
    {
        Duration = new Duration(TimeSpan.FromSeconds(2)),
        From = (-Width),
        To = Width * 2
    };
    ScreenGlintRect.BeginAnimation(Canvas.LeftProperty, animation);

これは私が使用しているコードであり、私には十分に見えます。HWアクセラレーションを取得した場合は、ぼかしを追加してみてください。コードを微調整して長方形を非表示/表示する必要があるかもしれませんが、基本的にはこれです。

于 2008-10-20T12:53:08.620 に答える
2

メイン グリッドの「上」に透明なパネルを配置し、パネルに配置された要素をアニメーション化するのは簡単です。パネルを「上に」配置するには、単純に XAML 階層の最後、他の要素の後に配置します。または、「ZIndex」プロパティを使用できます。

ローラン

于 2008-10-10T12:59:39.160 に答える
0

LBugion が言ったように透明なパネルを上に置くことができますが、これを行うには多くの方法があることを忘れないでください:

  1. パネルの可視性を非表示に変更します。
  2. 不透明度を 0 に変更します。
  3. 色のアルファを 0 に変更します。

アルファのみを変更すると、色が見えなくてもクリック可能です。

トピックから外れますが、効果を微妙なものにして、オン/オフのオプションを用意してください。

于 2008-10-10T14:43:46.203 に答える
0

プログレスバーに関するこの記事に添付されているのは、Vista スタイルのグリントを持つ Vista スタイルのプログレス バーを持つサンプル コードです。Border と Brush と Converter を使用してアニメーションを作成します。そこにあるすべてを完全に理解しているとは言えませんが、うまく機能します。必要に応じて簡単にコピーできるはずです。

于 2008-10-10T16:57:02.440 に答える