繁体   English   中英

在没有 Mahapps.Metro 组件的项目中使用 MetroProgressBar 控件 animation

[英]Use MetroProgressBar control animation in a project without Mahapps.Metro assembly

我正在尝试仅使用MahApps.Metro框架中的现有进度 animation MetroProgressBar而没有整个框架。

这是我到目前为止所尝试的:

添加了字典MetroProgressBar.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Test_Tmp"
                    xmlns:System="clr-namespace:System;assembly=mscorlib">

    <System:Double x:Key="MahApps.Sizes.ProgressBar.MinHeight">6</System:Double>

    <Style x:Key="MahApps.Styles.MetroProgressBar" TargetType="{x:Type local:MetroProgressBar}">
        <Setter Property="Background" Value="#1FFFFFFF" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Foreground" Value="red" />  <!-- replace dynamic ressource from mahapps for demo-->
        <Setter Property="IsTabStop" Value="False" /> 
        <Setter Property="Maximum" Value="100" />
        <Setter Property="MinHeight" Value="{StaticResource MahApps.Sizes.ProgressBar.MinHeight}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:MetroProgressBar}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="IndeterminateStoryboard" RepeatBehavior="Forever">
                            <DoubleAnimation x:Name="MainDoubleAnim"
                                             Storyboard.TargetName="EllipseGrid"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                             Duration="0:0:3.917" />

                            <DoubleAnimationUsingKeyFrames x:Name="E1Anim"
                                                           Storyboard.TargetName="E1"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3" />
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames x:Name="E2Anim"
                                                           Storyboard.TargetName="E2"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.167" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.167" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.167" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames x:Name="E3Anim"
                                                           Storyboard.TargetName="E3"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.333" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.333" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.333" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames x:Name="E4Anim"
                                                           Storyboard.TargetName="E4"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.5" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.5" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames x:Name="E5Anim"
                                                           Storyboard.TargetName="E5"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.667" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.667" />
                                <SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.667" />
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="B1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="100" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="B2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="100" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="B3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.833" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="100" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="B4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="100" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="B5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:1.167" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="100" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetName="EllipseGrid"
                                             Storyboard.TargetProperty="Opacity"
                                             To="1"
                                             Duration="0" />

                            <DoubleAnimation Storyboard.TargetName="DeterminateRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             To="0"
                                             Duration="0" />
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid x:Name="ContainingGrid">
                        <Grid x:Name="EllipseClip" ClipToBounds="True">
                            <Grid x:Name="EllipseGrid" Opacity="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RenderTransform>
                                    <TranslateTransform />
                                </Grid.RenderTransform>
                                <Border x:Name="B1"
                                        Grid.Column="8"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E1"
                                             Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Fill="{TemplateBinding Foreground}"
                                             RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="7" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                <Border x:Name="B2"
                                        Grid.Column="6"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E2"
                                             Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Fill="{TemplateBinding Foreground}"
                                             RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="5" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                <Border x:Name="B3"
                                        Grid.Column="4"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E3"
                                             Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Fill="{TemplateBinding Foreground}"
                                             RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="3" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                <Border x:Name="B4"
                                        Grid.Column="2"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E4"
                                             Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Fill="{TemplateBinding Foreground}"
                                             RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                                <Rectangle Grid.Column="1" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                <Border x:Name="B5"
                                        Grid.Column="0"
                                        RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TranslateTransform />
                                    </Border.RenderTransform>
                                    <Ellipse x:Name="E5"
                                             Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                             Fill="{TemplateBinding Foreground}"
                                             RenderTransformOrigin="0.5,0.5">
                                        <Ellipse.RenderTransform>
                                            <TranslateTransform />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                </Border>
                            </Grid>
                        </Grid>
                        <Grid x:Name="DeterminateRoot"
                              Margin="{TemplateBinding Padding}"
                              Opacity="0">
                            <Border x:Name="PART_Track"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}" />
                            <Rectangle x:Name="PART_Indicator"
                                       HorizontalAlignment="Left"
                                       Fill="{TemplateBinding Foreground}" />
                        </Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsIndeterminate" Value="False">
                            <Setter TargetName="DeterminateRoot" Property="Opacity" Value="1" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="MinHeight" Value="0" />
                            <Setter Property="MinWidth" Value="{StaticResource MahApps.Sizes.ProgressBar.MinHeight}" />
                            <Setter Property="UseLayoutRounding" Value="True" />
                            <Setter TargetName="ContainingGrid" Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="-90" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

App.xaml中合并字典:

<ResourceDictionary Source="Styles/MetroProgressBar.xaml"/>

我还添加了 class MetroProgressBar.cs ,它在这一行引入,出现以下错误:

bar.Invoke(resetAction);

错误 CS1061“MetroProgressBar”不包含“Invoke”的定义,并且找不到接受“MetroProgressBar”类型的第一个参数的可访问扩展方法“Invoke”(您是否缺少 using 指令或程序集引用?)


测试窗口.xaml:

    <Window x:Class="Test_Tmp.TestWindow" x:Name="win"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test_Tmp"
        mc:Ignorable="d"

        Title="TestWindow" Height="450" Width="800">
    <Grid>
      <local:MetroProgressBar IsIndeterminate="True" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
    </Grid>
    </Window>

我必须做什么才能正确实现所需的Invoke()方法才能使用MetroProgressBar控件?

不幸的是,您需要一个MetroWindow来显示 MahApps 附带的任何Dialog 也就是说,MahApps 是开源的,因此您可以获取代码并自行实现。 此外, MetroWindow中的 MaterialDesign 集成也可以工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM