DiamonDogX

How would I use JUST the aero style progress bar style for one of my progress bars in my app



Re: Windows Presentation Foundation (WPF) Aero progress bar style?

Yi-Lun Luo - MSFT

Hello, what do you mean by ¡°just Aero¡± Do you want the ProgressBar to render in Aero style on Windows XP If so, you may first create a ProgressBar in Windows Vista. Use Blend to investigate its Style. Here¡¯s what I get:

Code Snippet

<LinearGradientBrush x:Key="ProgressBarBackground" EndPoint="1,0" StartPoint="0,0">

<GradientStop Color="#BABABA" Offset="0"/>

<GradientStop Color="#C7C7C7" Offset="0.5"/>

<GradientStop Color="#BABABA" Offset="1"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarBorderBrush" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#B2B2B2" Offset="0"/>

<GradientStop Color="#8C8C8C" Offset="1"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarGlassyHighlight" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#50FFFFFF" Offset="0.5385"/>

<GradientStop Color="#00FFFFFF" Offset="0.5385"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarTopHighlight" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#80FFFFFF" Offset="0.05"/>

<GradientStop Color="#00FFFFFF" Offset="0.25"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" StartPoint="-100,0" MappingMode="Absolute">

<GradientStop Color="#00000000" Offset="0"/>

<GradientStop Color="#FF000000" Offset="0.4"/>

<GradientStop Color="#FF000000" Offset="0.6"/>

<GradientStop Color="#00000000" Offset="1"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft" EndPoint="1,0" StartPoint="0,0">

<GradientStop Color="#0C000000" Offset="0"/>

<GradientStop Color="#20000000" Offset="0.3"/>

<GradientStop Color="#00000000" Offset="1"/>

</< SPAN>LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight" EndPoint="1,0" StartPoint="0,0">

<GradientStop Color="#00000000" Offset="0"/>

<GradientStop Color="#20000000" Offset="0.7"/>

<GradientStop Color="#0C000000" Offset="1"/>

</< SPAN>LinearGradientBrush>

<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft" RelativeTransform="1,0,0,1,0.5,0.5" RadiusX="1" RadiusY="1">

<GradientStop Color="#60FFFFC4" Offset="0"/>

<GradientStop Color="#00FFFFC4" Offset="1"/>

</< SPAN>RadialGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect" EndPoint="0,0" StartPoint="0,1">

<GradientStop Color="#60FFFFC4" Offset="0"/>

<GradientStop Color="#00FFFFC4" Offset="1"/>

</< SPAN>LinearGradientBrush>

<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight" RelativeTransform="1,0,0,1,-0.5,0.5" RadiusX="1" RadiusY="1">

<GradientStop Color="#60FFFFC4" Offset="0"/>

<GradientStop Color="#00FFFFC4" Offset="1"/>

</< SPAN>RadialGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#90FFFFFF" Offset="0.5385"/>

<GradientStop Color="#00FFFFFF" Offset="0.5385"/>

</< SPAN>LinearGradientBrush>

<Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">

<Setter Property="Foreground" Value="#01D328"/>

<Setter Property="Background" Value="{StaticResource ProgressBarBackground}"/>

<Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderBrush}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ProgressBar}">

<Grid SnapsToDevicePixels="true" x:Name="Background">

<Rectangle Fill="{TemplateBinding Background}" RadiusX="2" RadiusY="2"/>

<Border Margin="1" Background="{StaticResource ProgressBarGlassyHighlight}" CornerRadius="2"/>

<Border Margin="1" Background="{StaticResource ProgressBarTopHighlight}" BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1"/>

<Rectangle Margin="1" x:Name="PART_Track"/>

<Decorator HorizontalAlignment="Left" Margin="1" x:Name="PART_Indicator">

<Grid x:Name="Foreground">

<Grid.ColumnDefinitions>

<ColumnDefinition MaxWidth="15"/>

<ColumnDefinition Width="0.1*"/>

<ColumnDefinition MaxWidth="15"/>

</< SPAN>Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

</< SPAN>Grid.RowDefinitions>

<Rectangle Fill="{TemplateBinding Foreground}" x:Name="Indicator" Grid.ColumnSpan="3" Grid.RowSpan="2"/>

<Rectangle Fill="{TemplateBinding Foreground}" x:Name="Animation" Grid.ColumnSpan="3" Grid.RowSpan="2">

<Rectangle.OpacityMask>

<MultiBinding>

<MultiBinding.Converter>

<Microsoft_Windows_Themes:ProgressBarHighlightConverter/>

</< SPAN>MultiBinding.Converter>

<Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>

<Binding Path="ActualWidth" ElementName="Background"/>

<Binding Path="ActualHeight" ElementName="Background"/>

</< SPAN>MultiBinding>

</< SPAN>Rectangle.OpacityMask>

</< SPAN>Rectangle>

<Rectangle Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}" RadiusX="1" RadiusY="1" Margin="1,1,0,1" x:Name="LeftDark" Grid.RowSpan="2"/>

<Rectangle Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}" RadiusX="1" RadiusY="1" Margin="0,1,1,1" x:Name="RightDark" Grid.Column="2" Grid.RowSpan="2"/>

<Rectangle Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}" x:Name="LeftLight" Grid.Column="0" Grid.Row="2"/>

<Rectangle Fill="{StaticResource ProgressBarIndicatorLightingEffect}" x:Name="CenterLight" Grid.Column="1" Grid.Row="2"/>

<Rectangle Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}" x:Name="RightLight" Grid.Column="2" Grid.Row="2"/>

<Border x:Name="Highlight1" Background="{StaticResource ProgressBarIndicatorGlassyHighlight}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>

<Border x:Name="Highlight2" Background="{StaticResource ProgressBarTopHighlight}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>

</< SPAN>Grid>

</< SPAN>Decorator>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>

</< SPAN>Grid>

<ControlTemplate.Triggers>

<Trigger Property="Orientation" Value="Vertical">

<Setter Property="LayoutTransform" TargetName="Background">

<Setter.Value>

<RotateTransform Angle="-90"/>

</< SPAN>Setter.Value>

</< SPAN>Setter>

<Setter Property="LayoutTransform" TargetName="PART_Track">

<Setter.Value>

<RotateTransform Angle="90"/>

</< SPAN>Setter.Value>

</< SPAN>Setter>

<Setter Property="LayoutTransform" TargetName="PART_Indicator">

<Setter.Value>

<RotateTransform Angle="90"/>

</< SPAN>Setter.Value>

</< SPAN>Setter>

<Setter Property="LayoutTransform" TargetName="Foreground">

<Setter.Value>

<RotateTransform Angle="-90"/>

</< SPAN>Setter.Value>

</< SPAN>Setter>

</< SPAN>Trigger>

<Trigger Property="IsIndeterminate" Value="true">

<Setter Property="Visibility" TargetName="LeftDark" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="RightDark" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="LeftLight" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="CenterLight" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="RightLight" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>

</< SPAN>Trigger>

<Trigger Property="IsIndeterminate" Value="false">

<Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>

</< SPAN>Trigger>

</< SPAN>ControlTemplate.Triggers>

</< SPAN>ControlTemplate>

</< SPAN>Setter.Value>

</< SPAN>Setter>

</< SPAN>Style>

As you can see, the only thing related to Aero theme is this Microsoft_Windows_ThemesStick out tonguerogressBarHighlightConverter. So you can create your own ProgressBarHighlightConverter. Fortunately, it¡¯s easy. Here¡¯s the code from reflector:

Code Snippet

public class ProgressBarHighlightConverter : IMultiValueConverter

{

// Methods

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

{

Type type = typeof(double);

if ((((values == null) || (values.Length != 3)) || ((values[0] == null) || (values[1] == null))) || (((values[2] == null) || !typeof(Brush).IsAssignableFrom(values[0].GetType())) || (!type.IsAssignableFrom(values[1].GetType()) || !type.IsAssignableFrom(values[2].GetType()))))

{

return null;

}

Brush brush = (Brush)values[0];

double d = (double)values[1];

double num2 = (double)values[2];

if ((((d <= 0) || double.IsInfinity(d)) || (double.IsNaN(d) || (num2 <= 0))) || (double.IsInfinity(num2) || double.IsNaN(num2)))

{

return null;

}

DrawingBrush brush2 = new DrawingBrush();

double width = d * 2;

brush2.Viewport = brush2.Viewbox = new Rect(-d, 0, width, num2);

brush2.ViewportUnits = brush2.ViewboxUnits = BrushMappingMode.Absolute;

brush2.TileMode = TileMode.None;

brush2.Stretch = Stretch.None;

DrawingGroup group = new DrawingGroup();

DrawingContext context = group.Open();

context.DrawRectangle(brush, null, new Rect(-d, 0, d, num2));

TimeSpan keyTime = TimeSpan.FromSeconds(width / 200);

TimeSpan span2 = TimeSpan.FromSeconds(1);

DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames

{

BeginTime = new TimeSpan (TimeSpan.Zero),

Duration = new Duration(keyTime + span2),

RepeatBehavior = RepeatBehavior.Forever

};

animation.KeyFrames.Add(new LinearDoubleKeyFrame(width, keyTime));

TranslateTransform transform = new TranslateTransform();

transform.BeginAnimation(TranslateTransform.XProperty, animation);

brush2.Transform = transform;

context.Close();

brush2.Drawing = group;

return brush2;

}

public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)

{

return null;

}

}






Re: Windows Presentation Foundation (WPF) Aero progress bar style?

vvatclor

Hi,

How did you found it in reflector the code you've posted. Sorry I havent used reflector before and I want to learn those kind of stuff.

thanks




Re: Windows Presentation Foundation (WPF) Aero progress bar style?

aquaseal

You can download reflector here: http://www.aisto.com/roeder/dotnet/ and once installed, open it up and goto File -> Open and look for PresentationFramework.Aero.dll (Found mine at C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0). Load that assembly up and then expand PresentationFramework.Aero, then expand PresentationFramework.Aero.dll, then expand Microsoft.Themes.dll and you will see the ProgressBarHighlightConverter class. Right-click on that class and select 'Disassemble'. Then to the right you will see the class; select 'Expand Methods' to see the entire code for the class.

And if you want to see the code for 'ProgressBarBrushConverter', look in the assembly named PresentationFramework.Luna.dll, just like the above mentions.

There were some minor errors when I copied the code over to use in my project, nothing major though, all syntax related. Jut correct those errors and your good to go! Hope that helps.





Re: Windows Presentation Foundation (WPF) Aero progress bar style?

vvatclor

Thanks a lot!!!




Re: Windows Presentation Foundation (WPF) Aero progress bar style?

Moon Flower

Re: How would I use JUST the aero style progress bar style for one of my progress bars in my app

Be simply!

Uri uriTheme = new Uri("/PresentationFramework.Aero;V3.0.0.0;31bf3856ad364e35;component/themes/Aero.Normalcolor.xaml", UriKind.Relative);

ResourceDictionary ResDic = new ResourceDictionary();
ResDic.Source = uriTheme;
progressBar.Resources.MergedDictionaries.Add(ResDic);





Re: Windows Presentation Foundation (WPF) Aero progress bar style?

aquaseal

Also, I posted some examples of how to template a progressbar and provided the full source code at the bottom of the page found here:

http://www.theamoebaproject.com/node/31

Included in the source code is an example of the vista style progressbar. Hope that helps!