WPF
Я пытаюсь создать пользовательский элемент управления, который будет размещать изображения на определенных отметках на слайдере.
Моя конечная цель - скопировать функции моего старого оборудования для механической диктовки.Я думаю, чтобы связать каждое изображение с определенным значением слайдера.То есть центральное положение - «Стоп», крайние правые треугольники быстро перематываются и будут иметь пружинное действие, так что они будут «перематывать» звук, пока я удерживаю курсор на них, но когда отпускаюползунок «подпрыгнет» обратно в положение остановки.Крайние левые треугольники сделают то же самое для быстрой перемотки вперед.
Моя самая насущная проблема - как связать каждый треугольник с постоянным значением на ползунке и как сохранить относительные положения каждого треугольника сползунок при изменении размера окна. Или я не в курсе?
Любая помощь или предложения будут наиболее полезны.
Мой пользовательский элемент управления:
<!--Style to replace the default style for the Thumb-->
<Style x:Key="CustomThumbForSlider" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Fill="#FF8F4040" Stroke="#FF000000" Height="15" Width="15"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Style to hide the SliderRepeatButtons and the Track-->
<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="HorizontalSliderTrackNormalBackground" Color="#FFE7EAEA"/>
<LinearGradientBrush x:Key="HorizontalSliderTrackNormalBorder" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFAEB1AF" Offset="0.1"/>
<GradientStop Color="White" Offset=".9"/>
</LinearGradientBrush>
<Style TargetType="{x:Type local:MyCustomSlider}" BasedOn="{StaticResource {x:Type Slider}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyCustomSlider}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Visible" Fill="{TemplateBinding Foreground}" Placement="Top"
Height="8" Grid.Row="0"/>
<TickBar x:Name="BottomTick" Visibility="Visible" Fill="{TemplateBinding Foreground}" Placement="Bottom"
Height="8" Grid.Row="2"/>
<!--The real track is formed by the RepeatButtons. Since I am hiding the RepeatButtons, this border will
act as the visible track for the Thumb.-->
<Border x:Name="TrackBackground"
Background="{StaticResource HorizontalSliderTrackNormalBackground}"
BorderBrush="{StaticResource HorizontalSliderTrackNormalBorder}"
BorderThickness="1" CornerRadius="1"
Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Hidden" x:Name="PART_SelectionRange" Height="4.0"
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
StrokeThickness="1.0"/>
</Canvas>
</Border>
<Border x:Name="Stop" Background="LightBlue" BorderBrush="Gainsboro" BorderThickness="1"
Height="40" Width="40" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Rectangle Height="20" Width="20" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Path Stroke="Black" Data="M 0 0 L -32 20 L 0 40 L 0 0" Fill="LightGreen" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="260,0,0,0"/>
<Path Stroke="Black" Data="M 0 0 L -32 20 L 0 40 L 0 0" Fill="LightGreen" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="240,0,0,0"/>
<Path Stroke="Black" Data="M 0 0 L -32 20 L 0 40 L 0 0" Fill="Green" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="300,0,0,0"/>
<Path Stroke="Black" Data="M 0 0 L 0 40 L 32 20 L 0 0" Fill="Coral" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,280,0"/>
<Path Stroke="Black" Data="M 0 0 L 0 40 L 32 20 L 0 0" Fill="LightBlue" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,220,0"/>
<Path Stroke="Black" Data="M 0 0 L 0 40 L 32 20 L 0 0" Fill="LightCoral" Grid.Row="0" Grid.RowSpan="3"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,200,0"/>
<!--The important thing that makes the slider control is the IncreaseRepeatButton and DecreaseRepeatButton, when
clicked on ends they decrease in the size to the amount of the Tickbar value making the other button grow in
size and that gives us the illusion that the thumb is moving. -->
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
с окном вызова как:
<Window x:Class="TheNewReporterProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TheNewReporterProject"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:MyCustomSlider x:Name="CusomSlider" Height="50" MinHeight="30" Foreground="Green" IsSnapToTickEnabled="True"
TickFrequency=".2"
VerticalAlignment="Top" Margin="46,65,37,0" />
</Grid>
</Window>