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" />