引言:在進行WPF項目開發過程中,由於項目的需要,經常要對某個控制項進行特殊的設定,其中就牽涉到模板的相關方面的內容。本文也是在自己進行項目開發過程中遇到控制項模板設定時集中搜集資料後整理出來的,以供在以後的項目開發過程中查閱。WPF有控制項模板和數據模板,從字面上來看,控制項模板主要是用來改變控制項的外觀,數據模板則定義控制項中數據的表現方式。下面讓逐一進行介紹。
控制項模板ControlTemplate,有兩部分:VistualTree視覺樹,即是能看到的外觀;Trigger觸發器,裡面包括外部條件達到某一條件下會引起的響應。
參考代碼:
<Button Content="Button" Grid.Row="1" Height="136" HorizontalAlignment="Left" Margin="114,80,0,0" Name="button1" VerticalAlignment="Top" Width="205" > <Button.Template > <ControlTemplate > <Grid > <Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/> <TextBlock Name="txtBlock" /> </Grid > <ControlTemplate.Triggers > <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="blue"/> </Trigger > </ControlTemplate.Triggers > </ControlTemplate > </Button.Template > </Button >在上面的前臺代碼中,包含button控制項的視覺樹和觸發器。Grid部分是改變button控制項的視覺樹部分,意思是將button控制項顯示部分橢圓,而背景色是控制項的原本色調;Triggers部分是當有滑鼠在button控制項上面是控制項的背景色變為藍色。
為了便於多次利用,可以將其寫入模板中,如下:
<Window.Resources > <ControlTemplate x:Key="buttonTemplate" TargetType="Button" > <Grid > <Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/> <TextBlock Name="txtBlock" /> </Grid > <ControlTemplate.Triggers > <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="blue"/> </Trigger > </ControlTemplate.Triggers > </ControlTemplate > </Window.Resources >調用時:
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="216,224,0,0" Name="button3" Width="75" Template="{StaticResource buttonTemplate}"/>
DataTemplate模板:
參考代碼:
<ListBox Height="202" HorizontalAlignment="Left" Margin="21,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="384" > <ListBox.ItemTemplate > <DataTemplate > <StackPanel Orientation="Horizontal" > <TextBox Width="60" Text="{Binding Path=Name}"/> <TextBox Width="60" Text="{Binding Path=ID}"/> <TextBox Width="60" Text="{Binding Path=Age}"/> </StackPanel > </DataTemplate > </ListBox.ItemTemplate > </ListBox >上例是將listbox作為實例來做展示,在一個listbox控制項中為了顯示多行和多列數據,使用ItemTemplate進行構造。
WPF中的style:style,樣式風格的意思,簡單來說就是對屬性值的批處理,在實際使用過程中幫助非常大。
參考代碼:
<Window.Resources > <ResourceDictionary > <Style x:Key="dgButton" TargetType="Button" > <Setter Property="Background" Value="Blue" /> <Setter Property="FontSize" Value="20"/> </Style > <Style x:Key="cb" TargetType="CheckBox" > <Style.Triggers > <Trigger Property="IsChecked" Value="True"> <Setter Property="FontSize" Value=" 40"/> <Setter Property="Foreground" Value="Red" /> </Trigger > </Style.Triggers > </Style > </ResourceDictionary > </Window.Resources >調用方式:
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="216,224,0,0" Name="button3" VerticalAlignment="Top" Width="75" Style ="{StaticResource dgbutton}"/><CheckBox Content="CheckBox" Height="58" HorizontalAlignment="Left" Margin="654,16,0,0" Name="checkBox1" VerticalAlignment="Top" Width="175" Style="{StaticResource cb}" Grid.Row="1" />
上述代碼有兩個組成部分:
1 設置button的的背景色和字體大小,說到底也是對button的屬性進行批量處理。當然在實際使用button控制項時也可單獨使用,此處只是便於處理。
2 設置checkbox的觸發器,當對check進行選擇是,字體和背景色都會做出改變。
總結:在項目開發過程中,經常使用的也就是這些了,如果有更為特殊需求,那就需要另外尋求方案處理了。