Use MetroProgressBar control animation in a project without Mahapps.Metro assembly
Question
I am trying to use the existing progress animation MetroProgressBar from MahApps.Metro framework only without the framework as a whole.
Here is what I have tried so far:
Added dictionary 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>
Merging dictionary in App.xaml :
<ResourceDictionary Source="Styles/MetroProgressBar.xaml"/>
Also I have added the class MetroProgressBar.cs , which introduced at this line , following error:
bar.Invoke(resetAction);
Error CS1061 'MetroProgressBar' does not contain a definition for 'Invoke' and no accessible extension method 'Invoke' accepting a first argument of type 'MetroProgressBar' could be found (are you missing a using directive or an assembly reference?)
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>
What do I have to do to correctly implement the required Invoke() method to be able to use MetroProgressBar control?
1 answers
solution1
0 2020-04-24 05:44:49
Unfortunately you need a MetroWindow to show any Dialog shipped with MahApps. That said MahApps is open source, so you can get the code and implement it on your own. Also an integration of MaterialDesign inside a MetroWindow works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
MahApps.Metro Application
How to turn off slide animation on Mahapps.Metro Window on load?
Project with Mahapps.Metro doesn't run on different computer
MahApps.Metro UI WPF
Use normal case in MahApps.Metro Expander controls
MahApps.Metro MetroTabControl with Caliburn
How To Use a XAML Resource As An Icon In Mahapps.Metro Title Bar?
How to use IsAlphaChannelVisible property in MahApps.Metro ColorPicker?
incomplete mahapps.metro dialogs
Applying MahApps.Metro Dark theme
Related Tags