StackPanel与Grid交叉使用

今天实验了StackPanel和Grid一起用,开始先建了一个StackPanel,这个StackPanel占据了真个空间,为了做成这种效果把Width设置成了500.

在第一个StackPanel里面建了个Grid。在Grid里建了三个行定义和两个列定义。

把Title1放在默认位置,文字放在Grid.Row="1" Grid.Column="1".因为起始定义为0开始。

色块放在 Grid.Row="2" Grid.Column="1"。把一份设置好后复制三份,改掉颜色就可以了。也就相当于在第一个StackPanel里建了3个Grid。

以下是代码:

<StackPanel Width="500" Margin="20,0,0,0" HorizontalAlignment="Left">
        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <TextBlock FontSize="24" >Title1</TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
             小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
            </TextBlock>
            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Blue" Width="100" Height="30"/>
                <Rectangle Fill="Black" Width="100" Height="30"/>
                <Rectangle Fill="Green" Width="100" Height="30"/>

</StackPanel>

</Grid>
        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <TextBlock FontSize="24" >Title2</TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
             小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
            </TextBlock>
            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Blue" Width="100" Height="30"/>
                <Rectangle Fill="Yellow" Width="100" Height="30"/>
                <Rectangle Fill="Green" Width="100" Height="30"/>

</StackPanel>

</Grid>
        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <TextBlock FontSize="24" >Title3</TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
             小说以第一人称描写,叙述者马塞尔患有重度失眠症,经常处于半睡半醒的状态,年幼时的体弱多病,敏感异常。小说开头主人公回忆起童年时在贡布雷的生活片段。一个夏天晚上,邻居斯万先生,没有斯万夫人奥黛特陪同,来看望叙述者的父母。叙述者睡前等不到母亲的亲吻,心里非常难受。
            </TextBlock>
            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Blue" Width="100" Height="30"/>
                <Rectangle Fill="Red" Width="100" Height="30"/>
                <Rectangle Fill="Green" Width="100" Height="30"/>

</StackPanel>

</Grid>

</StackPanel>
   
</Page>

时间: 2024-10-12 20:38:07

StackPanel与Grid交叉使用的相关文章

WPF中使用VisualBrush的实例

本文实现一个名为"你来我往"的小程序,该程序管理着"张三"和"李四"两位童鞋拥有的现金,一开始,两人均拥有100美元的现金,随着将现金从其中一人转移至另外一人,两人拥有的现金数在不断变化,程序可以跟踪这种变化,并正确显示每人拥有的现金数.每次最多可以转移三张纸币,纸币的金额可以是5美元.10美元或者20美元. 程序运行后的效果如图1所示,我们点击"张三"右边的"5美元""10美元"&qu

WPF ItemsControl ListBox ListView比较

在进行列表信息展示时,WPF中提供多种列表可供选择.这篇博客将对WPF ItemsControl, ListBox, ListView进行比较. 相同点: 1. 这三个控件都是列表型控件,可以进行列表绑定(ItemsSource): 2. 这三个控件均使用ItemsPresenter来展示列表信息: 不同点: 控件层次关系: ItemsControl: System.Object  System.Windows.Threading.DispatcherObject System.Windows.

可以折叠的按钮

<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Expander Header="可以折叠" Name="expander1" IsExpanded="True" >

WPF学习之事件的学习(二)

3.2自定义路由事件 为了方便程序中对象之间的通信,通常需要我们自己定义一些路由事件.那么如何去创建自定义路由事件呢?下面通过一个例子来说明自定义路由事件的创建. 创建自定义路由事件大体来说分为三个步骤: 声明并注册路由事件 首先,定义路由事件与依赖属性的定义手法极为相似——申明一个由public static readonly修饰的RoutedEvent类型的字段,然后使用EventManager类的RegisterRoutedEvent方法进行注册. 完整的注册路由事件的代码如下: //声明

Windows App开发之应用布局与基本导航

简单演示样例看页面布局和导航 首先依照上一篇博客中的顺序来新建一个项目.新建好之后就点开MainPage.xaml開始写程序了. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height=&qu

自定义表头Datagrid

自定义的一个表头 1 <bp:BasePage x:Class="NetReform.Pages.RealProbabiTableCompare" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http:/

UWP开发入门(七)——下拉刷新

本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难.UWP开发更大的困难在于懒惰,缺乏学习的意愿.而不是“某软连下拉刷新控件都没有”这样的想法. 之前我也没有进行过下拉刷新的研究.于是先去google了几篇blog学习了一下,然后再看了某软官方的Sample.(同学们啊官方有下拉刷新的Sample啊!就在Git上啊!不要钱无门槛啊!)学习之后发现实现的方式大体分为两类. 一类是以某软Sample和博客园MS-UAP封装的PullToRefres

DependencyProperty

学习到现在,你可能已经hold不住想搞起一个具有实际意义的Silverlight程序开发了.不过在开始之际,我们还需要掌握一些其它基础原理.本章中,我们会快速地学习一下Silverlight中的两个关键的概念:依赖属性(dependency properties)和路由事件(routed events). 这两个概念都是来自WPF.这两个概念对于大多数开发者来说绝对是个惊喜——毕竟,很少会期望用于做用户界面的技术会重组.NET对象抽象的核心部分.不过,WPF的这些变化的设计并不是为了改进.NET

【Win10】开发中的新特性及原有的变更

声明:本文内容适用于 Visual Studio 2015 RC 及 Windows 10 10069 SDK 环境下,若以后有任何变更,请以新的特性为准. 一.Password 控件的小眼睛属性的变更 在 Windows 8.1(含 Windows 8) 及 Windows Phone 8.1 Runtime 中,Password 控件的小眼睛是由 IsPasswordRevealButtonEnabled 属性定义的,但是,尽管是相同的属性名字,却有着不同的表现形式. Windows 8.1