Question

Take this Window as an example:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" ResizeMode="NoResize" SizeToContent="WidthAndHeight" SnapsToDevicePixels="True">
    <Grid Width="17" Margin="1">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <RepeatButton Grid.Row="0" SnapsToDevicePixels="True">
            <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="1" Fill="Red">
                <Polyline.Points>
                    <Point X="0" Y="3" />
                    <Point X="3" Y="0" />
                    <Point X="6" Y="3" />
                </Polyline.Points>
            </Polyline>
        </RepeatButton>

        <RepeatButton Grid.Row="1" SnapsToDevicePixels="True">
            <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="1" Fill="Red">
                <Polyline.Points>
                    <Point X="0" Y="3" />
                    <Point X="3" Y="0" />
                    <Point X="6" Y="3" />
                </Polyline.Points>
            </Polyline>
        </RepeatButton>
    </Grid>
</Window>

Once the application has been ran, the topmost RepeatButton is taller than the bottom one (consequently the top triangle is also bigger than the bottom one). Why?
If I create 4 rows of identical RepeatButtons, then the 1-st and 3-rd RepeatButtons are of equal size and are bigger than the 2-nd and 4-th RepeatButton?!?

I’m thinking this must be a bug in the WPF layout system, but how to work around this problem? I can’t use fixed heights (which does solve the problem), because I need the RepeatButtons and triangles to strecth as the container gets bigger (the example I provided is simplifed just to show the issue, I know I can’t resize the example window…).

Edit:

In reply to Ben’s comments:

Yes, with the added style the triangles do come out as 9px and 8px tall (I could just as well through out the RepeatButtons alltogether and leave only the polylines as the grids children, that would give the same result). Because the triangles are equal sided, then giving the grid a width of 17 will indeed cause the height to become 17 as well, which of course is not enough for two equal height triangles..

What I’m actually trying to do is create a NumericUpDown control. I’ve found that by default a spinner width of 17 and a UserControl MinHeight of 24 looks very good. The only problem is, that if I drop this UserControl into a Grid, then the top triangle always pushes itself 1px to tall, ruining the look. No matter how I’ve tried to mingle with the internal Margins and Paddings, the top triangle always makes itself 1px taller than necessary. So in essence what I want is to have a NumericUpDown, that when put into a Grid, doesn’t distort itself. By default it should look perfect from the get go (no Grid RowHeight=”Auto”) and scale properly (no fixed heights). It must be possible, because by looking at the pixels physically then everything can fit into the given dimensions nicely.

Here is my NumericUpDown, I’ve stripped out all the non essential things to make it more compact:

<UserControl x:Class="HRS.NumericUpDown"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             MinWidth="40" MinHeight="24" Name="ucNUPD" Background="White" SnapsToDevicePixels="True">
    <UserControl.Resources>
        <Style TargetType="{x:Type RepeatButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Name="borderOuter" BorderThickness="1" BorderBrush="Red">
                            <Border Name="borderInner" BorderThickness="1" BorderBrush="Blue">
                                <ContentPresenter Margin="2,1"  />
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="triangleStyle" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <Polyline HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Green" RenderOptions.EdgeMode="Aliased" Stretch="Uniform">
                            <Polyline.Points>
                                <Point X="0" Y="3" />
                                <Point X="3" Y="0" />
                                <Point X="6" Y="3" />
                            </Polyline.Points>
                        </Polyline>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border BorderThickness="1" BorderBrush="#ABADB3">  
        <DockPanel>
            <UniformGrid Margin="1" DockPanel.Dock="Right" Rows="2" MinWidth="17" Width="17">
                <RepeatButton Name="repeatButtonUp" Grid.Row="0">
                    <ContentControl Style="{StaticResource triangleStyle}" />
                </RepeatButton>

                <RepeatButton Name="repeatButtonDown" Grid.Row="1">
                    <ContentControl Style="{StaticResource triangleStyle}" RenderTransformOrigin="0.5, 0.5">
                        <ContentControl.RenderTransform>
                            <ScaleTransform ScaleY="-1" />
                        </ContentControl.RenderTransform>
                    </ContentControl>
                </RepeatButton>
            </UniformGrid>

            <TextBox BorderThickness="0" VerticalContentAlignment="Center" Text="0" />
        </DockPanel>
    </Border>
</UserControl>

Here is a picture of what the end result looks like:

(The image doesn’t fit a 100%, but you can still see all the relevant details).

On the right side you can see a zoom-in of the NumericUpDowns. The bottom one looks correct, but only because the grid’s row Height is set to Auto. The top one is distorted, but by default I want it to look exactly like the bottom one.

Hmmm…
I might just have found a workable solution:
It seems that by setting the Margin of the ContentPresenter in my NumericUpDown to “3,1”, everything looks perfect. Preliminary testing is very promising as everything seems to be exactly the way it should be…
I’ll test it some more tommorow and if all goes good will mark Ben’s answer as correct 🙂

Answer 1

With SizeToContent=”WidthAndHeight” the height will be 17 as you you set the Grid’s Width to 17. But with 17/2=8.5 one row will be 9 (rounding occurs becouse of SnapsToDevicePixels=”True”) but the other will be 8 pixel tall. If you set the Width to 18 they will be equal.

Proof of my theory:

<Grid Width="17" Margin="0">
<Grid.Resources>
  <Style TargetType="{x:Type RepeatButton}">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Margin" Value="0" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ButtonBase}">
            <ContentPresenter Margin="0"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Grid.Resources>

<Grid.RowDefinitions>
  <RowDefinition />
  <RowDefinition />
</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" SnapsToDevicePixels="True">
  <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="0" Fill="Red">
    <Polyline.Points>
      <Point X="0" Y="3" />
      <Point X="3" Y="0" />
      <Point X="6" Y="3" />
    </Polyline.Points>
  </Polyline>
</RepeatButton>

<RepeatButton Grid.Row="1" SnapsToDevicePixels="True">
  <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="0" Fill="Red">
    <Polyline.Points>
      <Point X="0" Y="3" />
      <Point X="3" Y="0" />
      <Point X="6" Y="3" />
    </Polyline.Points>
  </Polyline>
</RepeatButton>

With this snippet you gain a Triangle that has 9 pixel height, and one with 8 pixels.

But if you want for a solution try this:

<RepeatButton Grid.Row="1" SnapsToDevicePixels="True" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" >
  <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="0" Fill="Red">
    <Polyline.Points>
      <Point X="0" Y="3" />
      <Point X="3" Y="0" />
      <Point X="6" Y="3" />
    </Polyline.Points>
  </Polyline>
</RepeatButton>

This way the width and the height of the buttons will be equal.

If think you can write a little converter too, that will can do some nasty things:

<RepeatButton Grid.Row="1" SnapsToDevicePixels="True" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={StaticResource TriangleWidthConverter}}" >
  <Polyline RenderOptions.EdgeMode="Aliased" Stretch="Uniform" Margin="0" Fill="Red">
    <Polyline.Points>
      <Point X="0" Y="3" />
      <Point X="3" Y="0" />
      <Point X="6" Y="3" />
    </Polyline.Points>
  </Polyline>
</RepeatButton>  

public class TriangleWidthConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    int width = 0;
    if (int.TryParse(value.ToString(), out width))
      return width + 1; // Do some fun here.
    return value;
  }

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

I hope these will help.