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。可以在Controls.Buttons.xaml文件中找到ChromelessButtonTemplate资源声明。

关于这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>

希望有所帮助

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

3 个答案: