WPFのデザインとアニメーションのプロジェクトは数十あります。

WPFのデザインとアニメーションのプロジェクトは数十あります。

これは、楽しいデザインやアニメーションを作成し、収集するためのWPFプロジェクトです。現在、数十のデモがあり、詳細な実装手順と原理を説明するブログがあるものもあります。

最后更新 2022/04/17 17:51
dino.c
预计阅读 7 分钟
分类
WPF
专题
WPF UIデザイン
标签
.NET WPF WPF UIデザイン アニメーションアニメーション デザインは

Wpf Design And Animation Lab

これは、楽しいデザインやアニメーションを作成し、収集するためのWPFプロジェクトです。現在、数十のデモがあり、いくつかのブログには詳細な実装手順と原則が記載されています。

设计和动画 - dino.c - 博客园

これらのブログでは、クールなWPFアニメーションとデザインの実装方法や、WPFの技術的な詳細について学ぶことができます。

1. 実装されたデザインとアニメーション

1.1 3つの方法で円弧状進行状況バーを実装する

image

アークプログレスバーを実現する方法はたくさんありますが、PathとArcSegment、Arc、Ellipseの3つの方法を使用することで、さまざまな形状の基本的な使い方を理解することができます。

1.2 Rectangleでの円筒形プログレスバーの実装

image

円筒形のプログレスバーは簡単に実装できますが、興味深いのは、上の図が長方形を表す長方形で構成されていることです。

首先我们需要重温一些基础知识：Rectangle 显示带圆角的矩形。用 RadiusX 和 RadiusY 可分别指定用于使矩形的角变圆的椭圆的 X 轴和 Y 轴半径。

以下の例では、RadiusX=“50”RadiusY=“20”のRectangleのフィレットと、Width=“100”Height=“40”のEllipse（X軸半径 50、Y軸半径 20）とが完全に一致していることがわかる。

<Rectangle  Height="100"
            Width="100"
            Fill="#FF7E9EC0"
            Stroke="#FFFF0EC4"
            StrokeThickness="5"
            RadiusX="50"
            RadiusY="20" />
<Ellipse HorizontalAlignment="Left"
         VerticalAlignment="Top"
         StrokeThickness="5"
         Stroke="Yellow"
         Fill="Red"
         Width="100"
         Height="40"
         Opacity="0.5" />

image

ここで、上の長方形を伸ばして円柱の基本形になり、逆に平らにすると円柱の断面になります。次に、それらを半透明に設定すると、円筒状のプログレスバーの背景になります。

image

<Grid.Resources>
   <Style TargetType="Rectangle">
       <Setter Property="Fill" Value="#36a8e2" />
       <Setter Property="RadiusX" Value="25" />
       <Setter Property="RadiusY" Value="5" />
   </Style>
</Grid.Resources>
<Rectangle Opacity="0.2" />
<Rectangle Height="10"
          VerticalAlignment="Top"
          Opacity="0.1" />

次に、半透明のグラデーションと別のセクションを追加すると、円筒形のプログレスバーが完成します。

1.3虹の文字とアニメーションをプレイ

用 ItemsControl 拆分文字实现彩虹文字是一个很好玩的方案，因为可以对每个文字做不同的变形和动画，实现很多种玩法。首先，因为 string 是个集合，其实它可以用作 ItemsControl 的 ItemsSource。但在 Xaml 上直接写 ItemsSource="somestring"` 会报错，可以用 ContentControl 包装一下，写成这样：

<ContentControl Content="ItemsControl" >
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <ItemsControl ItemsSource="{TemplateBinding Content}" >
            </ItemsControl>
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>

次に、コンテンツが横に配置されるようにItemsControlのItemsPanelを設定し、分割された文字がTextBlockに表示されるようにDataTemplateを設定します。

<ItemsControl ItemsSource="{TemplateBinding Content}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

次に、各文字が異なる色で表示されるようにするには、Collectionクラスを実装し、Xaml 上でインスタンス化し、使用する色を入力します：

<common:RepeatCollection x:Key="RepeatCollection">
    <SolidColorBrush>#4a0e68</SolidColorBrush>
    <SolidColorBrush>#b62223</SolidColorBrush>
    <SolidColorBrush>#fdd70c</SolidColorBrush>
    <SolidColorBrush>#f16704</SolidColorBrush>
    <SolidColorBrush>#69982d</SolidColorBrush>
    <SolidColorBrush>#0075a5</SolidColorBrush>
    <SolidColorBrush>#0b0045</SolidColorBrush>
</common:RepeatCollection>

RepeatCollectionのコードは次のとおりです。これは通常、Nextのgetterメソッドを呼び出すたびに要素を削除する循環キューです（CircleCollectionと呼ぶ方が良いでしょうか？）。

public class RepeatCollection : Collection<object>
{
    private int _offset;

    public object Next
    {
        get
        {
            if (this.Count == 0)
                return null;

            var result = this[_offset];
            _offset++;
            if (_offset > this.Count - 1)
                _offset = 0;

            return result;
        }
    }
}

最後に、TextBlockのForegroundはコレクションのNextプロパティにバインドされ、各TextBlockが異なる色を使用するようにします。

<TextBlock Foreground="{Binding Next, Source={StaticResource RepeatCollection}}" Text="{Binding}" />

image

上記のコードを変更すると、虹のテキストをアニメーション化できます。

image

1.4虹のボタンを作る

テキストにLinearGradientBrushを適用すると、テキストが虹色に変わります。2つのGradientStop間の色が同じ場合、グラデーションは発生しません。2つのGradientStop間のオフセットはすぐに変化します。このテクニックと私は等幅フォントを使用しているので、単語ごとに異なる色の虹文字を作成することができます。

<LinearGradientBrush x:Name="RainbowBrush" StartPoint="0,0.5" EndPoint="1,.5">
    <GradientStop x:Name="G1" Offset="0" Color="#65b849" />
    <GradientStop x:Name="G2" Offset=".166" Color="#65b849" />
    <GradientStop x:Name="G3" Offset=".166" Color="#f7b423" />
    <GradientStop x:Name="G4" Offset=".3333" Color="#f7b423" />
    <GradientStop x:Name="G5" Offset="0.3333" Color="#f58122" />
    <GradientStop x:Name="G6" Offset="0.5" Color="#f58122" />
    <GradientStop x:Name="G7" Offset="0.5" Color=" #f8f8f8" />
    <GradientStop x:Name="G8" Offset="0.5" Color=" #f8f8f8" />
    <GradientStop x:Name="G9" Offset="0.50" Color="#de3a3c" />
    <GradientStop x:Name="G10" Offset="0.666" Color="#de3a3c" />
    <GradientStop x:Name="G11" Offset="0.666" Color="#943f96" />
    <GradientStop x:Name="G12" Offset="0.8633" Color="#943f96" />
    <GradientStop x:Name="G13" Offset="0.8633" Color="#009fd9" />
    <GradientStop x:Name="G14" Offset="01" Color="#009fd9" />
</LinearGradientBrush>

image

MouseOverのStoryboardでLinearGradientBrushを制御して方向を変更します。方向を変更する方法は2つあります。1つはPoint AnimationでStart PointとEnd Pointを変更する方法、もう1つはDouble AnimationでLinearGradientBrush.RelativeTransformを直接変更する方法です。後者は以下の通りである。

<Storyboard>
    <DoubleAnimation Storyboard.TargetName="textBlock"
                     Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(RotateTransform.Angle)"
                     To="90"
                     Duration="0:0:0.5">
        <DoubleAnimation.EasingFunction>
            <QuarticEase EasingMode="EaseOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>


<LinearGradientBrush x:Name="RainbowBrush" StartPoint="0,0.5" EndPoint="1,.5">
    <LinearGradientBrush.RelativeTransform>
        <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
    </LinearGradientBrush.RelativeTransform>

すべての色を90 度回転させ、以前のアップルのロゴカラーのように見えます。上のLinearGradientBrushでは、オフセットが0.5の2つの白いGradientStop （G 6とG 7）を真ん中に隠しています。ボタンのプレス状態では、DoubleAnimationを使用して、ボタンの前後にあるすべてのグラデーションストップのオフセットを0または1に設定します。効果は、すべての色が両側に押されます。90 度回転しているので、実際には上下の2方向に押されています。

image

1.5 2つのNintendo Switchのロードアニメーションを実装

image

image

Split TextとTimeSpanIncreaserを使用して、Nintendo Switchで最も一般的な2つのアニメーションを実装しました。

1.6 Shazzamシェーダーエディタでライトエフェクトを作成する

上のアニメーションでは、異なる明るさのグリッドを実装するためにLightenConverterクラスを使用していますが、SolidColorBrushのみを処理できます。より多くの場面で使用できるように、Lightenと同じ効果を達成するために独自のエフェクトを書きます。

image

1.7 WPFの内部影の実現

WPFでは通常DropShadowを使ってシャドウ効果を作りますが、すべてアウトシャドウです。内影Inner Shadow的话实也不是不是不可，就是有些曲折。内側の影を実装する方法はいくつかありますが、OpacityMaskに別の要素のVisual Brushを使用するのが一番好きです。

<Grid Width="100"
      Height="100"
      Margin="10">
    <Rectangle x:Name="Rectangle2"
               Fill="White"
               RadiusX="8"
               RadiusY="8" />
    <Border Margin="0">
        <Border.Effect>
            <DropShadowEffect BlurRadius="8" ShadowDepth="0" />
        </Border.Effect>
        <ContentControl HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Content="OpacityMask" />
    </Border>
    <Grid.OpacityMask>
        <VisualBrush Stretch="None" Visual="{Binding ElementName=Rectangle2}" />
    </Grid.OpacityMask>
</Grid>

しかし、結果として得られる影は太すぎません。より大きくて太い内側の影が必要な場合は、同じ太さのBorderThickness実装で負のマージンを使用できます。OpacityMaskの場合、以下のコードを使用して、太く大きな内側の影を作ることができます。

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    ShadowElement.Margin = new Thickness(-e.NewValue);
    ShadowElement.BorderThickness = new Thickness(e.NewValue);
    (ShadowElement.Effect as DropShadowEffect).BlurRadius = e.NewValue * 2;
}

image

1.8 OpacityMaskでUWPを模倣したテキストシマーアニメーション

image

UWPのWindows Composition Samplesには、Composition Lightの使用方法を示すテキストシェイマーアニメーションがあります。アニメーションは簡単で、PointLightを使用してテキストの行を左から右にスキャンします。WPFにはComposition Lightはありませんが、OpacityMaskで真似すれば簡単なアニメーションをプレイできます。

RadialGradientBrush 代表一个圆形的渐变画刷，在这里我们要关心它的三个属性：

RadiusX/RadiusY： 円の水平/垂直半径。 ** センター：** 円の一番外側の中心。 GradientOrigin： グラデーションの開始時の2つの焦点の位置。

これら3つの属性の役割は以下の図に示すことができます。

image

RadialGradientBrushをOpacityMaskとして使用して、テキストブロックを中心から徐々に透明にします。

<TextBlock HorizontalAlignment="Center"
           VerticalAlignment="Center"
           FontFamily="SegoeUI"
           FontSize="100"
           FontWeight="Thin"
           Foreground="DimGray"
           Text="Text Shimmer">
    <TextBlock.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".5,.5" GradientOrigin=".5,.5" RadiusX=".43" RadiusY="2">
            <GradientStop Color="Black" />
            <GradientStop Offset=".5" Color="#6000" />
            <GradientStop Offset="1" Color="#2000" />
        </RadialGradientBrush>
    </TextBlock.OpacityMask>
</TextBlock>

次に、CenterとGradientOriginのPointAnimationを実行し、OpacityMaskの水平方向の動きを実現し、PointLightの掃引効果を模倣することができます。

<PointAnimation RepeatBehavior="Forever"
                Storyboard.TargetName="Brush"
                Storyboard.TargetProperty="Center"
                From="-2,.5"
                To="3,.5"
                Duration="0:0:3.3" />
<PointAnimation RepeatBehavior="Forever"
                Storyboard.TargetName="Brush"
                Storyboard.TargetProperty="GradientOrigin"
                From="-2,.5"
                To="3,.5"
                Duration="0:0:3.3" />

1.9 CSS 3で実装されたボタンをコピーする

image

CSS 3実装のボタンをコピーして、CSS 3に慣れてください。

1.10効果による光と影の効果

image

そのために、以下の知識とスキルを使用します。

  • Segoe Fluentアイコンフォント
  • Blendでパスを作成する
  • 経路の長さの計算
  • Pathの境界線アニメーション
  • Visual Studioのデザインタイムデータサポート
  • 効果のカスタマイズ

2. License

The project is released under MIT License.

3. UWPのバージョン

また、UWPアニメーションをプレイするための別のプロジェクトがあります。

https://github.com/DinoChan/uwp_design_and_animation_lab

image

GitHubからの転載

アーティスト：Dino.c

倉庫のアドレスhttps//github.com/DinoChan/wpf_design_and_animation_lab

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2025/09/13

WPFからAvaloniaへの移行シリーズ：WPFプログラムをAvaloniaに移行する必要がある理由

ここ数年、当社のホストソフトウェアは主にWPFとWin Formで開発されてきました。これらのテクノロジーはWindowsプラットフォームで非常にうまく機能し、小規模なパイロット生産から今日の大規模なデリバリまでの段階を経てきました。しかし、ビジネスの成長と顧客のニーズの変化に伴い、単一のWindowsテクノロジースタックは私たちが乗り越えなければならないハードルになりました。

继续阅读
同分类 / 同标签 2025/01/26

WPFはカスタムXMLファイルで国際化を実現

この記事では、必要なNuGetパッケージのインストール、言語リストの動的取得、言語の動的切り替え、コードとxamlインターフェイスでの翻訳文字列の使用、開発者がWPFアプリケーションを簡単に国際化できるようにするソースコードへのリンクなど、WPFプログラムでカスタムXMLファイルを使用した国際化の方法について詳しく説明します。

继续阅读
友情链接
リンドヒ YouZack WTM NuGet Next 氷のないコーラ GARFYのブログ Furion 勤勉でない。 残留に執着する。 52ABP Dotnetフルスタック開発 プログラミング研究室。 江沢民の人物 King-AbpVnext-Pro