[英]Mahapps.Metro: Custom Icon Textbox
我想在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}" />
源代碼中的文檔沒有提及它,但它似乎是由Controls:TextboxHelper.ButtonContent
屬性控制自定義圖標的。 您必須將ButtonContent
屬性設置為所需的字體字符,該字體稱為Marlett Characters。
http://www.reactos.org/wiki/Marlett_Characters
我在項目的GitHub網站https://github.com/MahApps/MahApps.Metro/issues/849找到了這個答案
不是一個完整的答案,只是指示在哪里檢查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文件中找到定義。
這是搜索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>
希望能有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.