Sizing WPF controls based on Windows design guideline recommendations

179 Views Asked by At

How do I configure WPF to make its controls use the sizes recommended by Microsoft?

For example, a button should be 23 pixels high, including a 1 pixel transparent border. How do I implement the transparent border? Button.BorderBrush controls the visible border.

Another example is a single-line text box, which should be 23 pixels high.

Do I have to style everything by hand? Or is there way to cause the controls to default to a native Windows user experience?


Update: Here's a visual of some of the differences.

WPF controls:

WPF controls

Standard Windows controls: (from the Common Item Dialog, e.g. in Notepad, clicking File > Open)

Common Item Dialog controls

This isn't a perfect comparison, since the in the Common Item Dialog, the file name box is a ComboBox, not a TextBox. I tried comparing the Print Setup and Print dialogs (also from Notepad), but they don't use the same size buttons or even the same font as the open file dialog. I keep forgetting that I'm dealing with Microsoft here, not Apple.

There is a distinction regarding the button that is consistent through all of Notepad's dialogs, which WPF doesn't match by default. If the button is a default button, the border is thicker in Notepad. The button's transparent border turns blue. For a Notepad non-default button, you can click one pixel outside the visible border and still hit the button. This doesn't work for the WPF button.

Flexibility is nice, but native it-just-works-and-looks-great controls would be really nice. If there's a drop-in solution where I don't have to think about this stuff, that would be great.

Here's the XAML for the WPF controls:

<StackPanel Name="controls" Margin="20">
    <TextBox Text="Default TextBox" />
    <TextBox Height="23" Text="TextBox with height 23" />
    <Button Content="Cancel" />
    <Button Height="21" Content="Cancel" IsDefault="True" />
</StackPanel>

And the code-behind:

foreach (Control control in controls.Children) {
    control.Margin = new Thickness(0, 10, 0, 10);
    control.VerticalContentAlignment = VerticalAlignment.Center;
}
0

There are 0 best solutions below