Как создать кольцо прогресса, такое как стиль Windows 8 в WPF?

Я хочу показать прогресс в моих настольных приложениях, таких как Windows 8 ProgressRing. Этот тип прогресса отображается во время установки или при запуске Windows, но этот элемент управления может использоваться во многих приложениях как очень чистый и современный, но я не знаю, как этого добиться. Изображение цикла выполнения находится здесь.

Посмотрите изображение:

enter image description here

Могу ли я узнать, как я могу его кодировать, это может быть в XAML или в коде? Я видел, что в WPF ProgressRing управления нет, поэтому я должен перейти к некоторому настраиваемому элементу управления. Идея ссылки или предложения, пожалуйста, как я могу продолжить.

ОТВЕТЫ

Ответ 1

Использование MahApps.Metro было бы намного проще, но ниже приведен простой индикатор ожидания Metro, показанный, как это будет сделано в XAML.

<Viewbox>
        <Canvas Width="50" Height="50"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#FFFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform >
                    <RotateTransform x:Name="_rot1" Angle="0"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot1"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#DDFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot2" Angle="13"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot2"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="13"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="13"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-347">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-347"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#BBFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot3" Angle="26"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot3"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="26"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="26"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="-334">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-334"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>

            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#99FFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot4" Angle="39"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot4"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="39"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="39"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="-321">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-321"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#77FFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot5" Angle="52"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot5"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="52"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="52"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="-308">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-308"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
        </Canvas>
    </Viewbox>

Это по существу тот же объект Path, заполненный круг, используемый 5 раз, с 5 различными углами поворота и 5 различными значениями непрозрачности для заливки.

Несомненно, есть более эффективный способ сделать это, но этот метод показывает анимацию и тайминги, а также облегчение, чтобы придать ей более естественное, менее резкое чувство, когда круги вращаются и останавливаются.

Ответ 2

Используйте ProgressRing из MahApps.Metro:

Элемент управления ProgressRing создается после аналогичного элемента управления в Windows 8 для указания активности, а не процента достигнутого прогресса.

Пример:

<Controls:ProgressRing IsActive="True" />

Чтобы изменить размер колец, вам нужно установить Width и Height. Кроме того, вы можете установить другой цвет для каждого кольца и установить размер меньше установленного. Чтобы сделать это и получить этот элемент управления без установки полного пакета MahApps.Metro, посмотрите на мой предыдущий ответ:

Сделайте ProgressRing в MahApps.Metro Меньше