继续沿用前两章的讲法,只讲用法,概念,到这一系列课程更新完毕,我会找一些例子讲解一些技术难点. 回顾前两章,我们学习了导航,线程,xaml等一些wpf的技术,这章的技术我不是很擅长,关于布局,我找了一本书,把一些重点和大家说说…
先介绍几种布局的结构,
1 , Border 只能包含一个元素,用于生成边框
2, grid 这个布局非常常用,采用了非常灵活的行和列,(构成网格)来排序子元素
3, canvas 按照x和y绝对坐标来排序子元素.
4, stackPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行
5, DockPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行
6, ScrollViewer 一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素
7, WrapPanel 按从左至右的顺序连续排列子元素，等排到面板的最右侧后，将内容 环绕 到下一行，从而形成从左至右、从上至下的排列方式
8, UniformGrid 在相等或均匀的网格区域中排列子元素
9, Viewbox 缩放其所有子元素，与缩放控件非常相似
下面复制一些代码 大家粘贴过去看看就行了,比较如果真干wpf,我们也多是写后台代码,了解前台布局,能看懂就行了.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.33*"/>
<RowDefinition Height="0.33*"/>
<RowDefinition Height="0.33*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.33*"/>
<ColumnDefinition Width="0.33*"/>
<ColumnDefinition Width="0.33*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#FFF1621E" BorderThickness="20,10" Margin="8" CornerRadius="20">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFECFFDF" Offset="0.75"/>
<GradientStop Color="#FFC0FF96" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Margin="6,7,8,7" TextWrapping="Wrap" Text=" Border 只能包含一个子元素，用于生成边框"/>
</Border>
<Grid Grid.Column="1" Margin="8,8,0,8">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF95D241" Offset="0.806"/>
<GradientStop Color="#FFB9F764" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock TextWrapping="Wrap" Height="38.08" VerticalAlignment="Top"><Run Text="Grid 采用非常灵活的行和列（构成 网格 ）布局来排列子元素。"/></TextBlock>
<Rectangle
Fill="{DynamicResource StandardLinearGradientBrush}" Stroke="Black" Width="47" HorizontalAlignment="Left" Margin="8,63.08,0,42"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="36" Margin="31.192,0,0,18.92" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="59" RadiusY="10.34" RadiusX="10.34"/>
<Rectangle Fill="{DynamicResource {x:Static SystemColors.InactiveCaptionBrushKey}}" Margin="70.192,0,79.952,42" Stroke="Black" RadiusY="8.42" RadiusX="8.42" Height="25" VerticalAlignment="Bottom"/>
</Grid>
<Canvas Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" Grid.Column="2" Margin="8" >
<TextBlock TextWrapping="Wrap" Text="Canvas 按照 X 和 Y 绝对坐标来排列子元素。 可用于固定元素在运行期间所在的屏幕位置，这与空白“画布” 类似。" Height="62" Width="190"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Canvas.Left="8" Stroke="Black" Canvas.Top="81" Width="49.048"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Canvas.Left="34.048" Stroke="Black" Canvas.Top="97" Width="49"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="36.08" Canvas.Left="62.048" Stroke="Black" Canvas.Top="112.92" Width="48"/>
</Canvas>
<StackPanel Background="#FFCDE540" Margin="8,3.769,1.76,0" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="StackPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Height="46"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,0"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" HorizontalAlignment="Left" Margin="34.048,0,0,0"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="29.08" Stroke="Black" Margin="71.048,0,69,0"/>
</StackPanel>
<DockPanel Background="#FF63A5EB" Grid.Column="1" Margin="8,3.769,0,0" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="DockPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Width="135.048"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" Margin="0,0,0,10" VerticalAlignment="Bottom"
DockPanel.Dock="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Width="48" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
</DockPanel>
<ScrollViewer Background="#FF99D1AC" Grid.Column="2" Margin="8,0,8,3.769" Grid.Row="1" >
<Grid>
<TextBlock TextWrapping="Wrap" Text="ScrollViewer 一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。" Height="63" VerticalAlignment="Top"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,40.931" VerticalAlignment="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" HorizontalAlignment="Left" Margin="34.048,0,0,19.931" VerticalAlignment="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="28.931" Stroke="Black" Margin="51.048,0,71.096,8" VerticalAlignment="Bottom"/>
</Grid>
</ScrollViewer>
<WrapPanel Background="#FFD1BF99" Margin="9.76,8,0,0" Grid.Row="2" >
<TextBlock TextWrapping="Wrap" Text="WrapPanel 按从左至右的顺序连续排列子元素，等排到面板的最右侧后，将内容 环绕 到下一行，从而形成从左至右、从上至下的排列方式。" Height="78" Width="190.048"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Width="48"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="24.08" Stroke="Black" Width="48"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="33.08" Stroke="Black" Width="48"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Width="48"/>
</WrapPanel>
<UniformGrid Background="#FF8F99A5" Grid.Column="1" Margin="8,8,0,0" Grid.Row="2" >
<TextBlock TextWrapping="Wrap" Text="UniformGrid 在相等或均匀的网格区域中排列子元素。" Height="54" VerticalAlignment="Top" Margin="0,0,-1.976,0"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="54" Stroke="Black" Margin="5.976,0,8,28.53" VerticalAlignment="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="64"
Stroke="Black" Margin="5.976,0,12,18.53" VerticalAlignment="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="64" Stroke="Black" Margin="5.976,0,8,18.53" VerticalAlignment="Bottom"/>
</UniformGrid>
<Viewbox Grid.Column="2" Margin="8,8,8,0" Grid.Row="2" Stretch="Fill" OpacityMask="Black">
<Grid Height="165.06" Width="206.144" Background="#FFE2AA7B">
<TextBlock TextWrapping="Wrap" Text="Viewbox 缩放其所有子元素，与缩放控件非常相似。" Height="69" VerticalAlignment="Top"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,81,0,57.06"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" HorizontalAlignment="Left" Margin="34.048,0,0,36.06" VerticalAlignment="Bottom"/>
<Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Margin="71.048,0,87.096,36.06" VerticalAlignment="Bottom"/>
</Grid>
</Viewbox>
</Grid>
代码挺多,大家拿过去看看就行了
很明显,上面我们使用的动态资源,我们先认识一下资源字典,添加一个资源字典
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- 应该在此定义资源字典条目。-->
<SolidColorBrush x:Key="StandardSolidColorBrush" Color="White" />
<LinearGradientBrush x:Key="StandardLinearGradientBrush" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="#FF060505" Offset="1"/>
</LinearGradientBrush>
<Rectangle x:Key="RX" Width="100" Height="100"></Rectangle>
</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>
<ScaleTransform ScaleY="1" ScaleX="1.5"/>
<SkewTransform AngleY="0" AngleX="24"/>
<RotateTransform Angle="22"/>
<TranslateTransform X="-23"/>
</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,下章我们继续.后面还有依赖属性,路由,绑定等一些零零碎碎的小技术..