如何使用 WPF 构建自定义格式的标签

• 下载源代码 - 19.42 KB

引言

在 Windows Forms 中使用 GDI+ 的 OwnerDraw 创建自定义控件非常困难。WPF 提供了一种新的方式，只需几行代码即可构建丰富的客户端应用程序。这里有一个示例，展示了创建提供标签和仪表功能的自定义控件。

背景

首先，让我们了解一下我们想要实现什么？我们希望我们的 gradientbrush 能够根据传递给项目的相对值来改变其终点。在 GDI+ 世界中，我们需要执行一打计算并绘制具有自定义效果的矩形才能提供这样的视图。在 WPF 中，我们只需要一个画笔和一个转换器即可。让我们看看。

Using the Code

为了可视化数据，我们必须编写一个自定义 DataTemplate。

<DataTemplate x:Key="template"> 
      <TextBlock Text="{Binding}" > 
        <TextBlock.Background> 
          <LinearGradientBrush EndPoint="{Binding Converter={StaticResource converter},
                 ConverterParameter=1000}" StartPoint="0,0.5"> 
            <GradientStop Color="#FF7CA0CF" Offset="0"/> 
            <GradientStop Color="#FF7CA0CF" Offset="0.8"/> 
            <GradientStop Color="#FFFFFFFF" Offset="1"/> 
          </LinearGradientBrush> 
        </TextBlock.Background> 
      </TextBlock> 
 </DataTemplate>

现在，我们需要创建一个转换器，将源值转换为屏幕坐标，这些坐标将在画笔中使用以显示相对值。

class DataConverter:IValueConverter 
{ 
public object Convert(object value, Type targetType, 
    object parameter, System.Globalization.CultureInfo culture) 
{ 
int val = (int)value; 
int max = int.Parse(parameter.ToString()); 
return new Point(val == 0 ? 0 : ((double)val / (double)max), 0.5); 
}

最后一步是，我们获取每个控件并“告诉”WPF 布局引擎根据其祖先的大小拉伸它。

<TextBlock Text="{Binding}" 
Margin="5,5,5,5" TextAlignment="Right" Padding="0,0,20,0" 
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, 
Path=ActualWidth}"> 

我们实际上做了什么？只是将 DataTemplate 中每个 TextBlock 控件的 Width 值绑定到其祖先（在本例中为 ListBox）的大小，以使其填充可用空间。

历史

• 2007 年 11 月 1 日：初始发布