0

I am working on slider control of wpf, i want background design of slider control filled according to my attached image, please help me how i can fill the background with same gradient in wpf ?here you can see background with blue and light blue

Heena
  • 8,450
  • 1
  • 22
  • 40
Ashish-BeJovial
  • 1,829
  • 3
  • 38
  • 62
  • see this video for gradient https://www.youtube.com/watch?v=TZMUF6KYW18 – Heena Jul 15 '15 at 13:18
  • I have already created image but not from blend, i used photoshop. – Ashish-BeJovial Jul 15 '15 at 13:32
  • blend will help you to create same background gradient as in your posted image. – Heena Jul 15 '15 at 13:34
  • Yes you are right, but i want that image in slider background as you can see in attached image. I have already saved image in my solution explorer, i tried a solution you provided to Jmat user for customize slider. – Ashish-BeJovial Jul 15 '15 at 13:36
  • ok.I added video here as you had asked about gradient background. – Heena Jul 15 '15 at 13:39
  • I am following your this solution. http://stackoverflow.com/q/25136114/2256537 – Ashish-BeJovial Jul 15 '15 at 13:45
  • i am using following style to bind image with slider background. – Ashish-BeJovial Jul 16 '15 at 08:01
  • Why you are using ellipse here ? your image is having rectangular repeat button.use rectangle or border for repeat button. – Heena Jul 16 '15 at 08:30

2 Answers2

4
    <UserControl.Resources>
    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">                       
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Height="10">
                        <Border.Background>
                            <ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
                        </Border.Background>
                    </Border>

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

    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" Background="Green"   Height="10"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="20" Width="20">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track"   >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton1}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}"  />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>       
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">                   
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center"  Value="500" Width="300" Margin="50,0,50,0"></Slider>
Heena
  • 8,450
  • 1
  • 22
  • 40
0

You have to include RelativeTransform to get striped background in lineargradient brush.Please try below code for Background brush

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">
                <GradientStop Color="#FF00AEEF" Offset="0"/>
                <GradientStop Color="#FF00AEEF" Offset="0.5"/>
                <GradientStop Color="#FF8BD6F0" Offset="0.5"/>
                <GradientStop Color="#FF8BD6F0" Offset="1"/>
                <LinearGradientBrush.RelativeTransform>
    <ScaleTransform ScaleX="0.075" ScaleY="0.010"/>
</LinearGradientBrush.RelativeTransform>
            </LinearGradientBrush>
ReeganLourduraj
  • 863
  • 6
  • 9