wpf教程

常用属性

x:classModifier

定义了XAML编译由标签编译生成的类具有的访问控制类别。internal与private等价。写internal可能编译报错,把window类的声明,把public改成internal。

比如创建一个用户控件,然后该用户控件的修饰符是internal,那么这就说明该用户空间只能被该程序集使用。

x:Name

定义了控件名称,不能相同。

    xaml代码:// 前台定义
    <TextBox x:Name="textBox" Margin="5">
     
    ------
    c#代码:  //后台获取
    string txtName=textBox.Name;

x:FieldModifier

控件的访问级别。x:FieldModifier 属性的值将随编程语言而变。 有效值为 privatepublicprotectedinternalfriend

x:Key

唯一标识作为资源被创建和引用的元素,这些资源存在于一个 ResourceDictionary 中。

x:Shared

X:Shared用于指定请求资源时创建实例的两种方式。

X:Shared = “true”(默认):表示所有请求都是共享同一个实例。一般不显示指定。

X:Shared = “false”:表示每次请求都创建一个新的实例。

控件

我们把符合某类内容模型的UI元素称为一个族。以下是各种的内容模型。

ContentControl(单一内容控件)

ButtonButtonBaseCheckBoxComboBoxItem
ContentControlFrameGridViewColumnHeaderGroupItem
LableListBoxItemListViewItemNavigationWindow
RadioButtonRepeatButtonScrollViewerStatusBarItem
TpggleButtonToolTipUserControlWindow

单一内容控件共同点:

  • 派生自ContentControl
  • 内容属性的名称为Content
  • 只能由单一元素充当其内容
<StackPanel>
     <Button Margin="5"> 
          <TextBlock Text="Hello" />
     </Button>
     <Button Margin="5"> 
          <Image Source=".\smile.png" Width="30" Height="30"/>
     </Button>
</StackPanel>

ItemsControl(显示列变化数据)

MenuMenuBaseContextMenuComboBox
ItemsControlListBoxListViewTabControl
TreeViewSelectorStatusBar

共同点:

  • 均派生自ItemsControl类
  • 用于显示列表化的数据
  • 内容属性为Item或ItemsSource
  • 每种ItemsControl都对应有自己的条目容器(ItemContainer)

HeaderedItemsControl

除了具有ItemsControl的特性外,还能显示标题。

  • 派生至HeaderedItemsControl类
  • 显示列表化的数据,还可以显示标题
  • 内容属性为Items、ItemsSource和Header

三个控件:MenuItem、TreeViewItem、ToolBar

Decorator(UI装饰)

ButtonChromeClassicBorderDecoratorListBoxChromeSystemDropsShadowChrome
BorderInkPresenterBulletDecoratorViewBox
AdornerDecorator

共同点:

  • 派生自Decorator类
  • UI装饰作用
  • 内容属性为Child
  • 只能由单一元素充当内容

TextBlock和TextBox

TextBlock只能显示文本,不能编辑,TextBox能编辑。

Shape(2D图形绘制)

  • 派生自Shape类
  • 2D图形绘制
  • 无内容属性

Panel(UI布局)

CanvalDockPanelGridTabPanel
ToolBarOverflowPanelStackPanelToolBarPanelUniformGrid
VirtualizingPanelVistualizingStackPanelWrapPanel

共同点:

  • 派生自Panel抽象类
  • 控制UI布局
  • 内容属性为Children
  • 内容可以为多个元素,Panel元素将控制它们布局

布局

布局元素属于Panel族,内容属性为Children ,即可以接受多个控件作为自己的内容并对这些控件进行布局控制。

WPF中的布局元素:

  • Grid:网格,可以自定义行和列并通过行列的数量、行高的列宽来调整控件的布局
  • StackPanel:栈式面板,可以将包含的元素在竖直或水平方向上排成一条线,当移除一个元素,后面的元素会自动向前移动以填充空缺。
  • Canvas:画布,内部元素可以使用以像素为单位的绝对坐标进行定位
  • DockPanel:泊靠式面板,内部元素可以选择泊靠方向
  • WrapPanel:自动折行面板,内部元素在拍满一行后自动折行

Grid(网格)

特性:

  • 定义任意数量的行和列

  • 行的高度和列的宽度可以使用绝对数值、相对比例或自动调整的方式进行精确设定,并可设置最大和最小值

  • 内部元素可以设置自己所在的行和列,还可以设置自己跨几行,横向跨几列

  • 可以设置Children元素的对齐方向

适用场景:

  • UI布局的大框架设计
  • 大量元素需要成行或者成列对齐的情况
  • UI整体尺寸改变时,元素需要保持固有的高度和宽度比例
  • UI后期可能有较大变更或扩展
         <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="120" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="80" />
                <ColumnDefinition Width="4" />
                <ColumnDefinition Width="80" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="4" />
                <RowDefinition Height="*" />
                <RowDefinition Height="4" />
                <RowDefinition Height="25" />
            </Grid.RowDefinitions>
            <TextBlock
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="1"
                Margin="0,5,0,4"
                VerticalAlignment="Center"
                Background="#FFC2A2A2"
                Foreground="#FFF10627"
                Text="请选择您的部门并留言:" />
            <ComboBox
                Grid.Row="0"
                Grid.Column="4"
                Grid.ColumnSpan="1"
                Width="100"
                HorizontalAlignment="Left" />
            <TextBox
                Grid.Row="2"
                Grid.Column="0"
                Grid.ColumnSpan="5"
                BorderBrush="Black" />
            <Button
                Grid.Row="2"
                Grid.Column="4"
                Content="提交" />
            <Button
                Grid.Row="4"
                Grid.Column="4"
                Content="清除" />
        </Grid>

  • ColumnDefinitions 定义多少列,RowDefinitions定义多少行。
  • Grid.Row="行编号",若行编号为0,则可忽略,列同样如此
  • ColumnSpan 代表占几列,行也如此

StackPanel(栈式面板)

StackPanel可以把内部元素再纵向或横向紧凑排列,形成栈式布局。

适用于:

  • 同样的元素需要紧凑排列
  • 移除其中的元素能够自动补缺的布局或动画
 <Grid>
        <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A、迫不及待"/>
                <CheckBox Content="B、首曲一指"/>
                <CheckBox Content="C、陈腔滥调"/>
                <CheckBox Content="D、唉声叹气"/>
                <CheckBox Content="E、不可礼喻"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"/>
                    <Button Content="确定" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
 </Grid>

Orientation="Horizontal" HorizontalAlignment="Right"表示这两个按钮水平靠右对齐

182

属性

  • Orientation: Horizontal、Vertical,决定内部元素是横向累积还是纵向累积
  • HorizontalAlignment: Left、Center、Right、Stretch,决定内部元素水平方向的对齐方式
  • VerticalAlignment: Top、Center、Buttom、Stretch,决定内部元素竖直方向的对齐方式

Canvas(画布)

画布,使用Canvas布局与在Windows Form窗体上布局基本一样的。当控件被放置在Canvas就会被附上Canvas.X和Canvas.Y。

<Canvas>
	<TextBlock Text="用户名:" Canvas.Left="12" Canvas.Top="12"> 
</Canvas>

DockPanel(泊靠式面板)

DockPanel支持让元素简单地停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

WrapPanel(自动折行面板)

WrapPanel面板以一行或者一列的形式来布置控件,当一行(列)放满之后自动转到下一行(列),可以利用Orientation属性设置按行布置还是按列布置。

DataBinding(数据绑定)

Data Bingding用于展示层和逻辑层交互。

模型:

183

  • Binding目标必须是依赖对象,XAMAL控件都继承自DependencyObject,若想自定义的类的对象也能成为Binding目标,则该类必须继承自DependencyObject。
  • Binding数据源无限制,可以是CLR属性或者XAMAL控件,也可以是自定义依赖对象的依赖属性或者是继承自INotifyPropertyChanged的类对象属性。

控件间绑定

绑定语法

xaml 绑定语法

Text=”{Binding ElementName=SourceObjectName, Path=SourceProperty}”

C# 绑定语法

  • 方法一调用FrameworkElement 或FrameworkContentElement对象的SetBinding方法

  • 方法二调用BindingOperations.SetBinding静态方法

Binding binding = new Binding();
//设置源对象
binding.Source = txtName;
//设置源属性
binding.Path = new PropertyPath("Text");
//添加到目标属性
this.tbShowMessage.SetBinding(TextBlock.TextProperty, binding);
//or
BindingOperations.SetBinding(tbShowMessage, TextBlock.TextProperty, binding);

C#移除绑定

  • 方法一: 用BindingOperations.ClearBinding静态方法,例如BindingOperations.ClearBinding(currentTextBlock, TextBlock.TextProperty); BindingOperations同时还提供了ClearAllBindings方法,只需要传入要清除绑定的目标对象的名称,它就会将所有这个对象的绑定移除。

  • 方法二:简单的将目标属性设置为一个新的值。

    个简单的方法同样有效,可以断开与前边设置的binding的连接。简单的设置为任何值即可:如:currentTextBlock.Text = “it’s a new value.”;

XAMAL控件都是继承自DependencyObject,故控件间的依赖属性可以互相绑定

实例:

<TextBox x:Name="txtName" Margin="5" Width="400" BorderThickness="0" Height="50" Text="Source Element"></TextBox>

<TextBlock x:Name="tbShowMessage" Margin="5" Width="400" Height="50" Text="{Binding ElementName=txtName,Path=Text }" />      

绑定到集合

绑定到一个集合,使用派生自ObservableCollection类,它是一个集合类,可在添加或删除项时提供通知。

 <Window.Resources>
        <local:CollectionSource x:Key="myItemsSource"/>
 </Window.Resources> 
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="10,134,0,0" VerticalAlignment="Top" Width="186"
                 ItemsSource="{Binding Source={StaticResource myItemsSource}}" />
    public class CollectionSource : ObservableCollection<Item>
    {
        public CollectionSource() : base()
        {
            Add(new Item() { DM = "0", MC = "默认" });
            Add(new Item() { DM = "1", MC = "类型一" });
            Add(new Item() { DM = "2", MC = "类型二" });
        }
    }
 
    public class Item
    {
        public string MC { get; set; }
 
        public string DM { get; set; }
 
        public override string ToString()
        {
            return MC;
        }
    }

184

事件和命令

事件

<Button Grid.Row="3" Grid.ColumnSpan="2" Content="登录" Width="200" Height="30" Click="Button_Click"/>

而跟XAML文件相关的CS文件里则是这样的:

private void Button_Click(object sender, RoutedEventArgs e)
{
    //业务处理逻辑代码
}

如此一来,前端和后端的代码又耦合在一起了。

命令

ICommand是所有命令的接口,它主要完成两件事情,这个命令能否被执行,以及执行命令。

public interface ICommand{
    void Execute(object parameter);
    bool CanExecute(object parameter);
    event EventHandler CanExecuteChanged;
}
  • Execute方法将包含引用程序任务逻辑。
  • Execute和CanExecute方法都接受一个附加的对象参数,可使用该对象传递所需的任何附加信息。
  • CanExecuteChanged,当命令状态改变是引发该事件。对于使用命令的任何控件,这是指示信号,表示他们应当调用CanExecute方法检查命令的状态。通过使用该事件,当命令可用时,命令源(如button)可自动启用自身;当命令不可用时,禁用自身。

WPF调用图片

WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源。

Uri表达式的一般形式为:协议+授权+路径

  • 协议: pack://
  • 授权:
    • 一种用于访问编译时已经知道的文件,用application:///
    • 种用于访问编译时不知道、运行时才知道的文件,用siteoforigin:///
  • 般用逗号代替斜杠,也就是改写作application:,,,和pack:,,,

加载本项目图片

用XAML引用资源:

<Image Source= "pack://application:,,,/images/my.jpg" />

也可以这样

<Image Source= "/images/my.jpg" />

用代码引用资源

Image img;
img.Source= new BitmapImage( new Uri( "pack://application:,,,/images/my.jpg" ),UriKind.Relative);

也可以

image2.Source = new BitmapImage( new Uri( "/images/my.jpg" , UriKind.Relative));

调用资源图片

imagePath = "pack://application:,,,/Solution;component/Properties/../images/star/my.jpg";
imageBrush.ImageSource = new BitmapImage( new Uri(imagePath, UriKind.RelativeOrAbsolute));

引用外部项目资源

WPF中如果你使用的资源文件不是本程序集的,是另外的程序集,就可以这样做:

引用要用的程序集,pack://application:,,,/程序集名称;component/路径 ,其中pack://application:,,,可以省略

<Image Source= "pack://application:,,,/Skin;component/image/you.png" />

<Image Source= "/Skin;component/image/you.png" />

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×