使用 Progress XAML 创建 WPF 自定义滑块

Question

I wanted to make a custom slider with progress like this (please see my photo link) this is just a simple slider bar, with a small thumb and shows the progress on the left side of the location of the thumb. I know how to do this in VB using gtrackbar I found on codeproject however, I need to recreate my whole application in C# and I don't know how to create a custom control style in XAML.Please see my image link below: I created this slider in photoshop and I am hoping if someone can help me do this in XAML WPF. https://dl.dropboxusercontent.com/u/61853045/SliderWithProgress.png

Answer 1

Hi here are some sliders and progressbars you could probably use..

 <StackPanel>
    <Slider Name="Slider1" TickFrequency="10" Interval="10" Delay="0" TickPlacement="BottomRight" Margin="50 50 50 10" Maximum="100"/>
    <Slider Name="Slider2" Ticks="5 10 15 35 60 90 100" TickPlacement="BottomRight" Margin="50 10 50 10" Maximum="100"
            IsSelectionRangeEnabled="True" SelectionStart="15" SelectionEnd="90"/>

    <ProgressBar Height="20"  Width="200" IsIndeterminate="True" Opacity="1">
        <ProgressBar.OpacityMask>
            <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.95,0.95">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="Black"/>
                    <GradientStop Offset="1" Color="Transparent"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </ProgressBar.OpacityMask>
    </ProgressBar>

    <ProgressBar Height="25"  Width="200" IsIndeterminate="True" BorderBrush="Black" Opacity="1" Margin="10" >
        <ProgressBar.Template>
            <ControlTemplate TargetType="ProgressBar" >
                <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
                    <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
                    <Border CornerRadius="6" Margin="0">
                        <Border.Background>
                            <SolidColorBrush Color="Transparent"/>
                        </Border.Background>
                    </Border>
                    <Border BorderThickness="1" BorderBrush="Gray" Margin="0" Opacity="0.4">
                        <Border.Background>
                            <SolidColorBrush Color="LightGray"/>
                        </Border.Background>
                    </Border>
                    <Rectangle Name="PART_Track" Margin="0" />
                    <Decorator Name="PART_Indicator" Margin="0" HorizontalAlignment="Left">
                        <Grid Name="Foreground">
                            <Rectangle Fill="Transparent" Name="Indicator" />
                            <Grid Name="Animation" ClipToBounds="True">
                                <Border Name="PART_GlowRect" Width="30"  Margin="0" HorizontalAlignment="Left" Background="LightBlue"/>
                            </Grid>
                            <Grid Name="Overlay">
                            </Grid>
                        </Grid>
                    </Decorator>
                    <Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
                </Grid>
            </ControlTemplate>
        </ProgressBar.Template>
    </ProgressBar>

    <ProgressBar Height="20"  Width="200" IsIndeterminate="True" BorderBrush="Black" Opacity="1" >
        <ProgressBar.OpacityMask>
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#FF000000"/>
                    <GradientStop Offset="1" Color="#00000000"/>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </ProgressBar.OpacityMask>
    </ProgressBar>

    <ProgressBar Height="50"  Width="200" IsIndeterminate="True" BorderBrush="Black" Opacity="1" >
        <ProgressBar.OpacityMask>
            <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush>
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Offset="0" Color="Black" />
                                    <GradientStop Offset="1" Color="Transparent" />
                                </RadialGradientBrush.GradientStops>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Pen>
                            <Pen Thickness="0.1" Brush="Black" />
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </ProgressBar.OpacityMask>
    </ProgressBar>

    <Button Name="ButtonClose" Margin="50 10 50 10" Content="Close" Click="ButtonClose_Click" IsCancel="True" />
</StackPanel>

EDIT! My mistake.. didn't see you were looking for a Control template.. Or that's what i am assuming you want. Letting this stay however incase anyone can use it.

Answer 2

I know this is 7 years old and the original poster's great grandchildren have probably improvised some kind of a solution by now. Nevertheless this has 2k views and I came upon it looking for an easy answer to the same problem. So I might as well put the style I ended up using here in case anyone finds it useful.

With foreground set to a dark purple it looks like this:

<Style x:Key="RepeatButtonTransparent"
       TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Focusable"
            Value="false" />
    <Setter Property="IsTabStop"
            Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Rectangle Width="{TemplateBinding Width}"
                           Height="{TemplateBinding Height}"
                           Fill="{TemplateBinding Background}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<ControlTemplate x:Key="SliderThumbHorizontalDefault"
                 TargetType="{x:Type Thumb}">
    <Grid HorizontalAlignment="Center"
          VerticalAlignment="Center"
          UseLayoutRounding="True">
        <Path x:Name="grip"
              VerticalAlignment="Center"
              Fill="{StaticResource MediaPlayerButtonBrush}"
              SnapsToDevicePixels="True"
              Stretch="Fill"
              UseLayoutRounding="True">
            <Path.Data>
                <EllipseGeometry Center="0,0"
                                 RadiusX="10"
                                 RadiusY="10" />
            </Path.Data>
        </Path>
    </Grid>
</ControlTemplate>
<ControlTemplate x:Key="SliderHorizontal"
                 TargetType="{x:Type Slider}">
    <Border x:Name="border"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            SnapsToDevicePixels="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto"
                               MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Border x:Name="TrackBackground"
                    Grid.Row="1"
                    Height="4.0"
                    Margin="5,0"
                    VerticalAlignment="center"
                    Background="{TemplateBinding Foreground}" />
            <Border x:Name="TrackDarkener"
                    Grid.Row="1"
                    Width="{Binding ActualWidth, ElementName=RightRepeatButton}"
                    Height="4.0"
                    Margin="5,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Background="#FF666666" />
            <Track x:Name="PART_Track"
                   Grid.Row="1">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
                                  Style="{StaticResource RepeatButtonTransparent}" />
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton x:Name="RightRepeatButton"
                                  Command="{x:Static Slider.IncreaseLarge}"
                                  Style="{StaticResource RepeatButtonTransparent}" />
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb x:Name="Thumb"
                           Width="12"
                           Height="12"
                           VerticalAlignment="Center"
                           Focusable="False"
                           OverridesDefaultStyle="True"
                           Template="{StaticResource SliderThumbHorizontalDefault}" />
                </Track.Thumb>
            </Track>
        </Grid>
    </Border>
</ControlTemplate>
<Style x:Key="MediaPlayerSliderStyle"
       TargetType="{x:Type Slider}">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="Foreground"
            Value="{StaticResource MediaPlayerButtonBrush}" />
    <Setter Property="Template"
            Value="{StaticResource SliderHorizontal}" />
    <Setter Property="IsMoveToPointEnabled"
            Value="True" />
</Style>