Silverlight 数据显示和布局控件示例

本是古典何须时尚 2022-05-15 19:25 206阅读 0赞

## 数据显示控件 ##

## DataGrid ##

DataGrid 是最基础的数据显示方式，也就是二维表格。

[![image][]][image 1]

<data:DataGrid Name="dataGrid1" Height="120" 
                           Margin="5,5,5,5"
                           RowDetailsVisibilityMode="VisibleWhenSelected" 
                           AutoGenerateColumns="False">
                    <data:DataGrid.Columns>
                        <data:DataGridTextColumn Header="订?单￥号?" 
                                             Width="SizeToHeader" 
                                             Binding="{
       Binding OrderID}"
                                             IsReadOnly="True"/>
                        <data:DataGridTextColumn Header=" 客í户§名?称? "
                                             Width="SizeToHeader"
                                             Binding="{
       Binding CustomerName}"/>
                        <data:DataGridTextColumn Header=" 订?单￥签?订?日?期ú " 
                                             Width="SizeToHeader"
                                             Binding="{
       Binding OrderDate}"/>
                        <data:DataGridCheckBoxColumn Header="是?否?变?更ü"
                                                 Width="SizeToHeader"
                                                 Binding="{
       Binding IsChanged}"/>
                    </data:DataGrid.Columns>
                </data:DataGrid>

Width="SizeToHeader"  宽度与Header相同

this.dataGrid1.ItemsSource = Order.Orders.GetSampleOrderList();

/// <summary>
        /// 订?单￥集ˉ合?类à
        /// </summary>
        public class Orders
        {
            public static List<Order> GetSampleOrderList()
            {
                return new List<Order>{
      new Order("001", "A公?司?"
                    , DateTime.Now, true),
                    new Order("002", "B公?司?"
                        , DateTime.Now, false)};
            }
        }

##  ##

## DataPager ##

[![image][image 2]][image_image 2]

DataPager是翻页控件，用来与ListBox，DataGrid组合并实现翻页的控件。

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

public SC\_Pager()  
\{  
InitializeComponent();  
//设置分页控件基本属性  
dataPager.DisplayMode = PagerDisplayMode.FirstLastPreviousNextNumeric;  
//分页事件  
dataPager.PageIndexChanged +=  
new EventHandler<EventArgs>(dataPager\_PageIndexChanged);  
//设置页尺寸  
dataPager.PageSize = 5;  
//定义数据源  
string\[\] source = @"一，二，三，四，五，六，七，八，九，十  
，十一，十二，十三，十四，十五".Split('，');  
//创建分页集合对象  
PagedCollectionView pager = new PagedCollectionView(source);  
//将分页集合做为数据源绑定到ListBox控件  
listBox.ItemsSource = pager;  
\}  
//显示当前页号  
void dataPager\_PageIndexChanged(object sender, EventArgs e)  
\{  
DataPager dataPager = sender as DataPager;  
MessageBox.Show("当前是第" + dataPager.PageIndex.ToString() + "页");  
\}

## TreeView ##

[![image][image 3]][image_image 3]

TreeView 树控件，他的节点可以是文字也可以是其他XAML 元素，TreeViewItem元素代表节点，可以一层嵌套一层

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

<controls:TreeView Width="300" Margin="10"
                       x:Name="treeView">
            <controls:TreeViewItem Header="商ì品·树÷"
                               IsSelected="True"
                               IsExpanded="True">
                <controls:TreeViewItem Header="茶è" 
                                   IsExpanded="True">
                    <controls:TreeViewItem Header="铁ú观?音?"/>
                    <controls:TreeViewItem Header="茉?莉ò花¨" />
                </controls:TreeViewItem>
                <controls:TreeViewItem Header="电?脑?"
                                   IsExpanded="True">
                    <controls:TreeViewItem Header="台¨式?机ú"
                                       IsExpanded="True">
                        <controls:TreeViewItem Header="Dell"/>
                        <controls:TreeViewItem Header="联a想?"/>
                    </controls:TreeViewItem>
                    <controls:TreeViewItem Header="笔ê记?本?"
                                       IsExpanded="True">
                        <controls:TreeViewItem>
                            <controls:TreeViewItem.Header>
                                <CheckBox Content="Ibm" 
                                      Click="CheckBox_Click" 
                                      Width="100"/>
                            </controls:TreeViewItem.Header>
                        </controls:TreeViewItem>
                        <controls:TreeViewItem>
                            <controls:TreeViewItem.Header>
                                <CheckBox Content="Dell"
                                      Click="CheckBox_Click"
                                      Width="100"/>
                            </controls:TreeViewItem.Header>
                        </controls:TreeViewItem>
                    </controls:TreeViewItem>
                </controls:TreeViewItem>
            </controls:TreeViewItem>
        </controls:TreeView>

Header="笔记本" 属性代表树节点的显示内容

## 布局控件 ##

布局控件是纯粹为展现UI而设计的控件。

## Border ##

## Canvas ##

面板控件

## Grid ##

格子控件

## StackPanel ##

排列控件

## GridSplitter ##

Grid的组合控件，用来实现格子大小的鼠标拖动修改。

下面定义了，三行三列的格子，其中夹在中间的2个像素的分析放置了GridSplitter控件，用来使用鼠标拖动，来调整格子的大小。

## ScrollViewer ##

ScrollViewer是滚动条窗口控件，当包含在他其中的控件大小超出了ScrollViewer的大小的时候，滚动条就会变的可拖动。

## TabControl ##

[![image][image 4]][image_image 4]

TabControl 是选项卡控件。

<basics:TabControl x:Name="tab1" Width="300" Height="200">
            <basics:TabItem Header="选?项?卡¨1" Content="这a是?第ú一?个?选?项?卡¨"/>
                <basics:TabItem Header="选?项?卡¨2" >
                    <Button Content="Button" Height="23" Name="button1" Width="75" />
                </basics:TabItem>
        </basics:TabControl>

**示例出自Silverlight开发详解一书的源代码**

[image]: /images/20220503/e9eca1c203494fd2bd389626a39ecc09.png
[image 1]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_10414/image_2.png
[image 2]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_10414/image_thumb_1.png
[image_image 2]: /images/20220503/c89e135fa7bd4c12954f95f67bde670c.png
[image 3]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_1250F/image_thumb.png
[image_image 3]: /images/20220503/1c0c3fafc6594fffaea050390b0e01e0.png
[image 4]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_1250F/image_thumb_1.png
[image_image 4]: /images/20220503/897a66bc7e2f47aea4b06caa113cf9cb.png