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