MaterialDesignInXAML / MaterialDesignInXamlToolkit

Google's Material Design in XAML & WPF, for C# & VB.Net.
http://materialdesigninxaml.net
MIT License
15.21k stars 3.44k forks source link

PackIcon styles matching text styles (width/height) #1216

Open jespersh opened 5 years ago

jespersh commented 5 years ago

I was thinking that creating styles for PackIcon that makes the icon match in size for the style of texts could remove some of the trial-n-error of creating height, width on each icon.

Suppose I have

<StackPanel Orientation="Horizontal">
    <materialDesign:PackIcon Kind="Warning"/>
    <TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" Margin="8 0 0 0">STOP!</TextBlock>
</StackPanel>

Then to match the size of the textblock we will have to add Height="27" Width="27" to the PackIcon.

I imagine the style could simply be named MaterialDesignTitlePackIcon. Something like this might work:

<Style x:Key="MaterialDesignTitlePackIcon" BasedOn="{StaticResource {x:Type local:PackIcon}}">
    <Setter Property="Height" Value="27"/>
    <Setter Property="Width" Value="27"/>
</Style>
Keboo commented 5 years ago

This is an interesting idea. There are a couple of things that might not completely work:

  1. This is making an assumption on the font. I assume we would have to assume Roboto.
  2. The pack icons are generated. In my experience I have had to tweak some sizes and positions to get them to link up nicely. The path values for each of the icons can vary by a small amount. Though this would probably get close, I am not sure if it would work for all of the icons.

Now with that said I am not opposed to this idea, and would love to see it in the Typography page in the demo app.

As an alternative idea, rather than creating separate styles. Perhaps look at something like an attached property for linking a pack icon to another element and have it size based on that. Not perfect, but it would point 1 above. I am not sure if this is actually the best solution; it is certainly more flexible, but may be less intuitive than just setting a style. Very open to feedback and suggestions here.