WPF笔记(1.4 布局)——Hello,WPF!

原文:WPF笔记(1.4 布局)——Hello,WPF!

这一节只是第2章的引子。
布局要使用Panel控件,有四种Panel,如下:
DockPanel,就是设置停靠位置布局模型。
StackPanel,提供一个从左至右或从上至下放置内容的堆栈模型。
Grid,提供一个允许进行 行/网格定位的模型。可使用表格。
Canvas,可精确定位。

其中,Grid是最常用的,vs2005自动生成的Page和window都默认带有这个标签:

Example 1-25. A sample usage of the Grid panel
<Window >
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>
    <Button Grid.Row="0" Grid.Column="2">C</Button>
    <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>
    <Button Grid.Row="1" Grid.Column="1">E</Button>
    <Button Grid.Row="1" Grid.Column="2">F</Button>
    <Button Grid.Row="2" Grid.Column="1">H</Button>
    <Button Grid.Row="2" Grid.Column="2">I</Button>
  </Grid>
</Window>

这段程序产生一个3x3表格。注意,先定义行格式,再定义列格式,最后是往单元格放入button。

Example 1-26. Arranging an image and text in a grid
<Button Width="100" Height="100">
  <Button.Content>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Image Grid.Row="0" Source="tom.png" />
      <TextBlock
        Grid.Row="1"
        HorizontalAlignment="Center">Tom</TextBlock>
    </Grid>
  </Button.Content>
</Button>

这段程序是在图片下面加了一行Caption,也是用的Grid下表格排版。

以上两个例子都有Grid.Row=1这样的语法——attached-property牵连属性。即在Grid内部定义(),在外部控件Button中指定属性值。
牵连属性的用途,事先不一定用Button填充单元格,这样对所有控件就有任意性——暂时这么想,因为没看第二章。

时间: 2024-08-06 16:05:49

WPF笔记(1.4 布局)——Hello,WPF!的相关文章

WPF笔记1 用VS2015创建WPF程序

使用WPF创建第一个应用程序.实现功能如下: 单击"Red"按钮,文本显示红色:单击"Black"按钮,文本显示黑色:单击"Back"按钮,退出当前应用程序. 实现步骤如下: 新建项目,选择WPF程序. 选中创建的windows窗口,在属性中更改Title为"使用visual studio 2015 创建WPF应用程序". 添加lable,将内容更改为"Hello WPF!",在属性中更改背景色backgr

WPF笔记(2.7 文字布局)——Layout

原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件: 1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,"Wrap"是换行,NoWrap是不换行(原书有误,在此更正).TextBlock控件内可以放置很多控件,不光是文字. <TextBlock TextWraping="Wrap">    <Button>Split</Button>    

WPF笔记(2.9和2.10)——Layout

原文:WPF笔记(2.9和2.10)--Layout 2.9讲的是,如果内部设定超过容器大小,怎么办?StackPanel会裁剪越界部分DockPanel和Grid会智能判断,从而决定换行. 2.10 自定义布局容器自定义容器要实现两个方法MeasureOverride和ArrangeOverride,并保证遍历其下的所有子控件,使他们都执行Measure和Arrange方法. using System;using System.Windows.Controls;using System.Win

WPF笔记(2.5 Canvas)——Layout

原文:WPF笔记(2.5 Canvas)--Layout Canvas是最精确的布局容器--绝对定位,此书作者不建议使用,以为控件的大小一般会随着内部字体图片的动态生成而自动变化,所以使用前三种布局是最好的选择,在这一点上,我也持同样意见. Canvas使用Top/Bottom属性控制距离顶部/底部的高度:使用Left/Right属性控制距离左/右的距离.有趣的是,调整Form的大小,第二个TextBlock的位置会相应变化,但和底部以及右边的距离是不变的,代码见下: <Canvas Backg

WPF笔记(2.3 StackPanel)——Layout

原文:WPF笔记(2.3 StackPanel)--Layout StackPanel用于小规模的排版布局,比如说一个局部下几个textbox和Button啦.Orientation属性有Vertical和Horizontal两种选择,决定布局方向. 所有控件都有Margin属性,用来使控件之间不那么拥挤,Margin随Vertical和Horizontal的不同而所加的空白方向不同,当然Margin=“3,3”意味着同时在两个方向上有空白.HorizontalAlignment属性用来调整控件

WPF笔记(2.2 DockPanel)——Layout

原文:WPF笔记(2.2 DockPanel)--Layout 读完了这一节,发现DockPanel就是过去winform中的Dock属性.原来的Dock属性是子控件设置,而其父亲级别不用设置.现在WPF改为在父亲级别抽象出一个DockPanel,然后设置其下子控件的Dock属性. <DockPanel LastChildFill="True">    <Button DockPanel.Dock="Left">Left</Button

WPF笔记整理 - Bitmap和BitmapImage

项目中有图片处理的逻辑,因此要用到Bitmap.而WPF加载的一般都是BitmapImage.这里就需要将BitmapImage转成Bitmap 1. 图片的路径要用这样的,假设图片在project下的Images目录,文件名XXImage.png. pack://application:,,,/xxx;component/Images/XXImage.png 2. 代码: Bitmap bmp = null; var image = new BitmapImage(new Uri(this.X

WPF笔记整理--DataBinding(2)

图片绑定时的一个问题.场景如下: 有2个窗口A和B,A窗口的业务逻辑是编辑生成图片.然后从A窗口可以打开B窗口.B窗口是由A生成所有图片的列表.当在A窗口编辑生成图片并保存后打开B窗口就会看到刚刚生成的图片.关闭B窗口,可以在A窗口中继续编辑图片,再次保存图片并打开B窗口,就会看到最新的图片的变化.图片是保存在本地路径. 解决方案:定义一个Converter,将图片读到MemoryStream中,然后再Binding.代码如下: public object Convert(object valu

WPF笔记整理--DataBinding(1)

WPF的数据绑定是一大亮点.如果用WPF而不用数据绑定,那就太失败了. 也不多废话,如果不知道如何绑定,请百度一下.这里简单的提几点: 1. ObservableCollection可用于集合绑定,由于已经实现了INotifyPropertyChanged,可以通过添加删除集合中的元素来实现对UI列表项更新.注意,当一个ObservableCollection已经有元素,通过再次new集合并不能实现清空页面已显示的内容. 如果希望ObservableCollection中某列表项的属性值改变显示