Click here to Skip to main content
15,886,063 members
Search within:


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.2K   1.5K   20  
A Windows Phone style indeterminate ProgressBar in WPF.
 
<Window x:Class="WPFSparkClient.ToggleSwitchDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToggleSwitch Demo"
        Height="441"
        Width="464"
        xmlns:wpfspark="clr-namespace:WPFSpark;assembly=WPFSpark"
        Background="Wheat">
    <Window.Resources>
        <LinearGradientBrush x:Key="CheckedStateBrush"
                             EndPoint="0,1"
                             StartPoint="0,0">
            <GradientStop Color="#1E41A5"
                          Offset="0" />
            <GradientStop Color="#2F6AEA"
                          Offset="0.5" />
            <GradientStop Color="#6298FE"
                          Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="UncheckedStateBrush"
                             EndPoint="0,1"
                             StartPoint="0,0">
            <GradientStop Color="#FF81230E" />
            <GradientStop Color="#FFF15910"
                          Offset="0.365" />
            <GradientStop Color="#FFF5A782"
                          Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="UncheckedStateBrushBW"
                             EndPoint="0,1"
                             StartPoint="0,0">
            <GradientStop Color="#FF454343"
                          Offset="0.004" />
            <GradientStop Color="#FFB8B8B8"
                          Offset="0.364" />
            <GradientStop Color="#F1F1F1"
                          Offset="1" />
        </LinearGradientBrush>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="281*" />
            <RowDefinition Height="121*" />
        </Grid.RowDefinitions>
        <Label Content="Option1"
               Height="38"
               HorizontalAlignment="Left"
               Margin="52,35,0,0"
               Name="label1"
               VerticalAlignment="Top"
               Width="141"
               FontSize="18"
               HorizontalContentAlignment="Right" />
        <Label Content="Option2"
               FontSize="18"
               Height="38"
               HorizontalAlignment="Left"
               HorizontalContentAlignment="Right"
               Margin="52,109,0,0"
               Name="label2"
               VerticalAlignment="Top"
               Width="141" />
        <Label Content="Option3"
               FontSize="18"
               Height="38"
               HorizontalAlignment="Left"
               HorizontalContentAlignment="Right"
               Margin="52,187,0,0"
               Name="label3"
               VerticalAlignment="Top"
               Width="141" />
        <Label Content="Option4"
               FontSize="18"
               Height="38"
               HorizontalAlignment="Left"
               HorizontalContentAlignment="Right"
               Margin="52,261,0,0"
               Name="label4"
               VerticalAlignment="Top"
               Width="141"
               Grid.RowSpan="2" />
        <Label Content="Option5"
               FontSize="18"
               Height="38"
               HorizontalAlignment="Left"
               HorizontalContentAlignment="Right"
               Margin="52,55,0,0"
               Name="label5"
               VerticalAlignment="Top"
               Width="141"
               Grid.Row="1" />
        <wpfspark:ToggleSwitch Background="Black"
                               ThumbWidth="70"
                               BorderThickness="2"
                               CheckedForeground="White"
                               CheckedText=""
                               CornerRadius="10"
                               FontFamily="Tahoma"
                               FontSize="18"
                               FontWeight="Normal"
                               Height="37"
                               HorizontalAlignment="Left"
                               Margin="228,36,0,0"
                               x:Name="toggleSwitch3"
                               Padding="0"
                               ThumbBorderThickness="2"
                               ThumbCornerRadius="7"
                               ThumbGlowColor="Gray"
                               ThumbShineCornerRadius="6,6,3,3"
                               UncheckedForeground="Black"
                               UncheckedText=""
                               VerticalAlignment="Top"
                               Width="98"
                               UncheckedBackground="{DynamicResource UncheckedStateBrush}">
            <wpfspark:ToggleSwitch.CheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#FF106011"
                                  Offset="0" />
                    <GradientStop Color="#FF1DB43B"
                                  Offset="0.496" />
                    <GradientStop Color="#FF62FE7A"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.CheckedBackground>
            <wpfspark:ToggleSwitch.BorderBrush>
                <LinearGradientBrush EndPoint="0,0"
                                     StartPoint="0,1">
                    <GradientStop Color="#959595"
                                  Offset="0" />
                    <GradientStop Color="#A1A1A1"
                                  Offset="0.5" />
                    <GradientStop Color="#555555"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.BorderBrush>
            <wpfspark:ToggleSwitch.ThumbBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#C1C1C1"
                                  Offset="0" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#FCFCF6"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBackground>
            <wpfspark:ToggleSwitch.ThumbBorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#F6F6F6"
                                  Offset="0" />
                    <GradientStop Color="#959595"
                                  Offset="0.5" />
                    <GradientStop Color="#565656"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBorderBrush>
        </wpfspark:ToggleSwitch>
        <wpfspark:ToggleSwitch Name="TestTogSw"
                               Background="Black"
                               ThumbWidth="35"
                               BorderThickness="2"
                               CheckedForeground="White"
                               CheckedText="Yes"
                               CornerRadius="19"
                               FontFamily="Tahoma"
                               FontSize="18"
                               FontWeight="Normal"
                               Height="37"
                               HorizontalAlignment="Left"
                               Margin="228,110,0,0"
                               Padding="0"
                               ThumbBorderThickness="2"
                               ThumbCornerRadius="21"
                               ThumbGlowColor="Gray"
                               ThumbShineCornerRadius="20,20,0,0"
                               UncheckedForeground="Black"
                               UncheckedText="No"
                               VerticalAlignment="Top"
                               Width="98"
                               UncheckedBackground="{StaticResource UncheckedStateBrush}"
                               IsCheckedLeft="False"
                               CheckedToolTip=""
                               UncheckedToolTip="No">
            <wpfspark:ToggleSwitch.BorderBrush>
                <LinearGradientBrush EndPoint="0,0"
                                     StartPoint="0,1">
                    <GradientStop Color="#959595"
                                  Offset="0" />
                    <GradientStop Color="#A1A1A1"
                                  Offset="0.5" />
                    <GradientStop Color="#555555"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.BorderBrush>
            <wpfspark:ToggleSwitch.CheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#1E41A5"
                                  Offset="0" />
                    <GradientStop Color="#2F6AEA"
                                  Offset="0.5" />
                    <GradientStop Color="#6298FE"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.CheckedBackground>
            <wpfspark:ToggleSwitch.ThumbBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#C1C1C1"
                                  Offset="0" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#FCFCF6"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBackground>
            <wpfspark:ToggleSwitch.ThumbBorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#F6F6F6"
                                  Offset="0" />
                    <GradientStop Color="#959595"
                                  Offset="0.5" />
                    <GradientStop Color="#565656"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBorderBrush>
        </wpfspark:ToggleSwitch>
        <wpfspark:ToggleSwitch Background="Black"
                               ThumbWidth="25"
                               BorderThickness="2"
                               CheckedForeground="White"
                               CheckedText="True"
                               CornerRadius="10"
                               FontFamily="Tahoma"
                               FontSize="18"
                               FontWeight="Normal"
                               Height="37"
                               HorizontalAlignment="Left"
                               Margin="228,187,0,0"
                               x:Name="toggleSwitch2"
                               Padding="0"
                               ThumbBorderThickness="2"
                               ThumbCornerRadius="7"
                               ThumbGlowColor="Gray"
                               ThumbShineCornerRadius="6,6,3,3"
                               UncheckedForeground="Black"
                               UncheckedText="False"
                               VerticalAlignment="Top"
                               Width="98"
                               CheckedToolTip="True"
                               UncheckedToolTip="False">
            <wpfspark:ToggleSwitch.UncheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#626262"
                                  Offset="0.1" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#F1F1F1"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.UncheckedBackground>
            <wpfspark:ToggleSwitch.BorderBrush>
                <LinearGradientBrush EndPoint="0,0"
                                     StartPoint="0,1">
                    <GradientStop Color="#959595"
                                  Offset="0" />
                    <GradientStop Color="#A1A1A1"
                                  Offset="0.5" />
                    <GradientStop Color="#555555"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.BorderBrush>
            <wpfspark:ToggleSwitch.CheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#1E41A5"
                                  Offset="0" />
                    <GradientStop Color="#2F6AEA"
                                  Offset="0.5" />
                    <GradientStop Color="#6298FE"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.CheckedBackground>
            <wpfspark:ToggleSwitch.ThumbBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#C1C1C1"
                                  Offset="0" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#FCFCF6"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBackground>
            <wpfspark:ToggleSwitch.ThumbBorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#F6F6F6"
                                  Offset="0" />
                    <GradientStop Color="#959595"
                                  Offset="0.5" />
                    <GradientStop Color="#565656"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBorderBrush>
        </wpfspark:ToggleSwitch>
        <wpfspark:ToggleSwitch Background="Black"
                               BorderThickness="2"
                               CheckedForeground="White"
                               CheckedText="Ja"
                               CornerRadius="10"
                               FontFamily="Tahoma"
                               FontSize="18"
                               FontWeight="Normal"
                               Height="37"
                               HorizontalAlignment="Left"
                               Margin="228,259,0,0"
                               x:Name="toggleSwitch4"
                               Padding="0"
                               ThumbBorderThickness="2"
                               ThumbCornerRadius="7"
                               ThumbGlowColor="Gray"
                               ThumbShineCornerRadius="6,6,5,5"
                               UncheckedForeground="Black"
                               UncheckedText="Nein"
                               VerticalAlignment="Top"
                               Width="98"
                               Grid.RowSpan="2">
            <wpfspark:ToggleSwitch.BorderBrush>
                <LinearGradientBrush EndPoint="0,0"
                                     StartPoint="0,1">
                    <GradientStop Color="#959595"
                                  Offset="0" />
                    <GradientStop Color="#A1A1A1"
                                  Offset="0.5" />
                    <GradientStop Color="#555555"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.BorderBrush>
            <wpfspark:ToggleSwitch.CheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#1E41A5"
                                  Offset="0" />
                    <GradientStop Color="#2F6AEA"
                                  Offset="0.5" />
                    <GradientStop Color="#6298FE"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.CheckedBackground>
            <wpfspark:ToggleSwitch.ThumbBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#C1C1C1"
                                  Offset="0" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#FCFCF6"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBackground>
            <wpfspark:ToggleSwitch.ThumbBorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#F6F6F6"
                                  Offset="0" />
                    <GradientStop Color="#959595"
                                  Offset="0.5" />
                    <GradientStop Color="#565656"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBorderBrush>
            <wpfspark:ToggleSwitch.UncheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#626262"
                                  Offset="0.1" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#F1F1F1"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.UncheckedBackground>
        </wpfspark:ToggleSwitch>
        <wpfspark:ToggleSwitch Background="Wheat"
                               BorderBrush="Black"
                               BorderThickness="2"
                               CheckedBackground="Wheat"
                               CheckedForeground="Black"
                               CheckedText="On"
                               CornerRadius="0"
                               FontFamily="Tahoma"
                               FontSize="18"
                               FontWeight="Normal"
                               Height="37"
                               HorizontalAlignment="Left"
                               Margin="228,53,0,0"
                               x:Name="toggleSwitch5"
                               Padding="0"
                               ThumbBackground="Wheat"
                               ThumbBorderBrush="#444444"
                               ThumbBorderThickness="2"
                               ThumbCornerRadius="0"
                               ThumbGlowColor="Gray"
                               UncheckedBackground="Wheat"
                               UncheckedForeground="Black"
                               UncheckedText="Off"
                               VerticalAlignment="Top"
                               Width="98"
                               Grid.Row="1">
            <!--<wpfspark:ToggleSwitch.BorderBrush>
                <LinearGradientBrush EndPoint="0,0"
                                     StartPoint="0,1">
                    <GradientStop Color="#959595"
                                  Offset="0" />
                    <GradientStop Color="#A1A1A1"
                                  Offset="0.5" />
                    <GradientStop Color="#555555"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.BorderBrush>
            <wpfspark:ToggleSwitch.CheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#1E41A5"
                                  Offset="0" />
                    <GradientStop Color="#2F6AEA"
                                  Offset="0.5" />
                    <GradientStop Color="#6298FE"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.CheckedBackground>
            <wpfspark:ToggleSwitch.ThumbBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#C1C1C1"
                                  Offset="0" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#FCFCF6"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBackground>
            <wpfspark:ToggleSwitch.ThumbBorderBrush>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#F6F6F6"
                                  Offset="0" />
                    <GradientStop Color="#959595"
                                  Offset="0.5" />
                    <GradientStop Color="#565656"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.ThumbBorderBrush>
            <wpfspark:ToggleSwitch.UncheckedBackground>
                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                    <GradientStop Color="#626262"
                                  Offset="0.1" />
                    <GradientStop Color="#A5A5A5"
                                  Offset="0.5" />
                    <GradientStop Color="#F1F1F1"
                                  Offset="1" />
                </LinearGradientBrush>
            </wpfspark:ToggleSwitch.UncheckedBackground>-->
        </wpfspark:ToggleSwitch>
        <!--<TextBlock Height="23"
                   HorizontalAlignment="Left"
                   Margin="364,121,0,0"
                   Name="textBlock1"
                   Text="{Binding ElementName=TestTogSw, Path=IsChecked}"
                   VerticalAlignment="Top" />-->
    </Grid>
</Window>

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
Ratish Philip
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

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 21 Dec 2011

Article Copyright 2011 by Ratish Philip
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1