• 关于Silverlight的布局


        silverlight的整个页面就是一个内容控件继承自UserControl。这是一个内容控件,具有Content属性。此属性只能是唯一的,所以在页面的跟元素下,添加一个以上的控件或者文本会提示:“属性"Content"已设置多次。”,但是我们可以通过嵌套布局控件来达到复杂的布局需求。

        一,布局容器

          1. Grid:新建SL应用程序时,系统默认生成的布局控件相当于Html中的表格布局。

    <Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition />
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    </Grid>

    这个是4列3行的Grid 其中一列是用集合编辑器添加。右键点击Grid选择属性就会在属性窗口看到2个按钮分别为行和列。编辑其中可以设定行或者列的宽度、高度、最大宽度,最小宽度。其中宽度和高度的默认值是“*”这个是告诉容器此行或者列占用剩余的所有空间。

        grid的动态创建

     public partial class MainPage : UserControl
    {
    public MainPage()
    {
    InitializeComponent();
    this.Content = _creatNewGrid();
    }
    public Grid _creatNewGrid()
    {
    Grid _grid = new Grid();
    for (int i = 0; i < 3;i++ )//创建3行
    {
    RowDefinition _rows = new RowDefinition();
    _rows.Height = new System.Windows.GridLength(1, GridUnitType.Star);
    _grid.RowDefinitions.Add(_rows);
    }
    for (int j = 0; j < 3; j++)//创建3列
    {
    ColumnDefinition _col = new ColumnDefinition();
    _col.Width = new System.Windows.GridLength(1, GridUnitType.Auto);
    _grid.ColumnDefinitions.Add(_col);
    }
    TextBox _textbox = new TextBox(); //添加一个TextBox控件
    _textbox.Text = "Grid布局中添加一个控件!";
    Grid.SetRow(_textbox, 0);
    Grid.SetColumn(_textbox, 0);//添加到第一行第一列注意行号从0开始,添加时使用的是Grid的静态方法!
    _grid.Children.Add(_textbox);
    return _grid;

    }
    }

    当然作为类似表格布局一样的存在,Grid也可以单独设置每一行或列的属性,还可以合并单元格。

      2.StackPanel 小区域布局控件,给定一组控件按照Orientation属性的值(水平和垂直)来决定控件的显示方式。

      3.Canvas控件,基于坐标的布局控件。

          其内的控件主要属性为:Canvas.ZIndex,Canvas.Left 和Canvas.Top 这3个属于依赖属性(DependencyProperty)。

     这3种容器控件,是SL应用程序中最常用到的。

     4.ScrollViewer, 要想让你的页面具有滚动条你就要在容器的外面在包上一层,代码最直观!

     <ScrollViewer Name="svContainer"  Background="#dcdcdc" HorizontalContentAlignment="Left" VerticalAlignment="Top" BorderBrush="Beige"  BorderThickness="0" HorizontalAlignment="Left"  Width="900" Height="600"  Grid.Row="1"  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0">
    <ScrollViewer.Content>
    <Border VerticalAlignment="Top" HorizontalAlignment="Left" BorderThickness="1" BorderBrush="White" >
    <Canvas Name="cnsDesignerContainer" VerticalAlignment="Top" HorizontalAlignment="Left" Width="900" Height="580" Background="#ffffff">
    </Canvas>
    </Border>
    </ScrollViewer.Content>
    </ScrollViewer>

    相当的虎头蛇尾,基本的页面布局就着4种控件了。

      

  • 相关阅读:
    获取jsonPath的节点名称
    如何删除 macOS High Sierra 上的 swapfile
    Prototype fake it till make it.观后感
    intellij idea 初步环境熟悉
    一个比较综合的项目--》>图片缓存,下拉刷新等
    写的很好的博客->有关性能优化、图片缓存等
    layout优化之-》viewStub,requestFocus,merge,include
    有关ActionBar
    android:installLocation 解析
    Android开发效率—Eclipse快捷键
  • 原文地址:https://www.cnblogs.com/glorysword/p/2294590.html
Copyright © 2020-2023  润新知