如何实现将图像数据绑定显示为十进制数的WPF用户控件

Question

通常我可以找出哪些控件可以模板化以在WPF中实现某些功能，但我现在有一个要求，我不确定如何处理。

我想要做的是在datagrid中有一个数据绑定到十进制属性 TruckLoads 的列。我还有一张卡车的小图片。

如果值为1，我想显示1卡车图像。如果值为2.5，我想将图像显示2.5倍，而第3张图像只有卡车的一半。

我将如何实现这样的东西 - 它是一个新的用户控件 - 我可以设置现有控件的样式吗？

Answer 1

这个想法是制作一个具有动态宽度的控件。它的宽度是：

controlWidth = imageWidth * numberOfTrucks;

然后使用平铺卡车图像为此控件添加背景。卡车将显示所需的次数。

TruckDisplay.xaml：

<UserControl x:Class="WpfApplication1.TrucksDisplay"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="grid" Height="30" HorizontalAlignment="Left">
        <Grid.Background>
            <ImageBrush ImageSource="truck.gif" Stretch="None" TileMode="Tile" Viewport="0,0,40,30" ViewportUnits="Absolute" />
        </Grid.Background>
    </Grid>
</UserControl>

TruckDisplay.xaml.cs：

public partial class TrucksDisplay
{
    public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof (double), typeof (TrucksDisplay), new PropertyMetadata(DefaultValueChanged));

    private static void DefaultValueChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        var trucksDisplay = (TrucksDisplay) dependencyObject;
        trucksDisplay.grid.Width = 40*trucksDisplay.Value;
    }

    public double Value
    {
        get { return (double) GetValue(ValueProperty); }
        set { SetValue(ValueProperty, value); }
    }

    public TrucksDisplay()
    {
        InitializeComponent();
    }
}

用法（mainWindow.xaml）：

<StackPanel>
    <WpfApplication1:TrucksDisplay Value="2" />
    <WpfApplication1:TrucksDisplay Value="2.5" />
    <WpfApplication1:TrucksDisplay Value="3" />
    <WpfApplication1:TrucksDisplay Value="6" />
</StackPanel>

结果：

请注意我有一个宽度= 40且高度= 30的图像，所以我在几个地方硬编码了这些值。它也非常容易动态，也可以指定图像。

Answer 2

您需要编写一个Converter来实现IValueConverter，因此您将在方法Convert()中传递float，并将其转换为您的图像中的图像。

您的XAML将如下所示：

<Image Source="{Binding Path="TruckLoad",Converter={StaticResource TrucksImageConverter}}" />

您的Convert方法看起来像这样：

public object Convert(object value, Type targetType, object parameter, 
    System.Globalization.CultureInfo culture)   
{
     var trucks = (float)value;


     if (trucks == 1)
         return new BitmapImage("Resource File Path");
     else if (trucks == 2.5)
         return new BitmapImage("Resource File for 2.5 value");
     else if (trucks == 3)
         return new BitmapImage("Resource File for 3 trucks value");
     else
         return null;
}

Answer 3

我认为你的意思是十进制属性而不是十进制int属性。您可以使用发送数组或图像列表的ListBox。你如何制作最后一张图像，我将留给你。我想你可以裁剪画布。我使用这种方法来显示一些非常大的文本文件，我在CR LF上打破并发送一个List＆lt;字符串＆gt;到ListBox进行虚拟化，效果很好。对于用户来说，它看起来像一个文本文档，但是一个非常大的文档仍然很快。