在没有Mahapps.Metro程序集的项目中使用MetroProgressBar控件动画。

我正试图使用现有的进度动画 MetroProgressBarMahApps.Metro 只有框架而没有整体框架。

下面是我目前尝试的内容。

添加了字典 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"/>

另外,我还增加了班级 MetroProgressBar.cs,它在 这一行以下是错误信息。

bar.Invoke(resetAction);

错误 CS1061 ‘MetroProgressBar’不包含’Invoke’的定义,并且找不到接受第一个参数类型为’MetroProgressBar’的可访问扩展方法’Invoke’(你是否缺少一个使用指令或汇编引用?


TestWindow.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 以显示任何 Dialog 与MahApps一起出货。话说MahApps是开源的,所以你可以自己获取代码并实现。也是MaterialDesign的集成,在一个 MetroWindow 作品。

给TA打赏
共{{data.count}}人
人已打赏
未分类

将两个Oracle SQL查询合并为一个

2022-9-8 16:19:37

未分类

我不能在5版中使用this.props.navigation.navigate。

2022-9-8 16:19:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索