CODEWITHSUNDEEP
vb.netslidervisual-studio-2017
Seth Haberman
Seth Haberman

Reputation: 141

Custom Thumb Image for WPF Slider

I am trying to set a custom image for the Thumb on a slider in a Visual Basic WPF application. All I could find was doing some shape and color customizing. I couldn't find out how to set a custom slider image. How would I take the image below and set it as the thumb image?

Slider

EDIT

I couldn't get that to work. I got a "Thumb" target type does not match type of element "Slider" with the code below. I'm not sure how to edit the properties of the "Thumb". I can't find anything online that contains some sort of Thumb code inside the 2 tags. If I set a Thumb style and try to apply it to the slider "Style" attribute, there is some sort of mismatch between the thumb style and the slider control. Can you customize the thumb of a slider all within a single Tag?

<Slider Margin="902,104,105,384" RenderTransformOrigin="0.5,0.5" Orientation="Vertical" Minimum ="0" Maximum="255">
        <Slider.Style>
            <Style TargetType="Thumb">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <StackPanel Width="160"
                      Height="80"
                      Background="#FFFFFF"
                      Orientation="Horizontal">
                                    <Image Width="78"
                   Height="78"
                   Margin="0"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Source="Images/TBar.png" />

                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>
        </Slider.Style>    
    </Slider>

Upvotes: 0

Views: 1972

Answers (1)

Walt Ritscher
Walt Ritscher

Reputation: 7037

Here's some XAML for changing the Thumb properties in a Style setter.

<Window.Resources>
    <Style TargetType="Thumb">

      <Style.Setters>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
              <StackPanel Width="160"
                          Height="80"
                          Background="#00000000"
                          Orientation="Horizontal">
                <Image Width="78"
                       Height="78"
                       Margin="0"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Source="eye.png" />

              </StackPanel>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style.Setters>
    </Style>

  </Window.Resources>

Upvotes: 1

Related Questions