我想制作一个像这样的进度的自定义滑块(请参阅我的照片链接)这只是一个简单的滑动条,带有一个小拇指,并显示拇指位置左侧的进度。我知道如何使用我在codeproject上找到的gtrackbar在VB中执行此操作但是,我需要在C#中重新创建我的整个应用程序,我不知道如何在XAML中创建自定义控件样式。请参阅下面的图像链接:我创建了在photoshop中的这个滑块,我希望有人可以帮助我在XAML WPF中执行此操作。 https://dl.dropboxusercontent.com/u/61853045/SliderWithProgress.png
答案 0 :(得分: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>
修改<!/强> 我的错误..没有看到你正在寻找一个控制模板..或者这就是我想你想要的。但是,任何人都可以使用它。但
答案 1 :(得分:0)
我知道这已经是 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>