Как реализовать пользовательский элемент управления WPF, который отображает изображения с привязкой к десятичному числу

Question

Обычно я могу определить, какой элемент управления я могу шаблонизировать, чтобы добиться чего-то в WPF, но теперь у меня есть требование, к которому я не совсем уверен, как подойти.

То, что я хотел бы сделать, это иметь столбецв таблице данных, привязанной к десятичному свойству TruckLoads .У меня также есть небольшое изображение грузовика.

Если значение равно 1, я хотел бы отобразить 1 изображение грузовика.Если значение равно 2,5, я хотел бы отобразить изображение 2,5 раза, когда третье изображение будет только наполовину грузовиком.

Как бы я реализовал что-то подобное - это новый пользовательский элемент управления - могу ли ястиль существующего элемента управления?

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 CR и отправляю List на ListBox для виртуализации, и он прекрасно работает.Для пользователя это выглядит как один текстовый документ, но очень большой документ все еще быстр.