WPF Demo12 布局

1
<Window x:Class="布局.DockPanel1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
    <Grid ShowGridLines="True" >
        <DockPanel >
            <StackPanel Height="30" DockPanel.Dock="Top" Background="Blue" />
            <StackPanel Width="50" DockPanel.Dock="Left" Background="Wheat"/>
            <StackPanel Width="50" DockPanel.Dock="Right" Background="Red"/>
            <StackPanel Width="Auto" DockPanel.Dock="Bottom" Background="Gray"/>
        </DockPanel>
    </Grid>
</Window>

2
<Window x:Class="布局.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="500" Width="500">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.ColumnSpan="2">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Content="何戈洲" Margin="5,0,0,0"/>
                <Button Content="我的博客" Margin="5,0,0,0"/>
                <Button Content="短消息" Margin="5,0,0,0"/>
                <Button Content="设置" Margin="5,0,0,0"/>
                <Button Content="退出" Margin="5,0,0,0"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.Row="1">
            <!--<Image Source="/Samples;Component/Images/logo_small.gif" />-->
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">
            <StackPanel Orientation="Horizontal">
                <Button Margin="5,0,0,0">园子</Button>
                <Button Margin="5,0,0,0">新闻</Button>
                <Button Margin="5,0,0,0">博问</Button>
                <Button Margin="5,0,0,0">闪存</Button>
                <Button Margin="5,0,0,0">网摘</Button>
                <Button Margin="5,0,0,0">招聘</Button>
                <Button Margin="5,0,0,0">专题</Button>
                <Button Margin="5,0,0,0">知识</Button>
            </StackPanel>
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
            <!--<Image Source="/Samples;Component/Images/main.png" />-->
        </Grid>
        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,0,0,0">关于我们</Button>
                <Button Margin="5,0,0,0">联系我们</Button>
                <Button Margin="5,0,0,0">广告服务</Button>
                <Button Margin="5,0,0,0">人才服务</Button>
                <Button Margin="5,0,0,0">版权</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

3
<Window x:Class="布局.Window3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window3" Height="300" Width="300">
    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
        <GroupBox Header="网站分类" Height="Auto">
            <StackPanel Orientation="Vertical">
                <Button Content=".NET技术(16)"/>
                <Button Content="编程语言(13)"/>
                <Button Content="软件设计(3)"/>
                <Button Content="Web前端(16)"/>
                <Button Content="软件工程(26)"/>
            </StackPanel>
        </GroupBox>
        <GroupBox Header="链接" Height="Auto">
            <StackPanel Orientation="Vertical">
                <Button Content="反馈和建议"/>
                <Button Content="官方博客"/>
                <Button Content="电子期刊" />
                <Button Content="人才服务"/>
                <Button Content="博客模板"/>
            </StackPanel>
        </GroupBox>
    </StackPanel>
</Window>

4
<Window x:Class="布局.Window4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window4" Height="600" Width="850">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Height="100">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid >
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
                        <Button Content="何戈洲" Margin="5,0,0,0" HorizontalAlignment="Right"/>
                        <Button Content="我的博客" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                        <Button Content="短消息" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                        <Button Content="设置" Margin="5,0,0,0"  HorizontalAlignment="Right"/>
                        <Button Content="退出" Margin="5,0,0,0"  HorizontalAlignment="Right" Click="Button_Click" />
                    </StackPanel>
                </Grid>
                <Grid  Grid.Row="1">
                    <!--<Image Source="/Samples;Component/Images/logo_small.gif" HorizontalAlignment="Left"/>-->
                </Grid>
                <Grid  Grid.Row="2">
                    <StackPanel Orientation="Horizontal">
                        <Button Margin="5,0,0,0">园子</Button>
                        <Button Margin="5,0,0,0">新闻</Button>
                        <Button Margin="5,0,0,0">博问</Button>
                        <Button Margin="5,0,0,0">闪存</Button>
                        <Button Margin="5,0,0,0">网摘</Button>
                        <Button Margin="5,0,0,0">招聘</Button>
                        <Button Margin="5,0,0,0">专题</Button>
                        <Button Margin="5,0,0,0">知识</Button>
                    </StackPanel>
                </Grid>
            </Grid>
        </StackPanel>
        <StackPanel DockPanel.Dock="Bottom" Height="30" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Margin="5,0,0,0">关于我们</Button>
            <Button Margin="5,0,0,0">联系我们</Button>
            <Button Margin="5,0,0,0">广告服务</Button>
            <Button Margin="5,0,0,0">人才服务</Button>
            <Button Margin="5,0,0,0">版权</Button>
        </StackPanel>
        <StackPanel DockPanel.Dock="Left" Width="150">
            <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                <GroupBox Header="网站分类" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content=".NET技术(16)"/>
                        <Button Content="编程语言(13)"/>
                        <Button Content="软件设计(3)"/>
                        <Button Content="Web前端(16)"/>
                        <Button Content="软件工程(26)"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="链接" Height="Auto">
                    <StackPanel Orientation="Vertical">
                        <Button Content="反馈和建议"/>
                        <Button Content="官方博客"/>
                        <Button Content="电子期刊" />
                        <Button Content="人才服务"/>
                        <Button Content="博客模板"/>
                    </StackPanel>
                </GroupBox>
            </StackPanel>
        </StackPanel>
        <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Width="200">
            <GroupBox Header="最新新闻" Height="160">
                <StackPanel Orientation="Vertical">
                    <Button Content="宅急送近日宣布降价抢"/>
                    <Button Content="腾讯联手华为操盘四核手机"/>
                    <Button Content="Windows 8各版本区别与售价"/>
                    <Button Content="数方程将无线网络带宽提高一个数量级"/>
                    <Button Content="中移动:Lumia 920T将于11月上市"/>
                    <Button Content="Windows 8下一站:10月25日纽约"/>
                </StackPanel>
            </GroupBox>
            <GroupBox Header="48小时阅读排行榜" Height="160">
                <StackPanel Orientation="Vertical">
                    <Button Content="子用户-角色-权限-菜单 浅谈:子账户设计方案"/>
                    <Button Content="网站已恢复正常,让大家久等了"/>
                    <Button Content="拿什么拯救你,我的51Job简历?——UBB漏洞"/>
                    <Button Content="这些年我们没用过的JS"/>
                    <Button Content="多少钱才可让人重拾理想"/>
                    <Button Content="准备购买的Dell服务器的硬件配置"/>
                </StackPanel>
            </GroupBox>
        </StackPanel>
        <StackPanel >
            <Button Content=" 我铺满"/>
        </StackPanel>
    </DockPanel>

</Window>

运行效果依次为:

时间: 2024-11-15 06:34:31

WPF Demo12 布局的相关文章

WPF 动态布局Grid

1 //开启线程加载 2 Action a = () => 3 { 4 var row = 7; 5 var column = 9; 6 7 var path = "../../face_img/"; 8 var files = Directory.GetFiles(path); 9 for (var i = 0; i < row; i++) 10 { 11 faceGrid.RowDefinitions.Add(new RowDefinition()); 12 } 13

Wpf之布局

上一章大家有了自己的一个Hello World的wpf程序,今天咱们就一起走进WPF,一起来看看wpF的前台xaml这门语言的魅力. 写过web 的人都知道布局这个概念,在web中布局和样式是靠div+CSS来完成的,而在wpf中布局是靠容器来完成的,大家可以把wpf中的容器和web里面的div做对比,刚入门的同学也不要着急,没学过web一点不影响大家学习容器布局的概念的概念. 大家先来看个设计图吧 因为偷懒我直接切了个百度的图来看,更贴近大家的生活,哈哈. 咱们来分析一下,这张图片由4行2列来

WPF简单布局 浅尝辄止

WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自contentcontrol类, 说道简单布局不得不说下wpf的布局原则: 理想窗口要遵循的布局原则: 1,不应显示的设定元素的尺寸. 2,不应使用屏幕坐标指定元素的位置. 3,布局容器和他们的子元素“共享”可以使用的空间. 4,可以嵌套布局容器. 布局过程包括:测量阶段和排列阶段.所有的wpf布局容器都是派生自s

WPF 之 布局(一)

WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进行排列组合. Pane类的公共属性太多了.就简单介绍几个常见的属性如下表. 名称 说明 Cursor 获取或设置在鼠标指针位于此元素上时显示的光标. DataContext 获取或设置元素参与数据绑定时的数据上下文. Dispatcher 获取与此 DispatcherObject 关联的 Disp

WPF UI布局(Layout)

WPF是专门用户界面技术,布局是核心功能之一. 每个布局元素都有自己的特点,要灵活使用. WPF中布局元素有如下: Grid:网格 可以自行定义行和列并通过行列的数量.行高和列宽来调整布局.类似Table. Grid具有ColumnDefinitions和RowDefinitions属性,它们分别是ColumnDefinition和RowDefinition的集合, 表示Grid定义了多少行多少列. StackPanel:栈式面板 可以将包含的元素在垂直或水平方向上排成一条直线,移除前一个元素后

WPF UI布局之概述

在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介绍 本篇对WPF的布局控件做一个初步的概览,并分别演示Grid.StackPanel.Canvas.DockPanel和WrapPanel五个布局控件.. 主要内容包含: 1.UI布局的方式和关系. 2.WPF的布局理念. 3.五种布局控件的概述和演示. 4.小结. 二.UI布局的方式和关系 1.三

二,WPF的布局

布局过程 WPF布局包含两个阶段:一个测量(measure)阶段和一个排列(arrange)阶段.在测量阶段,窗口遍历所有子元素,并询问子元素它们所期望的尺寸.在排列阶段,窗口在合适的位置放置子元素. ActualHeight属性和ActualWidth属性:在某些情况下,可能希望使用代码检查窗口中某个元素的尺寸,这时使用Height和Width是没有用的,因为这两个属性是所期望的尺寸设置,可能和实际的渲染尺寸不同,在理想情况下,应当让元素的尺寸适应它们的内容,所以不要设置Height和Widt

WPF代码模板-布局部分

Grid 两行和三列 <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition>

WPF Grid布局 实现DataGrid控件宽充满布局

1.充满布局 显示设置DataGridTextColumn的属性Width="*" 实现DataGrid控件宽充满布局,代码与效果图片如下所示: 2.Header居中显示 WPF DataGrid属性中无DataGrid的Header居中显示属性,可在xaml代码中添加 设置风格代码 设置,代码如下: <!-- 设置Header居中 --> <DataGrid.ColumnHeaderStyle> <Style TargetType="DataG