User avatar
sfernandez
Site Admin
Topic Author
Posts: 2983
Joined: 22 Dec 2011, 19:20

Life Bar

22 Oct 2013, 09:18

Life bar design inspired by Street Fighter IV :)
<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>
And it looks like this:
lifebar-sf4.png
lifebar-sf4.png (3.81 KiB) Viewed 8465 times

Who is online

Users browsing this forum: No registered users and 9 guests