WPF控件模板

　　引言：在進行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進行選擇是，字體和背景色都會作出改變。

 

總結：在項目開發過程當中，常常使用的也就是這些了，若是有更爲特殊需求，那就須要另外尋求方案處理了。

 

 

add in 2014\9\10

作WPF項目，在界面排版時，每每由於分辨率的不一樣而致使這樣那樣的問題，此處添加一個框架，適應於不一樣的分辨率的開發機。

<DockPanel Name="DockPanel1" LastChildFill="True">
<Viewbox Name="Viewbox1" Stretch="Fill">
<Canvas Height="1080" Name="Canvas1" Width="1920">
<Grid Canvas.Left="0" Canvas.Top="0" Height="1080" Width="1920">

</Grid>
</Canvas>
</Viewbox>
</DockPanel>

雖然簡單卻很是實用。

 

 

add in 2014\11\11

wpf控件引用UI設計好的樣式：

<Button Content="Button" Margin="0,8,8,0" VerticalAlignment="Top" Style="{DynamicResource closeButtonStyle}" Height="17.598"  Width="17.598" Click="Button_Click" />

 

在界面中必需添加引用：

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/StyleLibrary;component/ResourceDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

由於界面是window界面，因此是Window.Resource,若是是page則Page.Resources。

 

如何使引用的其餘項目中的控件資源，則應該在App.xaml中添加例如：

<Application.Resources>
        <ResourceDictionary >
            <ResourceDictionary.MergedDictionaries >
                <ResourceDictionary Source="/MonitorStyleLibrary;component/ResourceDictionary1.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

項目中的控件直接引用資源名稱便可：

<Button Content="登陸" Height="245" Style="{StaticResource logobtn}" HorizontalAlignment="Left" Margin="771,445,0,0" Name="btnLogin" Width="288" FontSize="40" Click="btnLogin_Click" />