zoukankan      html  css  js  c++  java
  • 控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image

    示例
    1、DataGrid.xaml
    <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="Silverlight20.Control.DataGrid"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--
            后台邦定方式,自动生成列
            
    -->
            
    <data:DataGrid x:Name="dgrd" AutoGenerateColumns="True"></data:DataGrid>
            
        
    </StackPanel>
    </UserControl>

    DataGrid.xaml.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace Silverlight20.Control
    {
        
    public partial class DataGrid : UserControl
        
    {
            
    public DataGrid()
            
    {
                InitializeComponent();

                BindData();
            }


            
    void BindData()
            
    {
                var source 
    = new Data.SourceData();

                
    // 设置 DataGrid 的数据源
                dgrd.ItemsSource = source.GetData().Take(10);
            }

        }

    }



    2、DatePicker.xaml
    <UserControl x:Class="Silverlight20.Control.DatePicker"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:basics
    ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--
            TextBox 结合 Calendar,经典的选择日期的方式
            SelectedDateFormat - 被选中的日期的显示格式 [System.Windows.Controls.DatePickerFormat枚举]
                SelectedDateFormat.Short - 简短格式。默认值。如2008-10-10
                SelectedDateFormat.Long - 非简短格式。如2008年10月10日
            
    -->
            
    <basics:DatePicker Width="200" SelectedDateFormat="Short"></basics:DatePicker>
            
        
    </StackPanel>
    </UserControl>


    3、Grid.xaml
    <UserControl x:Class="Silverlight20.Control.Grid"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width
    ="Auto" Height="500">
        
        
    <!--
        Grid - 表格式布局模式
            Grid.RowDefinitions - 用于定义 Grid 中的行
            Grid.ColumnDefinitions - 用于定义 Grid 中的列
            Grid.ShowGridLines - 显示网格
        
            Grid.Row - 控件所在的 Grid 的行的索引
            Grid.Column - 控件所在的 Grid 的列的索引
            Grid.RowSpan - 合并行。 控件所在行,以及控件所在行之后的需要连续合并的行的总行数
            Grid.ColumnSpan - 合并列。 控件所在列,以及控件所在列之后的需要连续合并的列的总列数
        
            Width - 宽度
            MinWidth - 最小宽度
            MaxWidth - 最大宽度
            Height - 高度
            MinHeight - 最小高度
            MaxHeight - 最大高度
        
        Width 和 Height 的可用值
        Auto - 自动设置为一个合适的值。默认值
        Pixel - 像素值
        * - 比例值。如 * 就是全部,2* & 8* 就是分别占20%和80%
        
    -->
        
    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
            
            
    <Grid.RowDefinitions>
                
    <RowDefinition Height="50" />
                
    <RowDefinition Height="3*" />
                
    <RowDefinition Height="7*" />
                
    <RowDefinition Height="*" MinHeight="200" MaxHeight="500" />
                
    <RowDefinition Height="Auto" />
            
    </Grid.RowDefinitions>
            
            
    <Grid.ColumnDefinitions>
                
    <ColumnDefinition />
                
    <ColumnDefinition />
                
    <ColumnDefinition />
            
    </Grid.ColumnDefinitions>
            
            
    <TextBox Grid.Row="0" Grid.Column="0" Background="red" Text="abc" />
            
    <TextBox Grid.Row="0" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
            
    <TextBox Grid.Row="1" Grid.Column="0" Background="red" Text="abc" />
            
    <TextBox Grid.Row="1" Grid.Column="1" Background="red" Text="abc" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
            
    <TextBox Grid.Row="2" Grid.Column="0" Background="red" Text="abc" />
            
    <TextBox Grid.Row="2" Grid.Column="1" Background="red" Text="abc" Grid.RowSpan="2" VerticalAlignment="Bottom" />
            
    <TextBox Grid.Row="2" Grid.Column="2" Background="red" Text="abc" />
            
    <TextBox Grid.Row="3" Grid.Column="2" Background="red" Text="abc" />
            
    <TextBox Grid.Row="4" Grid.Column="2" Background="red" Text="abc" />
            
        
    </Grid>
        
    </UserControl>


    4、GridSplitter.xaml
    <UserControl x:Class="Silverlight20.Control.GridSplitter"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:basics
    ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">
        
    <Grid x:Name="LayoutRoot" Background="White">
            
            
    <Grid.RowDefinitions>
                
    <RowDefinition Height="100" />
                
    <RowDefinition Height="5" />
                
    <RowDefinition Height="100" />
            
    </Grid.RowDefinitions>
            
            
    <Grid.ColumnDefinitions>
                
    <ColumnDefinition Width="100" />
                
    <ColumnDefinition Width="5" />
                
    <ColumnDefinition Width="100" />
            
    </Grid.ColumnDefinitions>
            
            
    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/>
            
    <Rectangle Grid.Row="0" Grid.Column="2" Fill="Green" />
            
    <Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue" />
            
    <Rectangle  Grid.Row="2" Grid.Column="2" Fill="Yellow" />
            
            
    <!--
            ShowsPreview - 拖动 GridSplitter 时,是要即时显示拖动结果(false 默认值),还是要先预览GridSplitter被拖动的位置(true)
            
    -->
            
    <basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            
    <basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            
        
    </Grid>
    </UserControl>


    5、HyperlinkButton.xaml
    <UserControl x:Class="Silverlight20.Control.HyperlinkButton"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">

            
    <!--
            NavigateUri - 超级链接的目标地址
            TargetName - 目标名
            
    -->
            
    <HyperlinkButton Content="http://webabcd.cnblogs.com" NavigateUri="http://webabcd.cnblogs.com/" HorizontalContentAlignment="Center" TargetName="_blank" Background="Black" Foreground="White" Margin="5" Width="200" />

            
    <!--
            HyperlinkButton.Content - 超级链接所显示的内容
            
    -->
            
    <HyperlinkButton NavigateUri="http://webabcd.cnblogs.com/" TargetName="_blank" Margin="5" Width="200">
                
    <HyperlinkButton.Content>
                    
    <Image Source="/Silverlight20;component/Images/Logo.jpg" />
                
    </HyperlinkButton.Content>
            
    </HyperlinkButton>

        
    </StackPanel>
    </UserControl>


    6、Image.xaml
    <UserControl x:Class="Silverlight20.Control.Image"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--
            Source - 程序目录下的图片文件地址
            
    -->
            
    <Image Source="/Logo.jpg" Margin="5" Width="100"  />
            
            
    <!--
            Source - 程序集内的图片文件地址 [/程序集名;component/图片路径]
            
    -->
            
    <Image Source="/Silverlight20;component/Images/Logo.jpg" Margin="5" Width="200" />

            
    <!--
            Source - 互联网的图片文件地址
            
    -->
            
    <Image Source="http://silverlight.net/Themes/silverlight/images/logo.jpg" Margin="5" Width="100" />

            
    <!--
            Source - 后台方式设置Image的Source
            
    -->
            
    <Image x:Name="img" Margin="5" Width="100" />
            
    <Image x:Name="img2" Margin="5" Width="100" />

        
    </StackPanel>
    </UserControl>

    Image.xaml.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    using System.Windows.Media.Imaging;
    using System.Windows.Resources;

    namespace Silverlight20.Control
    {
        
    public partial class Image : UserControl
        
    {
            
    public Image()
            
    {
                InitializeComponent();

                
    // 后台方式设置Image的Source
                img.Source = new BitmapImage(new Uri("/Silverlight20;component/Images/Logo.jpg", UriKind.Relative));

                StreamResourceInfo sri 
    = Application.GetResourceStream(
                    
    new Uri("/Silverlight20;component/Images/Logo.jpg", UriKind.Relative));
                BitmapImage imageSource 
    = new BitmapImage();
                imageSource.SetSource(sri.Stream);
                img2.Source 
    = imageSource;
            }

        }

    }

    作者:wpf之家
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Spring security 浅谈用户验证机制
    Spring Boot Oauth2
    解决端口被占用问题
    Intellij idea run dashboard面板
    深入了解Vue组件 — Prop(上)
    深入了解Vue组件 — 组件注册
    使用命令行工具创建Vue项目
    Vue.js — 组件基础
    Vue.js — 表单输入绑定
    Vue.js — 事件处理
  • 原文地址:https://www.cnblogs.com/wpf123/p/2052944.html
Copyright © 2011-2022 走看看