How to scale up the slider in WPF?

Viewed 277

When you put for example Button inside DockPanel, the button boundaries will be stretched, but the text inside the button will not be scaled.

So I use ViewBox as an easy way to scale -- this way (for example) button boundaries are scaled up and also the text itself.

Unfortunately Slider when put inside DockPanel behaves similar to button -- its boundaries are stretched, but the ruler and the knob remains small. When I put it inside ViewBox the knob is scaled correctly, however the ruler is not scaled up, but the opposite -- it is minimized.

So how to correctly scale up the slider?

I have a window with few controls. When I resize the window I would like to resize the content as well, meaning the controls should take more space and also the text should be bigger, images, icons, and so forth.

Example, simplified but showing the idea -- I have two buttons around the slider, like:

[-] ------||-- [+]

Buttons are scaled up as expected, the slider knob as well, but the ruler of the slider is not visible at all. While writing this code in Visual Studio it is also apparent that scaling went wrong, because focus-box drawn around slider is way too small.

<Grid>
    <DockPanel>
        <Viewbox DockPanel.Dock="Left">
            <Button Padding="0">-</Button>
        </Viewbox>
        <Viewbox DockPanel.Dock="Right">
            <Button Padding="0">+</Button>
        </Viewbox>
        <Viewbox  DockPanel.Dock="Left">
            <Slider VerticalAlignment="Center"></Slider>
        </Viewbox>
    </DockPanel>
</Grid>
1 Answers

Set Stretch property to Fill and set the Width of the Slider. It will effect the width of the knob.

<Grid>
    <DockPanel>
        <Viewbox DockPanel.Dock="Left">
            <Button Padding="0">-</Button>
        </Viewbox>
        <Viewbox DockPanel.Dock="Right">
            <Button Padding="0">+</Button>
        </Viewbox>
        <Viewbox Stretch="Fill" DockPanel.Dock="Right">
            <Slider Width="100"></Slider>
        </Viewbox>
    </DockPanel>
</Grid>

enter image description here

Related