locked
Custom Controls for Universal Apps

    Question

  • Hi,

    I am building an universal app and want to get some custom controls. Specifically some 70s/80s looking linear slider controls. It might look like the controls you would see in a recording studio to adjust all those different levels.

    Anyway I am trying to understand  the standard that is used are they standard WPF controls. What should I be searching for - ie ocx controls etc - to make sure they are compatible.

    If I can't buy one how hard is it to make one - override the exiting control I am guessing.

    What I am after is some pointers to get me started to see how it fits together.

    Thanks,

    Ward

    Friday, May 8, 2015 5:29 AM

Answers

  • These are not WPF controls, but WinRT controls. You can't use WPF controls in WinRT. You can override the style of the built-in slider:

    1) Put a slider on the page in the XAML designer

    2) Hover over the slider, then right-click and "edit style" -> "Edit a copy"

    3) You can edit the various attributes of the slider, including the thumb.  You can make the thumb an image, then edit the tick marks and everything else to look like a 70's style slider.

    This is how you would change the Thumb to an image in the resultant style:

    <Setter.Value>
      <ControlTemplate TargetType="Thumb">
        <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>-->
        <Image Source="Assets/Slider.png" Width="50" Height="50"/>
      </ControlTemplate>
    </Setter.Value>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, May 8, 2015 2:32 PM
    Moderator

All replies

  • These are not WPF controls, but WinRT controls. You can't use WPF controls in WinRT. You can override the style of the built-in slider:

    1) Put a slider on the page in the XAML designer

    2) Hover over the slider, then right-click and "edit style" -> "Edit a copy"

    3) You can edit the various attributes of the slider, including the thumb.  You can make the thumb an image, then edit the tick marks and everything else to look like a 70's style slider.

    This is how you would change the Thumb to an image in the resultant style:

    <Setter.Value>
      <ControlTemplate TargetType="Thumb">
        <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>-->
        <Image Source="Assets/Slider.png" Width="50" Height="50"/>
      </ControlTemplate>
    </Setter.Value>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, May 8, 2015 2:32 PM
    Moderator
  • Hi,

    Thanks great answer.

    Thanks,

    Ward

    Wednesday, May 20, 2015 6:38 AM