MahApps / MahApps.Metro

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
https://mahapps.com
MIT License
9.28k stars 2.45k forks source link

Change Icons from Path to IconPack value #3586

Closed amkuchta closed 4 years ago

amkuchta commented 5 years ago

Is your feature request related to a problem? Please describe.

Consider the following:

<Setter Property="HamburgerButtonTemplate">
    <Setter.Value>
        <DataTemplate>
            <!--  PackIconMaterial - Menu  -->
            <ContentControl Content="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
                            Height="22"
                            Width="22"
                            Style="{DynamicResource MahApps.Styles.ContentControl.PathIcon}" />
        </DataTemplate>
    </Setter.Value>
</Setter>

Using this implementation, users have to completely reimplement the template in order to override the Content value (and it's corresponding PathIcon style. This is same approach is used throughout the library:

<ControlTemplate x:Key="MahApps.Templates.WindowButtonCommands" TargetType="{x:Type Controls:WindowButtonCommands}">
    <StackPanel Orientation="Horizontal">
        <Button x:Name="PART_Min" ... >
            <Path Data="F1M0,6L0,9 9,9 9,6 0,6z" ... />
        </Button>
        ...
    </StackPanel>
    ...
</ControlTemplate>

Using hard-coded paths as icon values makes them impossible to override without recreating the template.

Describe the solution you'd like

I suggest implementing a new approach with a new dependency property (or series of dependency properties, as needed) (ControlHelper.Content or ControlHelper.Content.WindowCloseButton, ControlHelper.Content.WindowMaximizeButton) and a subset of the MahApps.Metro.IconPacks library that contains only the icons required for the styles provided in MahApps.Metro (this will keep the size of the library small):


<!-- HamburgerMenu -->
<Setter Property="HamburgerButtonTemplate">
    <Setter.Value>
        <DataTemplate>
            <ContentControl Content="{Binding Path=Controls:ControlsHelper.Content.HamburgerMenuButton, RelativeSource={...}}" />
        </DataTemplate>
    </Setter.Value>
</Setter>

<Style x:Key="MahApps.Styles.ListBox.HamburgerMenu"
           BasedOn="{StaticResource MahApps.Styles.ListBox}"
           TargetType="{x:Type ListBox}">
    <Setter "Property=Controls:ControlsHelper.Content.HamburgerMenuButton" Value="{EmbeddedIcons:PackIcon[NAME] Kind=[KIND]}" />
    ...
</Style>

<!-- WindowButtonCommands -->
<ControlTemplate x:Key="MahApps.Templates.WindowButtonCommands" TargetType="{x:Type Controls:WindowButtonCommands}">
    <StackPanel Orientation="Horizontal">
        <Button x:Name="PART_Min" Content="{Binding Path=Controls:ControlsHelper.Content.WindowMinimizeButton, RelativeSource={...}}"... >
        </Button>
        ...
    </StackPanel>
    ...
</ControlTemplate>

<Style x:Key="MahApps.Styles.WindowButtonCommands" TargetType="{x:Type Controls:WindowButtonCommands}">
    <Setter Property="Controls:ControlsHelper.Content.WindowMinimizeButton" Value="{EmbeddedIcons:PackIcon[NAME] Kind=[KIND]}" />
    ...
</Style>

This gives users a quick, easy way to override individual icons on an as-needed basis without having to recreate the templates on their own.

Additional context

N/A

Closed Issues

punker76 commented 4 years ago

IMO the HamburgerMenu button content can be changed in an easy way with the already provided properties.

I don't see the reason yet to offer more properties to change the Min/Max/Restore/Close button content. These are usually always the same. If this is necessary, then it is easy to change the existing template. The sources are all here.