-
-
sfernandez
Site Admin
- Posts: 3222
- Joined:
Life Bar
Life bar design inspired by Street Fighter IV
And it looks like this:

Code: Select all
<Grid
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" mc:Ignorable="d">
<Grid.Resources>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<ControlTemplate.Resources>
<Storyboard x:Key="GlowAnim" AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(Border.BorderBrush).(Brush.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="IndicatorBg"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FFFFEA80"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="IndicatorBg"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FFFF4130"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="Glow" BorderThickness="2" CornerRadius="3" Margin="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#3FFEFF00"/>
<GradientStop Color="#BFFF2F00" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border BorderBrush="#3F000000" BorderThickness="1" CornerRadius="5" Margin="-1"/>
<Border BorderBrush="#BFFFFFFF" BorderThickness="1" CornerRadius="4" Background="#40402010"/>
<Grid x:Name="PART_Track" Margin="3"/>
<Grid x:Name="PART_Indicator" Margin="4" HorizontalAlignment="Right">
<Border Background="#33000000" CornerRadius="1" Margin="-1"/>
<Border x:Name="IndicatorBg" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform ScaleX="-1"/>
</Border.RenderTransform>
<Border.Background>
<LinearGradientBrush EndPoint="300,0" StartPoint="0,0" MappingMode="Absolute">
<GradientStop Color="#FFFFD500" Offset="1"/>
<GradientStop Color="#FFFF1500"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,10"
MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Color="#26FFD500" Offset="0"/>
<GradientStop Color="#26FFD500" Offset="0.4"/>
<GradientStop Color="#66800B00" Offset="0.41"/>
<GradientStop Color="#66800B00" Offset="0.499"/>
<GradientStop Color="#26FF1600" Offset="0.5"/>
<GradientStop Color="#26FF1500" Offset="0.9"/>
<GradientStop Color="#66800B00" Offset="0.91"/>
<GradientStop Color="#66800B00" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<Border BorderBrush="#3F000000" BorderThickness="1" CornerRadius="1" Margin="4"/>
<Border BorderBrush="White" BorderThickness="1" CornerRadius="2" Margin="3"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource GlowAnim}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ProgressBar x:Name="LifeBar" Width="500" Height="40" Minimum="0" Maximum="100" Value="90"/>
</Grid>
Who is online
Users browsing this forum: No registered users and 0 guests