WPF-コントロールテンプレート

コントロールテンプレートといえば、または実装内の1人のニーズので、私は丸いボタンに会いました。最初、私は灰色の知覚では、正方形のボタンがいくつかの作品を引っ張らないでください。これは、丸いボタンを達成するための方法ですか？

私の最初の考えはあるスタイルを使用するが、それはなかったたボタン形状のプロパティを変更しません。

ビット「WPFプログラミングの本を」読んで私はそう、参照コントロールテンプレートを良いNiubiああことをその章の感触が、私はまだ混乱して感じています。そして、内部の「素人WPF」を通じてひっくり返さ素人、その後、テンプレート、ネクタイ孟先生や安定ああ。

コントロールテンプレートは何である私の理解がある、：行を埋め、そのような鼻パッドなどの制御化粧品へのコントロールテンプレート、など;とにかく、あなたはそれの全体が、元のように見えるのか分かりません。

何？あなたは、コントロールテンプレートが整形手術を制御することであると言いますか？私はまた、背景色、前景色を設定するためのスタイルのコントロールを学び、そのスタイルにええ、それは改築を完了しませんか？

母は、私が思う制御がに設定されているのみで再生することができますスタイルのメイクアップ効果を化粧妹は格好良いとなったが、例えば、しかし、まだまだ短いコントロールのに美容整形残忍な効果ああそう。

上記の単語を介して制御テンプレートの力ということを教えてくれます。それは私たちが丸いボタンのコントロールテンプレートを通してそれを実現する方法を見て始めました。

最初のステップ：それは整形手術を望んでいるならば、我々は、私はまだかなりのように整形手術の前に長い鋸ボタンを知っていることを知っている必要があり、そして私は、WPFのプロジェクトをビルドアップして実行、行くためにボタンを追加することができます。ビジュアルツリーによって、私は、このボタンは、から成るが見つかりました：

 

 

 ステップ2：スタート整形手術、すべてのコントロールがTempleteの財産であるとの情報へのアクセスは、私たちのようにすることです化粧次のように使用し、コードは次のとおりです。

< ボタンの内容= "ハハ" VerticalAlignmentを= "センター" たHorizo​​ntalAlignment = "センター" > 
    <！ - 私たちはControlTempleteコントロールテンプレート呼んでTemplete属性が値- > 
    < Button.Template > 
        < ControlTemplateのTargetTypeに= "ボタン" > 
            <！ - あなたはそれを書きたい書き込み- > 
        </ ControlTemplateの> 
    </ Button.Template > 
</ ボタン>

あなたが直接編集するにControlTemplete、プレビューインターフェイスに追加し、その結果として表示されません後、私は傷つけられた、この人のようになります~~~我々は継続慌てる必要はありませんことを証明しています。

第三段階：ControTempleteタグで、我々はそれを書きたいというコードを書くには、私はネイティブボタンを知って、我々はそれのボタン全体の内容を与えることを背景として、親、楕円としてGridコンテナを使用する方法。

< ボタンの内容= "ハハ" VerticalAlignmentを= "センター" たHorizo​​ntalAlignment = "センター" フォアグラウンド= "ホワイト" > 
    <！ - 私たちはControlTempleteコントロールテンプレート呼んでTemplete属性が値- > 
    < Button.Template > 
        < のControlTemplate = TargetTypeの「ボタン」> 
            <！ - 小さなかかわらず、我々はただ、楕円良いを追加していますが、彼はボタンではないと言うことはできません- > 
            < グリッド> 
                < 楕円の幅=「50」高さ=「50」塗りつぶし= "ブルー" /> 
            </ グリッド> 
        </ ControlTemplateの>
    </ Button.Template > 
</ ボタン>

 

 

 実装が達成されるが、私は私の場所を見つけることができず、これと通常のラウンド楕円は、任意の違いを作ったのですか？？？私の恐怖はおかしいでしょうか？

そこでここではまた、プラスチック製の手術は人々に全体の場所を与える必要があることを思い出させる必要があり、書き込みの唯一のレイアウトは半分しか完了することができ、我々はまた、コントロールテンプレートのトリガープロパティを追加する必要がありますが、魂トリガーオハイオ州のコントロールのいずれか、書き込み制御テンプレート。

ステップ4：トリガを追加するには、コントロールを与えます。ノックし、自分の知性のヒントを必要としないコンパイラ!!!! ~~~あなた自身をノックする必要が右emmm性質の多くの内部トリガー!!!（少しピット、マイクロソフトTucao ~~~~程度）。

<Button Content="哈哈" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White">
    <!--Templete属性的值就是我们所说的ControlTemplete即控件模板-->
    <Button.Template>
        <!--这里TargetType是一定要写的哦 不写的话很多属性编译器认不出来-->
        <!--TarGetType有另外一种写法 TargetType={x:Type Button}-->
        <ControlTemplate TargetType="Button">
            <!--我们就只添加一个Ellipse好了 麻雀虽小 但是你不能说他不是Button了-->
            <Grid>
                <Ellipse x:Name="ball" Width="50" Height="50" Fill="Blue"/>
            </Grid>
            <!--添加鼠标移入移出的效果，让别人知道它是一个鲜活的Button-->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" TargetName="ball" Value="LightBlue"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Fill" TargetName="ball" Value="DarkBlue"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

好啦，添加完trigger后，就真的像一个圆形按钮了，哈哈。来个GIF看下效果吧。

 

 

 

 别急，结束了么？注意按钮的文本不见了！！！《WPF编程宝典》中告诉我们，所有控件都需要有一个ContenPresenter元素--它表示"在此插入内容"，缺少它是不可以的。我们在上面直接给丢了。

第五步：在控件模板中添加ContentPresenter元素，让控件的内容显示出来。

<Button Content="哈哈" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White">
    <!--Templete属性的值就是我们所说的ControlTemplete即控件模板-->
    <Button.Template>
        <!--这里TargetType是一定要写的哦 不写的话很多属性编译器认不出来-->
        <!--TarGetType有另外一种写法 TargetType={x:Type Button}-->
        <ControlTemplate TargetType="Button">
            <!--Grid作为父容器 用于承载布局元素-->
            <Grid>
                <!--Ellipse在这里充当背景 代替原生的button里面的border元素-->
                <Ellipse x:Name="ball" Width="50" Height="50" Fill="Blue"/>
                <!--ContentPresenter在原生button就有，我们一定要带上它，可别丢掉-->
                <ContentPresenter VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
            </Grid>
            <!--添加鼠标移入移出的效果，让别人知道它是一个鲜活的Button-->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" TargetName="ball" Value="LightBlue"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Fill" TargetName="ball" Value="DarkBlue"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

最後はTempleteBinding--テンプレートが結合ことに留意すべきである、WPFはこの事を作成し、それが私たちのテンプレートは、アプリケーションテンプレート、当社の使用するテンプレートから値を抽出することができますようにすることです。これは、ああ費やす必要があります~~~。

さて、最後に、この株式のGIFレンダリング終了を丸いボタンを完了しました。