Speaking of control templates, or because one needs in implementation, I met a round button. At first I perceived gray square buttons do not pull a few pieces. This is how to achieve a round button?
My first thought is to use styles , but found that did not change the property of the Button shape.
So I read a bit "WPF programming book", see the control template that chapter feel that good Niubi Oh, but I still feel confused. Then flipped through the "layman WPF" inside the layman, then the template, Tie Meng teacher or stable ah.
What is a control template , my understanding is: control template to control cosmetic, such as a nose pad, buried a line, and so on; anyway, you do not know the whole of it looks like the original.
what? You say control template is to control plastic surgery? I also learned Style controls to set the background color, foreground color, and so on style Yeah, it do not complete the facelift it?
Haha, I think control is set to the style can only play a makeup effect , for example, although the make-up sister become good-looking, but still far short of the controls to cosmetic surgery so brutal effect ah.
Through the above words to tell you that the power of control template. It began to look at how we achieve it through a round Button control template.
The first step: if it wants plastic surgery, we should know that I still quite like to know long-sawed Button before plastic surgery, and I can build a WPF project, add a Button to go, up and running. By visual tree I found this Button consisting of:
Step Two: Start plastic surgery, access to information that all the controls are Templete property, is to let our cosmetic use, the code is as follows:
< The Button Content = "ha ha" VerticalAlignment = "Center" HorizontalAlignment = "Center" > <-! Values Templete attribute that is what we call ControlTemplete control template -> < Button.Template > < ControlTemplate TargetType = "the Button" > <! - write you want to write it -> </ ControlTemplate > </ Button.Template > </ the Button >
After you add into ControlTemplete, preview interface to directly edit and consequently do not see, prove that this person looks like I was disfigured ~ ~ ~ do not panic we continue.
The third step: in ControTemplete tag, write the code that we wanted to write it, I know native Button, the way we use Grid container as a parent, Ellipse as a background to give Button entire contents of it .
< The Button Content = "ha ha" VerticalAlignment = "Center" HorizontalAlignment = "Center" the Foreground = "White" > <-! Values Templete attribute that is what we call ControlTemplete control template -> < Button.Template > < ControlTemplate = TargetType "Button" > <-! we just add a Ellipse good, though small, but you can not say he is not a Button -> < Grid > < Ellipse the Width = "50" the Height = "50" the Fill = "Blue" /> </Grid> </ControlTemplate> </Button.Template> </Button>
Implementation is achieved, but I can not find my spot, and this and an ordinary round Ellipse made any difference? ? ? My fear is funny?
So here we must also remind you that plastic surgery is necessary to give people the whole place, write control template, only the layout of the write can only be half completed, we also need to add Trigger property of the control template, but one of the controls of a soul Trigger oh .
Step Four: Give your controls add Trigger. Trigger inside a lot of properties compiler does not need their own intelligence tips to knock !!!! ~~~ emmm right you have to knock yourself !!! (a little pit, Microsoft Tucao about ~ ~ ~ ~).
<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>
The last should be noted that TempleteBinding-- template binding, WPF created this thing, it is to make our template can extract value from the application template a template for our use. This should spend oh ~~~.
Well, finally completed a round button, GIF renderings end of this Share:
