WEB开发技术

SilverLight:布局(2)GridSplitter(网格分割)垂直分割、水平分割

ylbtech-SilverLight-Layout: 布局(2)GridSplitter(网格分割)垂直分割、水平分割
  • A, Splitter(分割)对象之 GridSplitter(网格分割)1:垂直分割
  • B,Splitter(分割)对象之 GridSplitter(网格分割)2:水平分割
  • C,Splitter(分割)对象之 GridSplitter(网格分割)3:Grid嵌套水平分割
  • D, Splitter(分割)对象之 GridSplitter(网格分割)3:Grid嵌套水平分割+垂直分割
1.A, Splitter(分割)对象之 GridSplitter(网格分割)1:垂直分割返回顶部
1,
2,
2.1/2, <UserControl >中加一个引用 

 xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

2.2/2,

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Margin="3" Content="Left side of the grid"></Button>
    <controls:GridSplitter Grid.Column="1" Background="LightGray" Width="3"
                            VerticalAlignment="Stretch" HorizontalAlignment="Center"
                            ShowsPreview="False"/>
    <Button Grid.Column="2" Margin="3" Content="Right side of the grid"></Button>
</Grid>

3, Width=[Auto[自动大小]|*[其他]], Background

, Grid.Column[网格列坐标], VerticalAlignment[竖直对齐], HorizontalAlignment[水平对齐], ShowsPreview[显示预览]

4,
1.B,Splitter(分割)对象之 GridSplitter(网格分割)2:水平分割返回顶部
1,
2,
2.1/2, 同上文 A.2.1/2
2.2/2,

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="80"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Margin="3" Content="Left side of the grid"></Button>
    <Button Grid.Row="2" Grid.Column="0" Margin="3" Content="Left side of the grid"></Button>
    <controls:GridSplitter Grid.Row="1" Grid.ColumnSpan="3" Background="LightGray" Height="3"
                            VerticalAlignment="Center" HorizontalAlignment="Stretch"
                            ShowsPreview="False"/>
    <Button Grid.Row="0" Grid.Column="2" Margin="3" Content="Right side of the grid"></Button>

    <Button Grid.Row="2"  Grid.Column="2" Margin="3" Content="Right side of the grid"></Button>
</Grid>

3,

+, Grid.ColumnSpan[合并列]

4,
1.C,Splitter(分割)对象之 GridSplitter(网格分割)3:Grid嵌套水平分割返回顶部
1,
2,

2.1/2, 同上文 A.2.1/2
2.2/2,

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Content="Light side of the grid"></Button>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <controls:GridSplitter Grid.Row="1" Background="LightGray" Height="3"
                            VerticalAlignment="Center" HorizontalAlignment="Stretch"
                            ShowsPreview="False"/>
        <Button Grid.Row="0" Grid.Column="2" Margin="3" Content="Right side of the grid"></Button>
        <Button Grid.Row="2"  Grid.Column="2" Margin="3" Content="Right side of the grid"></Button>
    </Grid>
</Grid>   

3,

4,
1.D, Splitter(分割)对象之 GridSplitter(网格分割)3:Grid嵌套水平分割+垂直分割返回顶部
1,
2,

2.1/2, 同上文 A.2.1/2
2.2/2,

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Margin="3" Content="左边"></Button>
    <Button Grid.Row="2" Grid.Column="0" Margin="3" Content="左边"></Button>
    <controls:GridSplitter Grid.Column="1" Grid.RowSpan="3" Background="LightGray" Width="3"
                            VerticalAlignment="Stretch" HorizontalAlignment="Center"
                            ShowsPreview="False"/>
    <Grid Grid.Row="0" Grid.Column="2" Grid.RowSpan="3">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="2" Margin="3" Content="右上"></Button>
        <Button Grid.Row="2"  Grid.Column="2" Margin="3" Content="右下"></Button>
        <controls:GridSplitter Grid.Row="1" Background="LightGray" Height="3" 
                            VerticalAlignment="Center" HorizontalAlignment="Stretch"
                            ShowsPreview="False"/>
    </Grid>
</Grid>

3,

4,
1.E,返回顶部
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
未经允许不得转载:WEB2.0开发设计 » SilverLight:布局(2)GridSplitter(网格分割)垂直分割、水平分割
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们