0

I found an example (the first one) for a slider, which defines also a track with thumb.

Is it possible to recode it without resources and templates?

Thank you for your comments.

Erhy

Erhy
  • 92
  • 3
  • 8

2 Answers2

0

I have done it.

Here the XAML code without template and style references for the slider with track and thumb

        <Slider x:Name="slidExample" 
        VerticalAlignment="Center" TickFrequency="37.5"
        Minimum="0" Maximum="600" Value="500" Width="300" Margin="50,0,50,0"
        SnapsToDevicePixels="true"
        OverridesDefaultStyle="true"
        IsTabStop="false"
        Focusable="false"
        >
        <Slider.Style>
            <Style TargetType="Slider">
                <Style.Triggers>
                    <Trigger  Property="Orientation"  Value="Horizontal">
                        <Setter Property="MinHeight" Value="21" />
                        <Setter Property="MinWidth" Value="104" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Slider.Style>

        <Slider.Template>
            <ControlTemplate>
                <Grid x:Name="GridOfslidExample">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TickBar  x:Name="TopTickOfslidExample" Fill="LightGray" VerticalAlignment="Top"
                    SnapsToDevicePixels="True" Grid.Row="0" Placement="Top" Height="5"
                          Visibility="Visible">
                    </TickBar>
                    <Border BorderBrush="LightGray"  BorderThickness="0,0,0,1" ></Border>
                    <Border x:Name="TrackBackground" VerticalAlignment="Center" Margin="0,-10,0,0" BorderBrush="Red" Background="Red" Height="3"   Grid.Row="1"  BorderThickness="1"/>
                    <Track Grid.Row="1" x:Name="PART_Track" Margin="0,-10,0,0"  >
                        <Track.DecreaseRepeatButton>
                            <RepeatButton   Command="Slider.DecreaseLarge" >
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="SnapsToDevicePixels" Value="true" />
                                        <Setter Property="OverridesDefaultStyle" Value="true" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border SnapsToDevicePixels="True" Background="YellowGreen"  BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb x:Name="ThumbOfslidExample">
                                <Thumb.Style>
                                    <Style TargetType="Thumb">
                                        <Setter Property="SnapsToDevicePixels" Value="true" />
                                        <Setter Property="OverridesDefaultStyle" Value="true" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Thumb">
                                                    <StackPanel Orientation="Vertical">
                                                        <Path Data="M 0 0 L 8 0 L 4 6 Z"  Stroke="YellowGreen" Margin="-2,0,0,0" StrokeThickness="2" Fill="YellowGreen"></Path>
                                                        <Line X1="0" Y1="0" X2="0" Y2="7" Stroke="Gray" StrokeThickness="1" Margin="2,0,0,0" StrokeDashArray="1.5,1.5"></Line>
                                                        <TextBlock Foreground="Black" Margin="-2,30,0,0"  Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"/>
                                                    </StackPanel>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Thumb.Style>
                            </Thumb>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="Slider.IncreaseLarge" >
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border Background="Transparent"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <TextBlock Text="0" Grid.Row="1" Margin="0,15,0,0"></TextBlock>
                    <TickBar x:Name="BottomTickOfslidExample" Fill="LightGray"   SnapsToDevicePixels="True" Grid.Row="2"   Placement="Bottom" Height="4" Visibility="Collapsed" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="Slider.TickPlacement"  Value="TopLeft">
                        <Setter TargetName="TopTickOfslidExample" Property="Visibility"  Value="Visible" />
                    </Trigger>
                    <Trigger Property="Slider.TickPlacement" Value="BottomRight">
                        <Setter TargetName="BottomTickOfslidExample"  Property="Visibility"  Value="Visible" />
                    </Trigger>
                    <Trigger Property="Slider.TickPlacement" Value="Both">
                        <Setter TargetName="TopTickOfslidExample" Property="Visibility" Value="Visible" />
                        <Setter TargetName="BottomTickOfslidExample" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Slider.Template>

    </Slider>
Erhy
  • 92
  • 3
  • 8
  • Can it be that the implementation of a control delimits the variation of the XAML syntax? – Erhy Nov 20 '17 at 09:29
-1

I think I have fixed it. The reason of missings commands of RepeatButton was the textfield in thumb. Its name in the new source is "DisplaysValueInThumb". I had to add a converter, because the value of the slider produce many decimal places, which hide the touch area of the repeat button.

Because I was unable to format the source correctly you find the source here.

Erhy

Erhy
  • 92
  • 3
  • 8
  • Please paste the source into the answer and indent it four spaces by selecting the source and pressing Ctrl+K. We strongly discourage links to external archives, because they always go dead and then the answer (or question) is useless. – 15ee8f99-57ff-4f92-890c-b56153 Nov 21 '17 at 00:23