DataGrid绑定DataTable、ToolTip显示DataGrid、ToolTip延迟、LinearGradientBrush、TextBox水印、DrawingBrush网格背景、金属边框

Posted on 9 月 28, 2026 by

51-WPF DataGrid 绑定 DataTable

DataGrid 绑定 DataTable：两种绑定方式。ItemsSource 和DataContext 绑定的属性不一样。

界面：

<Window x:Class="WpfApplication4.DataGridBindDataTable"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="DataGridBindDataTable" Height="300" Width="300">
    <Grid>
        <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" Margin="5,5" Name="dataGrid1" VerticalAlignment="Stretch" ItemsSource="{Binding}" HorizontalGridLinesBrush="Gainsboro" VerticalGridLinesBrush="Gainsboro">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding ID}" ></DataGridTextColumn>
                <DataGridTextColumn Header="姓 名" Width ="100" Binding="{Binding Name}" ></DataGridTextColumn>
                <DataGridTextColumn Header="电 话" Width ="100" Binding="{Binding PhoneNumber}" ></DataGridTextColumn>
                <DataGridTextColumn Header="住 址" Width ="100" Binding="{Binding Address}" ></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>Code language: HTML, XML (xml)

代码：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// DataGridBindDataTable.xaml 的交互逻辑
    /// </summary>
    public partial class DataGridBindDataTable : Window
    {
        public DataGridBindDataTable()
        {
            InitializeComponent();

            DataTable dt = new System.Data.DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("PhoneNumber", typeof(string));
            dt.Columns.Add("Address", typeof(string));

            DataRow row = dt.NewRow();
            row["ID"] = 1;
            row["Name"] = "张三";
            row["PhoneNumber"] = "123456";
            row["Address"] = "北京";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["ID"] = 2;
            row["Name"] = "李四";
            row["PhoneNumber"] = "789001";
            row["Address"] = "上海";
            dt.Rows.Add(row);

            //下面两种写法 可以绑定
            //dataGrid1.DataContext = dt;
            dataGrid1.ItemsSource = dt.DefaultView;

            //设置网格线
            dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.All;
        }
    }
}Code language: HTML, XML (xml)

52-ToolTip直接显示DataGrid

我们的tooltip除了可以显示普通的文本内容 还可以显示一个表格 绑定其他的数据源。

<Window x:Class="WpfApplication4.DefaultToolTipTemplate"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="DefaultToolTipTemplate" Height="300" Width="300">
    <Window.Resources>
        <ControlTemplate x:Key="DefaultToolTipTemplate" TargetType="ToolTip">
            <Border Background="White" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="4" CornerRadius="5,5,5,5">
                <DataGrid ItemsSource="{TemplateBinding ContentControl.Content}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="ID" Binding="{Binding ID}" ></DataGridTextColumn>
                        <DataGridTextColumn Header="姓 名" Width ="100" Binding="{Binding Name}" ></DataGridTextColumn>
                        <DataGridTextColumn Header="电 话" Width ="100" Binding="{Binding PhoneNumber}" ></DataGridTextColumn>
                        <DataGridTextColumn Header="住 址" Width ="100" Binding="{Binding Address}" ></DataGridTextColumn>
                    </DataGrid.Columns>
                </DataGrid>
            </Border>
        </ControlTemplate>

        <Style TargetType="{x:Type ToolTip}">
            <Setter Property="Foreground" Value="#000"/>
            <Setter Property="Template" Value="{StaticResource ResourceKey=DefaultToolTipTemplate}"/>
            <Setter Property = "HorizontalOffset" Value="10"/>
            <Setter Property = "VerticalOffset" Value="10"/>
            <Setter Property = "Background" Value="White"/>
            <Setter Property = "FontSize" Value="16"/>
            <Setter Property="BorderBrush" Value="#666"/>
            <Setter Property="Margin" Value="15"/>
        </Style>
    </Window.Resources>

    <Grid>
        <TextBlock Text="北盟网校" Width="100" Height="50" Background="Red">
            <TextBlock.ToolTip>
                <ToolTip x:Name="tooltip" VerticalOffset="4"/>
            </TextBlock.ToolTip>
        </TextBlock>
    </Grid>
</Window>Code language: HTML, XML (xml)
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// DefaultToolTipTemplate.xaml 的交互逻辑
    /// </summary>
    public partial class DefaultToolTipTemplate : Window
    {
        public DefaultToolTipTemplate()
        {
            InitializeComponent();

            DataTable dt = new System.Data.DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("PhoneNumber", typeof(string));
            dt.Columns.Add("Address", typeof(string));

            DataRow row = dt.NewRow();
            row["ID"] = 1;
            row["Name"] = "张三";
            row["PhoneNumber"] = "123456";
            row["Address"] = "北京";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["ID"] = 2;
            row["Name"] = "李四";
            row["PhoneNumber"] = "789001";
            row["Address"] = "上海";
            dt.Rows.Add(row);

            this.tooltip.Content = dt.DefaultView;
        }
    }
}Code language: HTML, XML (xml)

53-Tooltip延迟和设置显示时间

<ControlTemplate x:Key="DefaultToolTipTemplate" TargetType="ToolTip">
    <Border Background="White" BorderBrush="#4682B4" BorderThickness="10" CornerRadius="5,5,5,5" ToolTipService.ShowDuration="12000" ToolTipService.InitialShowDelay="3000">
        <DataGrid ItemsSource="{TemplateBinding ContentControl.Content}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="详细情况" Binding="{Binding Product}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Border>
</ControlTemplate>

<Style TargetType="{x:Type ToolTip}">
    <Setter Property="Foreground" Value="#000"/>
    <Setter Property="Template" Value="{StaticResource ResourceKey=DefaultToolTipTemplate}"/>
    <Setter Property="BorderBrush" Value="#666"/>
    <Setter Property="Margin" Value="15"/>
    <Setter Property="ToolTipService.InitialShowDelay" Value="10000"/>
    <Setter Property="ToolTipService.ShowDuration" Value="20000"/>
</Style>Code language: HTML, XML (xml)

54-LinearGradientBrush渐变

<Window x:Class="WpfApplication4.LinearGradientBrushDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="LinearGradientBrushDemo" Height="300" Width="300">
    <Grid>
        <Rectangle Width="300" Height="200">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Green" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.75"/>
                    <GradientStop Color="Yellow" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>Code language: HTML, XML (xml)

55-TextBox实现PlaceHold效果

在WPF里面 TextBox没有PlaceHold的效果。只能自己来实现。

<TextBox Name="tbNumber" Width="500" Height="80" VerticalContentAlignment="Center" VerticalAlignment="Center" FontSize="50" KeyUp="TextBox_KeyDown" Foreground="Black" Tag="111">
    <TextBox.Resources>
        <VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="1" Stretch="None" AlignmentX="Left">
            <VisualBrush.Visual>
                <TextBox FontSize="50" Width="500" Height="80" Background="White" Foreground="Gray" Text="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox},AncestorLevel=1},Path=Tag}"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </TextBox.Resources>
    <TextBox.Style>
        <Style TargetType="TextBox">
            <Style.Triggers>
                <Trigger Property="Text" Value="{x:Null}">
                    <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
                </Trigger>
                <Trigger Property="Text" Value="">
                    <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>Code language: HTML, XML (xml)

这里用到了相对绑定

56-利用DrawingBrush来画出背景网格图

利用DrawingBrush来画出背景网格图

<Window x:Class="WpfApplication4.DrawingBrushDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="DrawingBrushDemo" Height="300" Width="300">

    <Window.Background>
        <DrawingBrush  
            Viewport="0,0,50,50" ViewportUnits="Absolute" TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="Black"/>
                            </GeometryDrawing.Brush>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,80,80"/>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Brush="White"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Background>
    <Grid>
    </Grid>
</Window>Code language: HTML, XML (xml)

57-金属边框

下面是一个金属的边框。可以套用在其他的内容控件上面。比如Grid

<Window x:Class="WpfApplication4.DrawingBrushDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="DrawingBrushDemo" Height="300" Width="300">

    <Window.Background>
        <DrawingBrush  
            Viewport="0,0,50,50" ViewportUnits="Absolute" TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing>
                            <GeometryDrawing.Brush>
                                <SolidColorBrush Color="Black"/>
                            </GeometryDrawing.Brush>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,80,80"/>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Brush="White"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Background>

    <Border Margin="50" BorderThickness="30" Grid.Row="1" Grid.Column="1" CornerRadius="5" >
        <Border.BorderBrush>
            <LinearGradientBrush SpreadMethod="Repeat" StartPoint="0, 2" EndPoint="1, 0" MappingMode="RelativeToBoundingBox">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="#8D8D8D" Offset="0"/>
                    <GradientStop Color="#B7B7B7" Offset="0.5"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Border.BorderBrush>
        <Grid>
        </Grid>
    </Border>
</Window>Code language: HTML, XML (xml)
Posted in WPF进阶

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注