WPF系列三

继续沿用前两章的讲法,只讲用法,概念,到这一系列课程更新完毕,我会找一些例子讲解一些技术难点. 回顾前两章,我们学习了导航,线程,xaml等一些wpf的技术,这章的技术我不是很擅长,关于布局,我找了一本书,把一些重点和大家说说…

先介绍几种布局的结构,

1 , Border 只能包含一个元素,用于生成边框

2, grid 这个布局非常常用,采用了非常灵活的行和列,(构成网格)来排序子元素

3, canvas 按照x和y绝对坐标来排序子元素.

4, stackPanel 将子元素沿水平或垂直方向排列（或堆叠）成一行

5, DockPanel 将子元素沿水平或垂直方向排列（或堆叠）成一行

6, ScrollViewer 一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素

7, WrapPanel 按从左至右的顺序连续排列子元素，等排到面板的最右侧后，将内容环绕到下一行，从而形成从左至右、从上至下的排列方式

8, UniformGrid 在相等或均匀的网格区域中排列子元素

9, Viewbox 缩放其所有子元素，与缩放控件非常相似

下面复制一些代码大家粘贴过去看看就行了,比较如果真干wpf,我们也多是写后台代码,了解前台布局,能看懂就行了.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border.Background>

</LinearGradientBrush>

</Border.Background>

</Border>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Rectangle

Fill="{DynamicResource StandardLinearGradientBrush}" Stroke="Black" Width="47" HorizontalAlignment="Left" Margin="8,63.08,0,42"/>

</Grid>

</Canvas>

</StackPanel>

<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" Margin="0,0,0,10" VerticalAlignment="Bottom"

DockPanel.Dock="Bottom"/>

</DockPanel>

<Grid>

</Grid>

</ScrollViewer>

</WrapPanel>

<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="64"

Stroke="Black" Margin="5.976,0,12,18.53" VerticalAlignment="Bottom"/>

</UniformGrid>

</Grid>

</Viewbox>

</Grid>

代码挺多,大家拿过去看看就行了

很明显,上面我们使用的动态资源,我们先认识一下资源字典,添加一个资源字典

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</LinearGradientBrush>

</ResourceDictionary>

这个是资源字典的代码,我们上面出现很多Fill="{DynamicResource StandardLinearGradientBrush}"这样的代码,其实都差不多,这也是绑定的一种方式,动态资源,我们已经了解过了.不管动态还是静态资源,我们都是用key来描述这个资源的.

来了解一下属性面板的一些变化的东西,

Left , Top 相当于winfroms 里面的 dock属性

Width height 不用说了,Margin这个比较好理解,相当于css样式表里面的Margin –Top的这些属性. 还要关于定位,尺寸控制,停靠,等一些功能,自己看看吧.

Wpf还支持旋转,倾斜,缩放,等功能,这个我们会在后面用eb来设计这些动画,用手写,基本累死了.(我有个朋友手写动画,现在头发快掉完了,我说的真事,骗你们不是人,呵呵)

关于旋转的几行代码.

<TextBlock Height="48.092" Margin="394,139,80,0" TextWrapping="Wrap" Text="WPF "

VerticalAlignment="Top" Foreground="#FF94EB2F" FontSize="8" TextAlignment="Center">

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

很明显.这是一个TextBlock控件,然后任何控件都有一个转换对象RenderTransform,因为是一组转换坐标, TransformGroup,他里面包含就是转换坐标啊,一些属性的,这些基本都是用eb设计出来的.

下面来看一个比较有意思的例子,自定义的panel

这次我们不管xaml文件,就写后台代码

namespace WPFUserPanel

{

//定义一个类,基础Panel, Panel是一个布局的基类

class PlotPanel : Panel

{

public PlotPanel()

: base()

{

}

//确定元素在布局中所需大小,这个方法我们没有写东西,只是更新尺寸

protected override Size MeasureOverride(Size availableSize)

{

Size childSize = availableSize;

foreach (UIElement child in InternalChildren)

{

child.Measure(childSize);

}

return availableSize;

}

//为元素设置大小

protected override Size ArrangeOverride(Size finalSize)

{

foreach (UIElement child in InternalChildren)

{

double x = 50;

double y = 50;

//定位元素

child.Arrange(new Rect(new Point(x, y), child.DesiredSize));

}

return finalSize;

}

下面是窗体的cs代码

namespace WPFUserPanel {

/// <summary>

/// Window1.xaml 的交互逻辑

/// </summary>

public partial class Window1 : Window {

Button B0 = null;

Button B1 = null;

public Window1() {

InitializeComponent();

//我们在构造函数里面直接使用这个继承类

PlotPanel p = new PlotPanel();

//设置我们的自定义panel的大小

p.Width = 300;

p.Height = 300;

//这是为背景指定一张图片,前面说过

p.Background = new ImageBrush(new BitmapImage(new Uri("Penguins.jpg", UriKind.Relative))); ;

this.Content = p;

B0 = new Button();

B0.Width = 200;

B0.Height = 20;

B0.Content = "B0 点击重新定位自定义容器";

p.Children.Add(B0);

B0.Click += new RoutedEventHandler(B0_Click);

B1 = new Button();

B1.Width = 200;

B1.Height = 20;

B1.Margin = new Thickness(0, 25, 100, 0);

B1.Content = "B1 点击重新定位自定义容器";

B1.Click += new RoutedEventHandler(B0_Click);

p.Children.Add(B1);

}

void B0_Click(object sender, RoutedEventArgs e) {

Button B = sender as Button;

//这样的两句话,显示的效果完全不一样,

//如果就用margin来定位的话,他只是根据当前的位置进行移动

//B.Margin = new Thickness(10, 10, 0, 0);

//而使用Arrange进行定位,就是重新一次定位.

//B.Arrange(new Rect(new Point(10, 10), B.DesiredSize));

//这两种方法也是根据需要来用的.

}

这章我们讲了布局的几种用法,和动态资源,资源字典,自定义panel,下章我们继续.后面还有依赖属性,路由,绑定等一些零零碎碎的小技术..