Mahapps.Metro: Custom Icon Textbox

Question

I would like to add a icon to the mahapps.metro textbox, much like the clear button for the textbox. The mahapps.metro demo app has this feature, and even after looking at the source code don't understand how to implement it. From TextExamples.xaml in the Metro Demo app the code bellow code creates a custom icon and binds it to a event. However, I can't implement it myslef in my own code. I can't tell at all where it is getting the custom icon from. Thanks from

<TextBox Margin="0, 10, 0, 0"
                         Controls:TextboxHelper.Watermark="Custom icon style"
                         Controls:TextboxHelper.ButtonContent="s"
                         Controls:TextboxHelper.ButtonCommand="{Binding TextBoxButtonCmd,  Mode=OneWay}"
                         Style="{DynamicResource MetroButtonTextBox}" />

Answer 1

here is the example how the search TextBox works (and should work with your custom vector icon or something else too)

<Style TargetType="{x:Type TextBox}"
       x:Key="SearchMetroTextBox"
       BasedOn="{StaticResource MetroButtonTextBox}">
    <Setter Property="Controls:TextboxHelper.ButtonTemplate">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <Grid x:Name="contentPresenter"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          Opacity="0.75">
                        <Canvas Width="15"
                                Height="15"
                                Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0">
                            <!-- x:Key="appbar_magnify"-->
                            <Path Width="15.7781"
                                  Height="15.7781"
                                  Stretch="Fill"
                                  Fill="{TemplateBinding Foreground}"
                                  Data="F1 M 14.8076,31.1139L 20.0677,25.9957C 19.3886,24.8199 19.25,23.4554 19.25,22C 19.25,17.5817 22.5817,14 27,14C 31.4183,14 35,17.5817 35,22C 35,26.4183 31.4183,29.75 27,29.75C 25.6193,29.75 24.3204,29.6502 23.1868,29.0345L 17.8861,34.1924C 17.105,34.9734 15.5887,34.9734 14.8076,34.1924C 14.0266,33.4113 14.0266,31.895 14.8076,31.1139 Z M 27,17C 24.2386,17 22,19.2386 22,22C 22,24.7614 24.2386,27 27,27C 29.7614,27 32,24.7614 32,22C 32,19.2386 29.7614,17 27,17 Z " />
                        </Canvas>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value=".5" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="False">
                        <Setter Property="Foreground"
                                Value="#ADADAD" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

hope that helps

Answer 2

The documentation in the source code does not mention it, but it appears the Controls:TextboxHelper.ButtonContent Property is what controls the custom icons. You have to set the ButtonContent Property to the font character you want in this font called Marlett Characters

http://www.reactos.org/wiki/Marlett_Characters

I found this answer in the project's GitHub site https://github.com/MahApps/MahApps.Metro/issues/849

Answer 3

Not a complete answer, just direction where to check for implementation of Icon in TextBox by MahApps.Metro.

First thing I will do is to check Controls.TextBox.xaml file. There is where MetroButtonTextBox style implemented :

<Style TargetType="{x:Type TextBox}"
       BasedOn="{StaticResource MetroTextBox}"
       x:Key="MetroButtonTextBox">
    <Setter Property="Controls:TextboxHelper.ButtonTemplate"
            Value="{DynamicResource ChromelessButtonTemplate}" />
    <!-- change SnapsToDevicePixels to True to view a better border and validation error -->
    <Setter Property="Template">
        <Setter.Value>
            ......
            ......
        </Setter.Value>
    </Setter>
</Style>

And I guess (haven't dug too deep on this), the Icon is button part of the TextBox. Therefore you may need to go through ChromelessButtonTemplate too. ChromelessButtonTemplate resource declaration can be found in Controls.Buttons.xaml file.

And about those 3 attached behaviors/properties (Watermark, ButtonContent, and ButtonCommand), definition can be found in TextboxHelper.cs file.