Click here to Skip to main content
15,881,757 members
Articles / Desktop Programming / WPF

WPFSpark: 6 of n: FluidProgressBar

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
19 Jan 2012Ms-PL4 min read 45.1K   1.5K   20  
A Windows Phone style indeterminate ProgressBar in WPF.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFSparkClient">

    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly=local:AppButton, ResourceId=ButtonFocusVisual}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="6,6,-2,-2"
                                   StrokeThickness="2"
                                   Stroke="Orange"
                                   StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- ToggleSwitch Template -->
    <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly=local:AppButton, ResourceId=AppButtonTemplate}"
                     TargetType="{x:Type local:AppButton}">
        <Grid  Margin="8,8,0,0">
            <!--<Border x:Name="Shadow"
                    BorderThickness="0"
                    Background="Black"
                    CornerRadius="0"
                    Opacity="0.5"
                    Margin="8,8,-8,-8"></Border>-->
            <Border x:Name="OuterBorder"
                    BorderThickness="2"
                    Background="DarkOrange"
                    CornerRadius="0">
                <Border.BorderBrush>
                    <LinearGradientBrush StartPoint="0,0"
                                         EndPoint="1,1">
                        <GradientStop Color="#FFC125"
                                      Offset="0.45"></GradientStop>
                        <GradientStop Color="#8B5A00"
                                      Offset="0.55"></GradientStop>
                    </LinearGradientBrush>
                </Border.BorderBrush>
            </Border>
            <TextBlock FontFamily="{TemplateBinding FontFamily}"
                       FontSize="{TemplateBinding FontSize}"
                       Margin="5"
                       Foreground="{TemplateBinding Foreground}"
                       FontWeight="{TemplateBinding FontWeight}"
                       TextAlignment="Left"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Text="{TemplateBinding Content}">
                <TextBlock.Effect>
                    <DropShadowEffect BlurRadius="2"
                                      ShadowDepth="2"
                                      Opacity="0.45"
                                      Direction="-45"></DropShadowEffect>
                </TextBlock.Effect>
            </TextBlock>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="True">
                <Setter TargetName="OuterBorder"
                        Property="Background"
                        Value="Orange"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type local:AppButton}">
        <Setter Property="FocusVisualStyle"
                Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly=local:AppButton, ResourceId=ButtonFocusVisual}}" />
        <!--<Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect BlurRadius="12"
                                  ShadowDepth="8"
                                  Opacity="0.9"
                                  Direction="-45"></DropShadowEffect>
            </Setter.Value>
        </Setter>-->
        <Setter Property="FontFamily"
                Value="Segoe WP"></Setter>
        <Setter Property="FontWeight"
                Value="Light"></Setter>
        <Setter Property="Template"
                Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly=local:AppButton, ResourceId=AppButtonTemplate}}" />
    </Style>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer
United States United States
An individual with more than a decade of experience in desktop computing and mobile app development primarily on the Microsoft platform. He loves programming in C#, WPF & XAML related technologies.
Current interests include web application development, developing rich user experiences across various platforms and exploring his creative side.

Ratish's personal blog: wpfspark.wordpress.com

Comments and Discussions