使用 Progress XAML 創建 WPF 自定義滑塊

Question

我想制作一個帶有這樣進度的自定義滑塊（請參閱我的照片鏈接）這只是一個簡單的滑塊條，帶有一個小拇指，並在拇指位置的左側顯示進度。 我知道如何使用我在 codeproject 上找到的 gtrackbar 在 VB 中執行此操作，但是，我需要在 C# 中重新創建整個應用程序，但我不知道如何在 XAML 中創建自定義控件樣式。請參閱下面的圖片鏈接：我創建了photoshop 中的這個滑塊，我希望有人能幫我在 XAML WPF 中做到這一點。 https://dl.dropboxusercontent.com/u/61853045/SliderWithProgress.png

Answer 1

嗨，這里有一些您可能會使用的滑塊和進度條。

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

編輯！ 我的錯誤.. 沒有看到您正在尋找控件模板.. 或者這就是我假設您想要的。 讓它留下但是櫃面任何人都可以使用它。

Answer 2

我知道這已經 7 歲了，而原始海報的曾孫現在可能已經即興提出了某種解決方案。 盡管如此，這有 2k 次觀看，我發現它正在尋找對同一問題的簡單答案。 所以我不妨把我最終使用的樣式放在這里，以防有人覺得它有用。

前景設置為深紫色，它看起來像這樣：

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