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>

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

2 个答案: