3

我想向 mahapps.metro 文本框添加一个图标，就像文本框的清除按钮一样。mahapps.metro 演示应用程序有这个功能，即使看了源代码也不明白如何实现它。在TextExamples.xamlMetro Demo 应用程序中，下面的代码创建了一个自定义图标并将其绑定到一个事件。但是，我无法在自己的代码中实现它。我完全不知道它从哪里获取自定义图标。感谢来自

<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}" />
4

3 回答 3

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>

希望有帮助

于 2014-04-04T11:14:21.777 回答
3

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

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

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

于 2016-06-08T18:01:41.843 回答
1

不是一个完整的答案，只是指示 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>

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

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

于 2014-03-11T02:30:43.027 回答