Why is Button Height Different When setting Content to "String" verses a "Path Object"?

Question

I'm trying to create a "Vector Path" based Button Glyph that exactly matches the height of the default height of the Button Control font. So that its button fits onto the same toolbar with the same height automatically. However, when I do this the Button with normal text set as content has a larger overall height then the one with the "Vector Path" set as the content. Here's my code below. How can I get the "Vector Path" Content button to have the same height as the "string" content button automatically based on button default settings? Am I missing a padding setting in the "Vector Path" Version that needs to be accounted for?

// C# / UWP
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Shapes;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Data;

namespace GridNineExperiment
{
    // "String" Content Button
    public class Button1 : Button
    {
        public Button1()
        {
            Content = "Hello";
        }

    }

    // "Path Vector" Content Button
    public class HamburgerButton : Button
    {
        public HamburgerButton()
        {
            // Default Font Height of Button
            double H = (double)Button.FontSizeProperty.GetMetadata(typeof(double)).DefaultValue;

            double A = H / 5;

            GeometryCollection DataHamburger = new GeometryCollection
        {
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 0*A,  Width = 20, Height = A/2 }},
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 2*A,  Width = 20, Height = A/2 }},
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 4*A,  Width = 20, Height = A/2 }},
        };

            Path PathHamburger = new Path
            {
                Fill = new SolidColorBrush(Colors.Black),
                Stroke = new SolidColorBrush(Colors.Black),
                StrokeThickness = 1.0,
                Data = new GeometryGroup { Children = DataHamburger }
            };

            Content = PathHamburger;
        }
    }
}

 <!-- This XAML demonstrates the button heights don't have
      the same height despite setting the Vector Path
      height to 11 pixels, the same as the Text of String based Button-->
 <Page
    x:Class="GridNineExperiment.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridNineExperiment"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <local:Button1  Grid.Column="0" Grid.Row="0" Content="Hello"/>
        <local:HamburgerButton  Grid.Column="1" Grid.Row="0"/>
    </Grid>
</Page>

Adding "Padding = new Thickness(0, 9.0, 0, 9.0);}" works to fix the problem, I just don't understand how to automatically come up with this padding thickness... — Bimo, Feb 21 '18 at 17:43

score 0 · Answer 1 · answered Feb 21 '18 at 17:08

0

Font size isn't an accurate metric for pixel height.

I won't mark the question as duplicate of this one because the question is actually different, but the solution is the one you want: using FormattedText and getting its Height property.

FormattedText ft = new FormattedText(text,
    CultureInfo.CurrentCulture,
    FlowDirection.LeftToRight,
    new Typeface(fontFamily, fontStyle, fontWeight, fontStretch),
        (double)Button.FontSizeProperty.GetMetadata(typeof(double)).DefaultValue,
        Brushes.Black);
var height = ft.Height;

answered Feb 21 '18 at 17:08

Kilazur

3,089
1
22
48

Do you know the UWP solution as well? WPF is a little bit different... my feeling is that the Font Height in Question above is 100% accurate. I;m just trying to understand how to find the vertical padding value for the Text button that is implied automatically when setting the content as a string, and the zero padding assumed when assign content from PATH object. – Bimo Feb 21 '18 at 17:38
@BillMoore whether it's WPF or UWP, you could get the Button.MarginProperty and it's default value as well? I'm away from VS right now, but I think the default padding isn't 0. – Kilazur Feb 21 '18 at 17:43

Bimo · Answer 2 · 2018-02-21T18:55:24.173

Its possible to hand tune the Padding until it lines up. I still have no idea how to automatically calculate the padding value.

public class HamburgerButton : Button
{
    public HamburgerButton()
    {
        // Default Font Height of Button
        double H = (double)Button.FontSizeProperty.GetMetadata(typeof(double)).DefaultValue;

        double A = H / 5;

        GeometryCollection DataHamburger = new GeometryCollection
        {
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 0*A,  Width = 20, Height = A/2 }},
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 2*A,  Width = 20, Height = A/2 }},
            new RectangleGeometry {Rect = new Rect{X = 0, Y = 4*A,  Width = 20, Height = A/2 }},
        };

        Path PathHamburger = new Path
        {
            Fill    = new SolidColorBrush(Colors.DarkGray),
            Stroke  = new SolidColorBrush(Colors.DarkGray),
            StrokeThickness = 1.0,
            Height  = H,
            Margin = new Thickness(4.5), // <==??? HOW TO AUTOMATICALLY CALCULATE??
            Data = new GeometryGroup { Children = DataHamburger }
        };

        Content = PathHamburger;
    }
}

 <!-- This XAML demonstrates the button heights don't have
      the same height despite setting the Vector Path
      height to 11 pixels, the same as the Text of String based Button-->
 <Page
    x:Class="GridNineExperiment.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridNineExperiment"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <local:Button1  Grid.Column="0" Grid.Row="0" Content="Hello"/>
        <local:HamburgerButton  Grid.Column="1" Grid.Row="0"/>
    </Grid>
</Page>

Why is Button Height Different When setting Content to "String" verses a "Path Object"?

2 Answers2