Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Open the page in Expression Blend </p> <ol> <li>Right click on Slider Control on Page .</li> <li>Select Edit Template and Select Edit Current/ Edit a copy as you wish.</li> <li>Change width values in Scale sub tab of Render Tab for the properties <em>HorizontalTrack, HorizontalFill,HorizontalThumb</em> in Expression Blend and you will see the difference.</li> </ol> <p>Save the page and get back to Visual Studio and your custom template will be added to page resources. </p> <p><em>I have attached the image for Expression Blend .</em> </p> <p><img src="https://i.stack.imgur.com/hwxRg.png" alt="enter image description here"></p> <p>And the result will be like</p> <p><img src="https://i.stack.imgur.com/emL8v.png" alt="enter image description here"></p> <p>Template code :- which might be of help for you.</p> <pre><code>&lt;phone:PhoneApplicationPage.Resources&gt; &lt;ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton"&gt; &lt;Rectangle Fill="Transparent"/&gt; &lt;/ControlTemplate&gt; &lt;Style x:Key="SliderStyle1" TargetType="Slider"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="Slider"&gt; &lt;Grid Background="Transparent"&gt; &lt;Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}"&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="12"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5"&gt; &lt;Rectangle.RenderTransform&gt; &lt;CompositeTransform ScaleY="2.9"/&gt; &lt;/Rectangle.RenderTransform&gt; &lt;/Rectangle&gt; &lt;Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5"&gt; &lt;Rectangle.RenderTransform&gt; &lt;CompositeTransform ScaleY="2.9"/&gt; &lt;/Rectangle.RenderTransform&gt; &lt;/Rectangle&gt; &lt;RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/&gt; &lt;RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/&gt; &lt;Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5"&gt; &lt;Thumb.RenderTransform&gt; &lt;CompositeTransform ScaleY="4.65"/&gt; &lt;/Thumb.RenderTransform&gt; &lt;Thumb.Template&gt; &lt;ControlTemplate&gt; &lt;Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12"&gt; &lt;Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/&gt; &lt;/Canvas&gt; &lt;/ControlTemplate&gt; &lt;/Thumb.Template&gt; &lt;/Thumb&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p></p> <p>And usage it in control like:- </p> <pre><code> &lt;Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" /&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload