[3]入力ボックスの明確な機能を有するWPF実用的なチュートリアル支持透かし

1.はじめに：

WPFの実用的なチュートリアル[2]（この部分では記事に基づいてジャンプするには、ここをクリックしプレゼンテーションを作成するためのソリューションを）。

この章では、プレゼンテーションの作成方法に焦点を当て、コンテンツWPFカスタムコントロールの開発にあなたを取る、カスタム関数入力ボックスをクリアした、理論的な知識に関連するいくつかを簡単に述べると、フォーカスが続く、説明しています高度な記事でで説明しています。

最後に、エンジニアリングのレンダリング：

2.クリーンアッププロジェクト関連コンテンツ

以下に示すようにプレゼンテーションを行う前に、最初のプロジェクト内のコンテンツは、クリーンアップします

ライン4 MainWindow.xaml、ライン9-12は、削除以下削除

MicroUI.Wpf.ToolkitプロジェクトCustomControl.csを削除します

削除された最初の5-17行のテーマ\ Generic.xamlファイル

クリーンアップ後MicroUI.Wpf.Toolkitプロジェクトの内容は次のとおりです。

さて、この次のクリーンアップは、あなたが解決策を再構築し、この時間は、問題の解決策がないかどうかを確認するために実行することができ、非常にきれいです。

私は次のように証明することができる、何の問題もありません。

3.カスタムコントロールプロジェクト

3.1新しいカスタムコントロール

、\「追加」「新しい項目」を選択して右クリックMicroUI.Wpf.Toolkitプロジェクト

「WPF」\「カスタムコントロール（WPF）」、ClearTextBox.csの名前を選択し、矢印の順によると、その後、順番に「追加」ボタンをクリックします。

この時点で、プロジェクトがClearTextBox.csを増加し、Generic.xamlは、そのデフォルトスタイルに追加しました：

管理制御を容易にするために、私は自分のフォルダに配置されているコントロールのそれぞれの内容を入れてますので、ClearTextBoxは、新しいフォルダを作成します。

ClearTextBox.csは新しいClearTextBoxにフォルダをドラッグします。

その後、フォルダClearTextBoxファイル内のリソースファイルを作成します。

Themes.xamlという名前のリソースファイル

あなたは次のことを追加した後：

次のようにClearTextBox \ Themes.xamlコンテンツが改正しました：


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MicroUI.Wpf.Toolkit">

    <Style TargetType="{x:Type local:ClearTextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ClearTextBox}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    
</ResourceDictionary>

次のようにテーマ\ Generic.xamlコードが変更されます。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MicroUI.Wpf.Toolkit">


    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/MicroUI.Wpf.Toolkit;component/ClearTextBox/Themes.xaml" />

    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

[修正MicroUI.Wpf.Samplesは、次のようにMainWindow.xaml読み取りプロジェクト：


<Window x:Class="MicroUI.Wpf.Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:microui="clr-namespace:MicroUI.Wpf.Toolkit;assembly=MicroUI.Wpf.Toolkit"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <microui:ClearTextBox Width="100" Height="30" 
                          VerticalAlignment="Center"
                          HorizontalAlignment="Center" />
    </Grid>

</Window>

実行します。

何もありません。のは、コントロールを変更から始めましょう。

3.2の変更カスタムコントロール

以下に示すようClearTextBoxは、テキストボックスにコントロールを継承しました。

そして、次のようにClearTextBox \ Themes.xaml読み取り変更します。


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MicroUI.Wpf.Toolkit">

    <Style TargetType="{x:Type local:ClearTextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ClearTextBox}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <!--文本内容区域-->
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    
</ResourceDictionary>

私たちは実際にのみ、以下を追加したことがわかります。

そして、次のようにMainWindow.xaml読み取り変更します。

：ClearTextBoxを使用すると、Textプロパティを設定することができますので、実行し、テキストボックスを継承しているので

私たちは、ランニングの効果を見ることができます。カナダのClearBox \ Themes.xamlに私の言葉に注意してください。

この文は、PARTの一つは、名前、多くの情報_ ***、実際には、非常に単純なようだが、私はつまり、合格にここにいます：

ScrollViewerのの「PART_ContentHost」の名前は、WPFは、このコントロールでは、それはScrollViewerのは、テキストボックスの負荷テキストコンテンツに使用されていることを示し、特別な名前を構築されています。PART_ContentHost名前はScrollViewerのかAdorner、デコレータコントロールを使用することができます。

次に、我々は、クリアボタンを追加します：

3.3クリアボタンを追加します。

次のように再修正ClearBox \ Themes.xaml文書が読み取ります。

次いで溶液、再実行を構築します：

私たちは、ボタンを得たsee'veすることができます。スタイルは、最初にかかわらず、スタイル、機能と言うの、非常に醜いです。

隙間に3.4を追加するためのボタン

私はPART_ClearButtonHostでClearBox \ Themes.xamlに名前を割り当てるにはクリアボタンを見ることができます

その後、私は再び次のように変更ClearTextBox.csを、それを変更します：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MicroUI.Wpf.Toolkit
{

    [TemplatePart(Name = "PART_ClearButtonHost", Type = typeof(ButtonBase))]
    public class ClearTextBox : TextBox
    {
        private ButtonBase clearButtonHost;
        static ClearTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ClearTextBox), new FrameworkPropertyMetadata(typeof(ClearTextBox)));
        }

        #region  继承事件
        //模板化控件在加载ControlTemplate后会调用OnApplyTemplate
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (clearButtonHost != null)
            {
                clearButtonHost.Click -= HandleClearButtonClick;
            }
            clearButtonHost = GetTemplateChild("PART_ClearButtonHost") as ButtonBase;
            if (clearButtonHost != null)
            {
                clearButtonHost.Click += HandleClearButtonClick;
            }

        }

        #endregion

        #region 方法
        //清除事件
        private void HandleClearButtonClick(object sender, RoutedEventArgs e)
        {
            Reset();
        }

        public void Reset()
        {
            Text = String.Empty;

        }
        #endregion

    }

}

注：OnApplyTemplate呼び出しの前にロードされ、複数回トリガーされる可能性が高いロードされているため、LoadedイベントにGetTemplateChildを呼び出そうとしないでください。テンプレートは複数回ロードしてもよいし、またはそう最初にそれが空であるかどうかを判断する必要がありますTemplatePartを使用する前に、TemplatePartが正しく取得することはできませんので、あなたがイベントをサブスクライブしたい場合は、あなたがあなたのサブスクリプションをキャンセルしなければなりません。

次の手順を実行しGetTemplateChild：

購読TemplatePartイベント
プライベートフィールドに格納さTemplatePart
TemplatePartイベントを購読

より一時的に説明できないTemplatePartの意義を詳細に説明し、下の意義に到達するために行く、最初に使用されます。

ソリューションのリビルド、プログラムを実行します。

あなたが見ることができる、それが実行されています。

まだここに仕上げるために、我々は、クリアボタンを表示するデータがある場合、データはクリアボタンを非表示になっていない、我々はこの要求を実現することを願っています。

3.5は、データが空であるか否かを判断します

次に、我々は再び財産のそのIsHasTextを高めるために、ClearTextBox.csを変更します。

その後、OnTextChanged（）イベントをリロード

次のようにこの時点では、完全なコードは次のようになります。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MicroUI.Wpf.Toolkit
{

    [TemplatePart(Name = "PART_ClearButtonHost", Type = typeof(ButtonBase))]
    public class ClearTextBox : TextBox
    {
        private ButtonBase clearButtonHost;
        static ClearTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ClearTextBox), new FrameworkPropertyMetadata(typeof(ClearTextBox)));
        }

        #region 输入框内是否有数据
        [Browsable(false)]
        public bool IsHasText
        {
            get { return (bool)GetValue(IsHasTextProperty); }
            private set { SetValue(IsHasTextPropertyKey, value); }
        }
        private static readonly DependencyPropertyKey IsHasTextPropertyKey =
            DependencyProperty.RegisterReadOnly(
                "IsHasText",
                typeof(Boolean),
                typeof(ClearTextBox),
                new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender));
        public static readonly DependencyProperty IsHasTextProperty =
            IsHasTextPropertyKey.DependencyProperty;


        #endregion

        #region  继承事件
        protected override void OnTextChanged(TextChangedEventArgs e)
        {
            base.OnTextChanged(e);
            IsHasText = !String.IsNullOrEmpty(Text);
        }

        //模板化控件在加载ControlTemplate后会调用OnApplyTemplate
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (clearButtonHost != null)
            {
                clearButtonHost.Click -= HandleClearButtonClick;
            }
            clearButtonHost = GetTemplateChild("PART_ClearButtonHost") as ButtonBase;
            if (clearButtonHost != null)
            {
                clearButtonHost.Click += HandleClearButtonClick;
            }

        }

        #endregion

        #region 方法
        //清除事件
        private void HandleClearButtonClick(object sender, RoutedEventArgs e)
        {
            Reset();
        }

        public void Reset()
        {
            Text = String.Empty;

        }
        #endregion

    }

}

その後、我々は、トリガーのスタイルを使用して、IsHasText性質に応じて完了するか、しないようにクリアボタンを表示したいです。以下のように変更ClearTextBox \ Themes.xamlを読み取ります。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MicroUI.Wpf.Toolkit">

    <Style TargetType="{x:Type local:ClearTextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ClearTextBox}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            
                            <!--文本内容区域-->
                            <ScrollViewer x:Name="PART_ContentHost" Grid.Column="1" VerticalAlignment="Center"/>
                            <!--清除按钮-->
                            <Button x:Name="PART_ClearButtonHost" Grid.Column="2" 
                                    Padding="2,0" IsHitTestVisible="False" Visibility="Collapsed"
                                    Content="x"                                     
                                    />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="UIElement.IsEnabled" Value="True"/>
                                <Condition Property="IsHasText" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Setters>
                                <Setter TargetName="PART_ClearButtonHost" Property="IsHitTestVisible" Value="True"/>
                                <Setter TargetName="PART_ClearButtonHost" Property="Visibility" Value="Visible"/>
                            </MultiTrigger.Setters>
                        </MultiTrigger>
                        
                    </ControlTemplate.Triggers>

                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
    
</ResourceDictionary>

あなたは、私が最初にPART_ClearButtonHost初期状態を設定することを確認することができます表示されません。

そして、トリガーに複数の条件をテンプレートを追加します。

トリガ条件は：コントロールが有効になっており、真の、鮮明な表示やクリック可能なボタンにIsHastText。

：その後、我々は解決策、実行を再構築します

基本的なクリーンアップは、その後、我々はクリアスタイルのボタンを美化、少し醜い、完成したが、それのスタイルをされています。

3.6使用iconfont造園ボタンのスタイル

このセクションでは、物品に関する[ WPFの実用的なチュートリアル1 -利用Iconfontアイコンフォント ]、このコンテンツを見て行くことをお勧めします。

プロジェクトファイルをダウンロードし、RESディレクトリにiconfont.ttfを抽出

MicroUI.Wpf.Toolkit新しいプロジェクトFontsディレクトリとして、次のとおりです。

フォントディレクトリにiconfont.ttf：

新しいスタイルMicroUI.Wpf.Toolkitプロジェクトディレクトリとして、次のとおりです。

スタイルディレクトリ内に新しいリソース・ディクショナリ、ファイル名MicroIcon.xaml：

以下のように変更MicroIcon.xamlを読み取ります。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="MicroBtnIcon" TargetType="{x:Type Button}">
        <Setter Property="FontFamily" Value="/MicroUI.Wpf.Toolkit;component/Fonts/#iconfont"></Setter>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0">
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" 
                                          HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" Value="0.8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Opacity" Value="0.7" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
</Style>
    <Style x:Key="MicroBtnIcon_Close" TargetType="{x:Type Button}" BasedOn="{StaticResource MicroBtnIcon}" >
        <Setter Property="Content" Value="&#xe677;" />
</Style>

</ResourceDictionary>

その後にClearTextBox \ Themes.xamlに次の三つの文章を追加します。

次のように同時にクリアボタンを変更します。

ソリューションのリビルド、再実行します。

この時点では、スタイルはかなり良いされている見ることができます。

3.7透かしを追加します。

次に、私はプラス透かしを用意しました。次の単語を追加した編集ClearTextBox.cs、：

#region 水印
[Category("Extend Properties")]
public String WaterMark
{
  get { return (String)GetValue(WaterMarkProperty); }
   set { SetValue(WaterMarkProperty, value); }
}

public static readonly DependencyProperty WaterMarkProperty =
  DependencyProperty.Register("WaterMark", typeof(String), typeof(ClearTextBox), new PropertyMetadata(String.Empty));
#endregion

ClearTextBox \ Themes.xamlにして次の単語を追加します。


 <!--水印区域-->
 <Label x:Name="watermark" Grid.Column="1"
    Content="{TemplateBinding WaterMark}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    IsHitTestVisible="False"
    Foreground="#CCCCCC"
    Margin="{TemplateBinding Padding}"
    Visibility="Collapsed"  />

そして、次の単語を追加します。

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="UIElement.IsEnabled" Value="True"/>
    <Condition Property="UIElement.IsFocused" Value="False"/>
    <Condition Property="TextBox.Text" Value=""/>
  </MultiTrigger.Conditions>
  <MultiTrigger.Setters>
    <Setter TargetName="watermark" Property="Visibility" Value="Visible"/>
  </MultiTrigger.Setters>
</MultiTrigger>

次のようにMainWindow.xaml MicroUI.Wpf.Samplesは、プロジェクトの内容を変更します。

<Window x:Class="MicroUI.Wpf.Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:microui="clr-namespace:MicroUI.Wpf.Toolkit;assembly=MicroUI.Wpf.Toolkit"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <microui:ClearTextBox Width="200" Height="30" 
                          VerticalAlignment="Center"
                          HorizontalAlignment="Center"
                          BorderBrush="#dddddd"
                          BorderThickness="1"
                          WaterMark="这里是水印"
                          Text="公众号：BigBearIT"/>
            <TextBox Text="这里是普通的TextBox" 
                     HorizontalAlignment="Center" 
                     VerticalContentAlignment="Center"
                     Width="200" Height="30" Margin="0,10" />
        </StackPanel>
    </Grid>
</Window>

ソリューションのリビルド、プログラムを実行します。

3.8節

カスタムコントロールを作成するためのプロセスを示すために、透かし入り入力ボックスクリアランスを作成することでBenpianサポートは、あなたが自分自身の依存関係プロパティを初めて目、TemplatePartが、私はこれらのいくつかをハイライトに従うように右の時間になることをお勧めします。

////////////////////////////////////////////////// ///////////////////////////////////////

**元の記事には、再現し、宣言部を添付してください

**出典：https://blog.csdn.net/mybelief321

**著者：ナインゼロ荘

////////////////////////////////////////////////// ///////////////////////////////////////

ナインゼロ荘のブログの専門家

公開された143元の記事・ウォンの賞賛161 ・ビュー121万+

彼のメッセージボードの懸念

[3]入力ボックスの明確な機能を有するWPF実用的なチュートリアル支持透かし

おすすめ