WP7: изменить фон рамки с конвертером

Question

Я схожу с ума от конвертеров. Я знаю, что должен использовать его, чтобы изменить "выходное значение" моих значений, когда это необходимо, но я не знаю, как правильно использовать для моего случая.

У меня есть простой MVVM (только 3 поля) и главное окно со списком моих товаров. Первый элемент рассчитывается в зависимости от функции и может отображать ДА или НЕТ, остальные значения связываются напрямую.

Это работает хорошо, но мне нужно изменить цвет фона и переднего плана в зависимости от значения ДА или НЕ, которое у меня есть в первом вычисляемом поле. Например:

YES (must be blue) - ITEM 1
NO (must be grey)  - ITEM 2
YES (must be blue) - ITEM 3

В то время как внутренние значения в моей базе данных (в этом случае calc является модулем):

2 - ITEM 1
3 - ITEM 2
4 - ITEM 3

Мой код ListBox:

<phone:PhoneApplicationPage 
x:Class="Pasti.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="My App" Style="{StaticResource PhoneTextNormalStyle}" />
        <TextBlock Text="My List" Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

<ListBox x:Name="lstPills" Grid.Row="1" ItemsSource="{Binding AllItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" Width="440">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="90" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border Background="HERE MUST GO THE CONVERTER, I SUPOSE">
                    <TextBlock Text="{Binding IsPair, Mode=TwoWay}"/>
                </Border>
                <TextBlock
                    Text="{Binding Name}"
                    FontSize="{StaticResource PhoneFontSizeLarge}"
                    Grid.Column="1"
                    VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PhoneApplicationPage>

И код CS это для этой страницы:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Set the page DataContext property to the ViewModel.
        this.DataContext = App.ViewModel;
    }
}

Для вычисляемого поля я добавил это в модель (_myNumber содержит значение, которое я должен проверить):

    // Define a custom field based on some database values
    // Get is calculated, while set will force it to refresh by Notifying
    public string IsPair
    {
        get
        {
            return _myNumber % 2 == 0 ? "YES" : "NO";
        }
        set
        {
            NotifyPropertyChanged("IsPair");
        }
    }

ПРИМЕЧАНИЕ. Поскольку я не знаю другого способа принудительного обновления списка, я установил свойство set только для уведомления и режим TwoWay, и я просто выполняю команду IsPair = "" когда я хочу пересчитать. Если есть другой способ сделать это, будем рады.

Итак, с этой информацией, как я могу сделать конвертер, который на основе моего значения IsPair, установить Background свойство границы до синего или серого? Я видел много примеров Конвертера, но все еще не понял, как именно это сделать.

Я полагаю, я должен поместить что-то вроде этого в MainPage.cs, под класс MainPage:

// Converter for the YES-NO column on the list
public class IsPairConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (MY_CALCULATED_VALUE == "YES")
            return "Blue";

        return "Grey";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Но как получить MY_CALCULATED_VALUE и как установить конвертер в Background ценность Границы?

Answer 1

Так близко!

Сначала свяжите фон с IsPair и использовать конвертер:

<Border Background="{Binding IsPair, Converter={StaticResource IsPairConverter}}">
    <TextBlock Text="{Binding IsPair, Mode=TwoWay}"/>
</Border>

В вашем конвертере создайте кисть в зависимости от значения:

public class IsPairConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // You might want to add additional checks for type safety
        var calculatedValue = (string)value; 

        var color = calculatedValue == "YES" ? Colors.Blue : Colors.Gray;

        return new SolidColorBrush { Color = color };
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

И вы сделали.

---

Если вы хотите, чтобы значение вычислялось только один раз, а не каждый раз IsPair называется, вы можете сделать вычисление в сеттер MyNumber и назначить его IsPair:

private int myNumber;

public string IsPair { get; protected set; }

protected int MyNumber
{
    get
    {
        return this.myNumber;
    }

    set
    {
        this.myNumber = value;
        this.IsPair = value % 2 == 0 ? "YES" : "NO";
        this.NotifyPropertyChanged("IsPair");
    }
}