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