主頁 > .NET開發 > WPF自定義控制元件與樣式(3)-TextBox & RichTextBox & PasswordBox樣式、水印、Label標簽、功能擴展（轉載）

WPF自定義控制元件與樣式(3)-TextBox & RichTextBox & PasswordBox樣式、水印、Label標簽、功能擴展（轉載）

2020-09-13 08:25:40 .NET開發

WPF自定義控制元件與樣式(3)-TextBox & RichTextBox & PasswordBox樣式、水印、Label標簽、功能擴展

 原文：https://www.cnblogs.com/anding/p/4970845.html

一．前言.預覽

　　申明：WPF自定義控制元件與樣式是一個系列文章，前后是有些關聯的，但大多是按照由簡到繁的順序逐步發布的等，若有不明白的地方可以參考本系列前面的文章，文末附有部分文章鏈接，

本文主要是對文本輸入控制元件進行樣式開發，及相關擴展功能開發，主要內容包括：

  • 基本文本框TextBox控制元件樣式及擴展功能，實作了樣式、水印、Label標簽、功能擴展；
  • 富文本框RichTextBox控制元件樣式；
  • 密碼輸入框PasswordBox控制元件樣式及擴展功能；

效果圖：

二．基本文本框TextBox控制元件樣式及擴展功能

2.1 TextBox基本樣式

樣式代碼如下：  

復制代碼 
    <!--TextBox默認樣式-->
    <Style TargetType="{x:Type TextBox}" x:Key="DefaultTextBox">
        <Setter Property="ContextMenu" Value="https://www.cnblogs.com/rh-fernando/p/{DynamicResource TextBoxContextMenu}" />
        <Setter Property="SelectionBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextSelectionBrush}" />
        <Setter Property="FontFamily" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontFamily}" />
        <Setter Property="FontSize" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontSize}" />
        <Setter Property="BorderThickness" Value="https://www.cnblogs.com/rh-fernando/p/1" />
        <Setter Property="MinHeight" Value="https://www.cnblogs.com/rh-fernando/p/26" />
        <Setter Property="Width" Value="https://www.cnblogs.com/rh-fernando/p/100" />
        <Setter Property="Background" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextBackground}" />
        <Setter Property="Foreground" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="Padding" Value="https://www.cnblogs.com/rh-fernando/p/0" />
        <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ControlBorderBrush}" />
        <Setter Property="local:ControlAttachProperty.FocusBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FocusBorderBrush}" />
        <Setter Property="local:ControlAttachProperty.MouseOverBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource MouseOverBorderBrush}" />
        <Setter Property="VerticalContentAlignment" Value="https://www.cnblogs.com/rh-fernando/p/Center" />
        <!-- change SnapsToDevicePixels to True to view a better border and validation error -->
        <Setter Property="SnapsToDevicePixels" Value="https://www.cnblogs.com/rh-fernando/p/True" />
        <!--英 ['k?r?t]  美 ['k?r?t]  插入符號-->
        <Setter Property="CaretBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid x:Name="PART_Root">
                        <Border x:Name="Bg" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                CornerRadius="{TemplateBinding local:ControlAttachProperty.CornerRadius}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
                        <Grid x:Name="PART_InnerGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition  Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <!--Label區域-->
                            <ContentControl x:Name="Label" Margin="1" Template="{TemplateBinding local:ControlAttachProperty.LabelTemplate}"
                                            Content="{TemplateBinding local:ControlAttachProperty.Label}"/>
                            <!--內容區域-->
                            <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Grid.Column="1" IsTabStop="False" Margin="2"
                                          VerticalAlignment="Stretch" Background="{x:Null}" />
                            <!--水印-->
                            <TextBlock x:Name="Message"  Padding="{TemplateBinding Padding}" Visibility="Collapsed"
                                       Text="{TemplateBinding local:ControlAttachProperty.Watermark}" Grid.Column="1"
                                       Foreground="{TemplateBinding Foreground}" IsHitTestVisible="False" Opacity="{StaticResource WatermarkOpacity}"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="5,2,5,2" />
                            <!--附加內容區域-->
                            <Border x:Name="PART_AttachContent" Grid.Column="2" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" >
                                <ContentControl VerticalAlignment="Center" VerticalContentAlignment="Center" Template="{TemplateBinding local:ControlAttachProperty.AttachContent}" />
                            </Border>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!--顯示水印-->
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                            <Setter TargetName="Message" Property="Visibility" Value="https://www.cnblogs.com/rh-fernando/p/Visible" />
                        </DataTrigger>
                        
                        <Trigger Property="IsMouseOver" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.MouseOverBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter  Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.FocusBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <!--不可用-->
                        <Trigger Property="IsEnabled" Value="https://www.cnblogs.com/rh-fernando/p/False">
                            <Setter TargetName="PART_Root" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource DisableOpacity}" />
                        </Trigger>
                        <!--只讀時，禁用PART_AttachContent-->
                        <Trigger Property="IsReadOnly" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter TargetName="PART_AttachContent" Property="IsEnabled" Value="https://www.cnblogs.com/rh-fernando/p/False" />
                            <Setter TargetName="Bg" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ReadonlyOpacity}" />
                            <Setter TargetName="PART_ContentHost" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ReadonlyOpacity}" />
                            <Setter TargetName="Label" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ReadonlyOpacity}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

　　模板內容主要包含四部分：

  • 用于實作Label標簽的預留區域；
  • TextBox本身的文本輸入顯示部分；
  • 水印顯示部分；
  • 功能擴展的預留區域；

　　其中Label標簽、功能擴展，還有輸入框的不同狀態顯示效果都是通過附加屬性來實作的，其實從本質上附加屬性和控制元件上定義的依賴屬性是同一個概念，有些時候附加屬性會更加方便，對于一些可共用的屬性，就比較方便，這一點怎本文是有體現的，上面代碼使用到的附加屬性代碼：

 View Code

2.2 水印效果實作

　　通過2.1的代碼示例，可以看出，水印是內置了一個TextBlock，用附加屬性ControlAttachProperty.Watermark設定水印內容，在觸發器中檢測，當TextBox中有輸入值，則隱藏水印的TextBlock，使用示例：  

復制代碼 
        <StackPanel>
            <TextBox Width="140" Height="40" Margin="3" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible">333333333333333</TextBox>
            <TextBox Width="150" Height="30" Margin="3" core:ControlAttachProperty.Watermark="我是水印" core:ControlAttachProperty.CornerRadius="2"></TextBox>
            <TextBox Width="150" Height="30" Margin="3" IsReadOnly="True" core:ControlAttachProperty.CornerRadius="15" SnapsToDevicePixels="True" >我是只讀的</TextBox>
            <TextBox Width="150" Height="30" Margin="3" IsEnabled="False">IsEnabled="False"</TextBox>
            <TextBox Width="150" Height="30" core:ControlAttachProperty.Watermark="我是水印"></TextBox>
        </StackPanel>
復制代碼

　　效果：

　　

2.3 Label標簽實作

　　參考2.1的代碼，預留了Label的區域，通過設定附加屬性local:ControlAttachProperty.Label設定標簽文本，local:ControlAttachProperty.LabelTemplate設定Label標簽的模板樣式，即可自定義實作Label標簽，自定義樣式：

復制代碼 
    <!--TextBox包含附加屬性Label的樣式-->
    <Style TargetType="{x:Type TextBox}" x:Key="LabelTextBox" BasedOn="{StaticResource DefaultTextBox}">
        <Setter Property="local:ControlAttachProperty.LabelTemplate" >
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Width="60" Background="{StaticResource TextLabelBackground}">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="3" Text="{TemplateBinding Content}"></TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

　　使用示例及效果： 

            <TextBox Width="200" Height="30" Margin="3" core:ControlAttachProperty.Watermark="請輸入姓名" 
                         Style="{StaticResource LabelTextBox}" core:ControlAttachProperty.Label="姓名："></TextBox>

2.4 擴展功能及自定義擴展

　　思路和2.3的Label標簽實作相似，清除文本框內的內容是一個常用需求，我們就線擴展一個這么一個功能的TextBox，通過附加屬性ControlAttachProperty.AttachContent定義擴展功能的模板，模板內定義的是一個按鈕FButton（可參考上一篇，本文末尾附錄中有鏈接）  

復制代碼 
    <!--TextBox包含清除Text按鈕的樣式-->
    <Style TargetType="{x:Type TextBox}" x:Key="ClearButtonTextBox" BasedOn="{StaticResource DefaultTextBox}">
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe60a;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                                   local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand" 
                                   CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
                               Margin="1,3,1,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

　　這里定義的是顯示效果，清除TextBox內容的邏輯代碼如何實作的呢？還是附加屬性：

  • ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" ：注入事件到當前Button
  • Command="local:ControlAttachProperty.ClearTextCommand"：定義Fbutton的命令物件實體Command
  • CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"：把TextBox作為引數傳入

　　邏輯代碼如下，從代碼不難看出，它是支持多種輸入控制元件的內容清除的，也就是說該擴展功能可以輕松支持其他輸入控制元件，第四節密碼資料的清除也是這樣使用的，

 View Code

　　效果：

　　

當然我們也可以自定義擴展其他功能，如：  

復制代碼 
            <TextBox Width="200" Height="30" Margin="3" core:ControlAttachProperty.Watermark="查詢關鍵詞" IsEnabled="True">
                <core:ControlAttachProperty.AttachContent>
                    <ControlTemplate>
                        <StackPanel Orientation="Horizontal">
                            <core:FButton FIcon="&#xe60b;"  Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                                            FIconSize="18" Margin="1,1,2,3" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                            <core:FButton FIcon="&#xe628;"  Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                                            FIconSize="22" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                        </StackPanel>
                    </ControlTemplate>
                </core:ControlAttachProperty.AttachContent>
            </TextBox>
復制代碼

　　效果：

由上不難同時實作Label標簽和清除文本內容的樣式：

復制代碼 
    <!--TextBox包含附加屬性Label，以及ClearText按鈕的樣式-->
    <Style TargetType="{x:Type TextBox}" x:Key="LabelClearButtonTextBox" BasedOn="{StaticResource DefaultTextBox}">
        <Setter Property="local:ControlAttachProperty.LabelTemplate" >
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Width="60" Background="{StaticResource TextLabelBackground}">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="3" Text="{TemplateBinding Content}"></TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe60a;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                               local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand" 
                               CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
                               Margin="0,3,1,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

2.6 檔案選擇輸入相關擴展

　　先看看效果，就明白了，

　　 

具體實作原理和上面2.4差不多 ，實作了三個檔案、檔案夾選擇相關的功能擴展，樣式代碼：

復制代碼 
    <!--LabelOpenFileTextBox-->
    <Style TargetType="{x:Type TextBox}" x:Key="LabelOpenFileTextBox" BasedOn="{StaticResource LabelClearButtonTextBox}">
        <Setter Property="local:ControlAttachProperty.Label" Value="https://www.cnblogs.com/rh-fernando/p/檔案路徑"/>
        <Setter Property="local:ControlAttachProperty.Watermark" Value="https://www.cnblogs.com/rh-fernando/p/選擇檔案路徑"/>
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe64e;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                               local:ControlAttachProperty.IsOpenFileButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.OpenFileCommand" 
                               CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
                               Margin="0,1,0,1"  FIconSize="22" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--LabelOpenFolderTextBox-->
    <Style TargetType="{x:Type TextBox}" x:Key="LabelOpenFolderTextBox" BasedOn="{StaticResource LabelClearButtonTextBox}">
        <Setter Property="local:ControlAttachProperty.Label" Value="https://www.cnblogs.com/rh-fernando/p/設定路徑"/>
        <Setter Property="local:ControlAttachProperty.Watermark" Value="https://www.cnblogs.com/rh-fernando/p/選擇檔案夾路徑"/>
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe636;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                               local:ControlAttachProperty.IsOpenFolderButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.OpenFolderCommand" 
                               CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
                               Margin="0,1,0,1"  FIconSize="22" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--LabelSaveFileTextBox-->
    <Style TargetType="{x:Type TextBox}" x:Key="LabelSaveFileTextBox" BasedOn="{StaticResource LabelClearButtonTextBox}">
        <Setter Property="local:ControlAttachProperty.Label" Value="https://www.cnblogs.com/rh-fernando/p/保存路徑"/>
        <Setter Property="local:ControlAttachProperty.Watermark" Value="https://www.cnblogs.com/rh-fernando/p/選擇檔案保存路徑"/>
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe61a;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                               local:ControlAttachProperty.IsSaveFileButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.SaveFileCommand" 
                               CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
                               Margin="0,1,0,1"  FIconSize="20" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

當然實作原理和2.4一樣，都是依賴屬性來實作事件的注入和系結的，所以就不多廢話了：

 View Code

 三．富文本框RichTextBox控制元件樣式

　　RichTextBox的樣式比較簡單：  

復制代碼 
    <!--***************************DefaultRichTextBox***************************-->

    <Style x:Key="DefaultRichTextBox" TargetType="{x:Type RichTextBox}">
        <Setter Property="ContextMenu" Value="https://www.cnblogs.com/rh-fernando/p/{DynamicResource TextBoxContextMenu}" />
        <Setter Property="SelectionBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextSelectionBrush}" />
        <Setter Property="FontFamily" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontFamily}" />
        <Setter Property="FontSize" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontSize}" />
        <Setter Property="BorderThickness" Value="https://www.cnblogs.com/rh-fernando/p/1" />
        <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ControlBorderBrush}" />
        <Setter Property="MinHeight" Value="https://www.cnblogs.com/rh-fernando/p/26" />
        <Setter Property="MinWidth" Value="https://www.cnblogs.com/rh-fernando/p/10" />
        <Setter Property="Background" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextBackground}" />
        <Setter Property="Foreground" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="CaretBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="local:ControlAttachProperty.FocusBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FocusBorderBrush}" />
        <Setter Property="local:ControlAttachProperty.MouseOverBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource MouseOverBorderBrush}" />
        <Setter Property="Padding" Value="https://www.cnblogs.com/rh-fernando/p/1" />
        <Setter Property="AllowDrop" Value="https://www.cnblogs.com/rh-fernando/p/True" />
        <Setter Property="VerticalScrollBarVisibility" Value="https://www.cnblogs.com/rh-fernando/p/Auto" />
        <Setter Property="FocusVisualStyle" Value="https://www.cnblogs.com/rh-fernando/p/{x:Null}" />
        <Setter Property="ScrollViewer.PanningMode" Value="https://www.cnblogs.com/rh-fernando/p/VerticalFirst" />
        <!--該值指示是否啟用了筆勢-->
        <Setter Property="Stylus.IsFlicksEnabled" Value="https://www.cnblogs.com/rh-fernando/p/False" />
        <!--SnapsToDevicePixels:該值來確定呈現此元素是否應使用特定于設備的像素設定-->
        <Setter Property="SnapsToDevicePixels" Value="https://www.cnblogs.com/rh-fernando/p/True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Grid>
                        <Border x:Name="Bd"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.MouseOverBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter  Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.FocusBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="https://www.cnblogs.com/rh-fernando/p/False">
                            <Setter TargetName="Bd" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/0.5" />
                        </Trigger>
                        <Trigger Property="IsReadOnly" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter TargetName="Bd" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/0.85" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

　　使用實力及效果：  

四．密碼輸入框PasswordBox控制元件樣式及擴展功能

　　密碼輸入控制元件的樣式和第二節文本框TextBox基本一致，就不做詳細的說明了，直接上樣式的代碼，相關邏輯（C#） 代碼和上面是一樣的（復用），

復制代碼 
    <!--TextBox默認樣式-->
    <Style TargetType="{x:Type PasswordBox}" x:Key="DefaultPasswordBox">
        <Setter Property="ContextMenu" Value="https://www.cnblogs.com/rh-fernando/p/{DynamicResource TextBoxContextMenu}" />
        <Setter Property="SelectionBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextSelectionBrush}" />
        <Setter Property="FontFamily" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontFamily}" />
        <Setter Property="FontSize" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FontSize}" />
        <Setter Property="BorderThickness" Value="https://www.cnblogs.com/rh-fernando/p/1" />
        <Setter Property="PasswordChar" Value="https://www.cnblogs.com/rh-fernando/p/●"/>
        <Setter Property="Height" Value="https://www.cnblogs.com/rh-fernando/p/30" />
        <Setter Property="Width" Value="https://www.cnblogs.com/rh-fernando/p/200" />
        <Setter Property="Background" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextBackground}" />
        <Setter Property="Foreground" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="Padding" Value="https://www.cnblogs.com/rh-fernando/p/0" />
        <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource ControlBorderBrush}" />
        <Setter Property="local:ControlAttachProperty.FocusBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource FocusBorderBrush}" />
        <Setter Property="local:ControlAttachProperty.MouseOverBorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource MouseOverBorderBrush}" />
        <Setter Property="VerticalContentAlignment" Value="https://www.cnblogs.com/rh-fernando/p/Center" />
        <!-- change SnapsToDevicePixels to True to view a better border and validation error -->
        <Setter Property="SnapsToDevicePixels" Value="https://www.cnblogs.com/rh-fernando/p/True" />
        <!--英 ['k?r?t]  美 ['k?r?t]  插入符號-->
        <Setter Property="CaretBrush" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource TextForeground}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type PasswordBox}">
                    <Grid x:Name="PART_Root">
                        <Border x:Name="Bg" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                CornerRadius="{TemplateBinding local:ControlAttachProperty.CornerRadius}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
                        <Grid x:Name="PART_InnerGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition  Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <!--Label區域-->
                            <ContentControl x:Name="Label" Margin="1" Template="{TemplateBinding local:ControlAttachProperty.LabelTemplate}"
                                            Content="{TemplateBinding local:ControlAttachProperty.Label}"/>
                            <!--內容區域-->
                            <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Grid.Column="1" IsTabStop="False" Margin="2"
                                          VerticalAlignment="Stretch" Background="{x:Null}" />
                            <!--附加內容區域-->
                            <Border x:Name="PART_AttachContent" Grid.Column="2" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" >
                                <ContentControl VerticalAlignment="Center" VerticalContentAlignment="Center" Template="{TemplateBinding local:ControlAttachProperty.AttachContent}" />
                            </Border>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.MouseOverBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="https://www.cnblogs.com/rh-fernando/p/True">
                            <Setter  Property="BorderBrush" Value="https://www.cnblogs.com/rh-fernando/p/{Binding Path=(local:ControlAttachProperty.FocusBorderBrush),RelativeSource={RelativeSource Self}}"/>
                        </Trigger>
                        <!--不可用-->
                        <Trigger Property="IsEnabled" Value="https://www.cnblogs.com/rh-fernando/p/False">
                            <Setter TargetName="PART_Root" Property="Opacity" Value="https://www.cnblogs.com/rh-fernando/p/{StaticResource DisableOpacity}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TextBox包含清除Text按鈕的樣式-->
    <Style TargetType="{x:Type PasswordBox}" x:Key="ClearButtonPasswordBox" BasedOn="{StaticResource DefaultPasswordBox}">
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe60a;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                                   local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand" 
                                   CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type PasswordBox}}}"
                               Margin="1,3,1,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TextBox包含附加屬性Label的樣式-->
    <Style TargetType="{x:Type PasswordBox}" x:Key="LabelPasswordBox" BasedOn="{StaticResource DefaultPasswordBox}">
        <Setter Property="local:ControlAttachProperty.LabelTemplate" >
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Width="60" Background="{StaticResource TextLabelBackground}">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="3" Text="{TemplateBinding Content}"></TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TextBox包含附加屬性Label，以及ClearText按鈕的樣式-->
    <Style TargetType="{x:Type PasswordBox}" x:Key="LabelClearButtonPasswordBox" BasedOn="{StaticResource DefaultPasswordBox}">
        <Setter Property="local:ControlAttachProperty.LabelTemplate" >
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Width="60" Background="{StaticResource TextLabelBackground}">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="3" Text="{TemplateBinding Content}"></TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="local:ControlAttachProperty.AttachContent">
            <Setter.Value>
                <ControlTemplate>
                    <local:FButton FIcon="&#xe60a;" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
                               local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand" 
                               CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type PasswordBox}}}"
                               Margin="0,3,1,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
復制代碼

使用示例及效果：  

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/22537.html

標籤：WPF

上一篇：wpf dual monitor

下一篇：[WPF 自定義控制元件]模仿UWP的ProgressRing

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • WebAPI簡介

    Web體系結構： 有三個核心：資源(resource)，URL(統一資源識別符號)和表示 他們的關系是這樣的：一個資源由一個URL進行標識，HTTP客戶端使用URL定位資源，表示是從資源回傳資料，媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式，使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口：Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動，重點不是剖析原始碼，而是理清程式開始時執行的順序。到呼叫了哪些實體，哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里，如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久，有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接，然后服務器根據ip給客戶端網頁發送資訊。 其實，這個需求并不難，只是剛開始對websocket的內容不太了解。上網搜索了一下，有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug，單元測驗“OneColumnImporter_Test”。問題見（https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform， 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右，當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案，估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站，訪問提示：由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站，遇到一個問題，記錄一下： 問題：由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本，請添加處理程式。如果應下載檔案，請添加 MIME 映射。 WindowServer2012服務器，添加角色安裝完.netframework和iis之后，運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考，大家好！ 問題1：HTTP請求和回傳相應的HTTP回應資訊之間發生了什么？ 1：首先是最底層，托管層，位于WebAPI和底層HTTP堆疊之間 2：其次是 訊息處理程式管道層，這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3：控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統，采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線，界面層采用Boostrap + Metronic組合的前端框架，資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5，... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考，大家好！它是什么？它包含什么？它能干什么？ 訊息 HTTP編程模型的核心就是訊息抽象，表示為：HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性： private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置： // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • C#多執行緒學習(二) 如何操縱一個執行緒

    <a href="https://www.cnblogs.com/x-zhi/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2943582/20220801082530.png" alt="" /></...

    uj5u.com 2023-04-19 09:17:20 more
  • C#多執行緒學習(二) 如何操縱一個執行緒

    C#多執行緒學習(二) 如何操縱一個執行緒 執行緒學習第一篇：C#多執行緒學習(一) 多執行緒的相關概念 下面我們就動手來創建一個執行緒，使用Thread類創建執行緒時，只需提供執行緒入口即可。（執行緒入口使程式知道該讓這個執行緒干什么事） 在C#中，執行緒入口是通過ThreadStart代理（delegate）來提供的 ......

    uj5u.com 2023-04-19 09:16:49 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    <a href="https://www.cnblogs.com/huangxincheng/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/214741/20200614104537.png" alt="" /&g...

    uj5u.com 2023-04-18 08:39:04 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    一：背景 1. 講故事 前段時間協助訓練營里的一位朋友分析了一個程式卡死的問題，回過頭來看這個案例比較經典，這篇稍微整理一下供后來者少踩坑吧。 二：WinDbg 分析 1. 為什么會卡死 因為是表單程式，理所當然就是看主執行緒此時正在做什么? 可以用 ~0s ; k 看一下便知。 0:000> k # ......

    uj5u.com 2023-04-18 08:33:10 more
  • SignalR, No Connection with that ID，IIS

    <a href="https://www.cnblogs.com/smartstar/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/u36196.jpg" alt="" /></a>...

    uj5u.com 2023-03-30 17:21:52 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:15:33 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:13:31 more
  • C#遍歷指定檔案夾中所有檔案的3種方法

    <a href="https://www.cnblogs.com/xbhp/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/957602/20230310105611.png" alt="" /></a&...

    uj5u.com 2023-03-27 14:46:55 more
  • C#/VB.NET：如何將PDF轉為PDF/A

    <a href="https://www.cnblogs.com/Carina-baby/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2859233/20220427162558.png" alt="" />...

    uj5u.com 2023-03-27 14:46:35 more
  • 武裝你的WEBAPI-OData聚合查詢

    <a href="https://www.cnblogs.com/podolski/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/616093/20140323000327.png" alt="" /><...

    uj5u.com 2023-03-27 14:46:16 more

Copyright © 2010-2020 有解無憂