Mahapps.Metro：自定义图标文本框

Question

我想在mahapps.metro文本框中添加一个图标，就像该文本框的清除按钮一样。 mahapps.metro演示应用程序具有此功能，即使在查看源代码后也不了解如何实现它。 下面的代码从Metro Demo应用程序中的TextExamples.xaml中创建一个自定义图标，并将其绑定到事件。 但是，我无法在自己的代码中实现myslef。 我根本说不清从哪里获取自定义图标。 谢谢来自

<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

源代码中的文档没有提及它，但它似乎是由Controls:TextboxHelper.ButtonContent属性控制自定义图标的。 您必须将ButtonContent属性设置为所需的字体字符，该字体称为Marlett Characters。

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

我在项目的GitHub网站https://github.com/MahApps/MahApps.Metro/issues/849找到了这个答案

Answer 2

不是一个完整的答案，只是指示在哪里检查MahApps.Metro在TextBox中Icon的实现。

我要做的第一件事是检查Controls.TextBox.xaml文件。 在其中实现了MetroButtonTextBox样式：

<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>

而且我想（对此没有做过深入的研究），Icon是TextBox的按钮部分。 因此，您可能还需要通过ChromelessButtonTemplate 。 ChromelessButtonTemplate资源声明可在Controls.Buttons.xaml文件中找到。

关于这3个附加的行为/属性（ Watermark ， ButtonContent和ButtonCommand ），可以在TextboxHelper.cs文件中找到定义。

Answer 3

这是搜索TextBox如何工作的示例（并应与自定义矢量图标或其他功能一起工作）

<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>

希望能有所帮助