如何在 WPF 中有条件地更改按钮前景色？

Question

I have a button inside ItemsControl (pagination kind control) I have a property named current_page in my view model.

I want to compare current_page value to Content of Button that is (1 / 2 / 3) and want to change the foreground color of a button.

Please have a look at the code.

My ViewModel

public PaginationModel pagination
{
  get { return _pagination; }
  set { _pagination = value; OnPropertyChanged("pagination"); }
}

My Pagination Model

public class PaginationModel: INotifyPropertyChanged {
  private int _total_items;
  public int total_items {
    get {
      return _total_items;
    }
    set {
      _total_items = value;
      OnPropertyChanged("total_items");
    }
  }

  private int _items_per_page;
  public int items_per_page {
    get {
      return _items_per_page;
    }
    set {
      _items_per_page = value;
      OnPropertyChanged("items_per_page");
    }
  }

  private int _current_page;
  public int current_page {
    get {
      return _current_page;
    }
    set {
      if (value <= total_pages + 1 && value > 0) {
        _current_page = value;
        OnPropertyChanged("current_page");
      }
    }
  }

  private int _total_pages;
  public int total_pages {
    get {
      return _total_pages;
    }
    set {
      _total_pages = value;
      OnPropertyChanged("total_pages");
    }
  }

  private ObservableCollection < string > _PageList;

  public ObservableCollection < string > PageList {
    get {
      _PageList = new ObservableCollection < string > ();
      for (int i = 0; i < total_pages; i++) {
        _PageList.Add((i + 1).ToString());
      }
      return _PageList;
    }
    set {
      _PageList = value;
      OnPropertyChanged("PageList");
    }
  }
}

My Layout

<ItemsControl ItemsSource="{Binding pagination.PageList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="0">
                <Button Content="{Binding}"  CommandParameter="{Binding RelativeSource={RelativeSource Self}}"
                                             Command="{Binding DataContext.ChangePage, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                             Width="20"
                                             Margin="10,0"></Button>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Button Style Template

<Style TargetType="{x:Type Button}" >
    <Setter Property="Foreground" Value="{StaticResource WordOrangeBrush}"  />
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="BorderThickness" Value="0"></Setter>
    <Setter Property="FontFamily" Value="{StaticResource HelveticaNeue}"></Setter>
    <Setter Property="FontSize" Value="14"></Setter>
    <Setter Property="Foreground" Value="#ff9f00"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Foreground" Value="#ff9f00" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Foreground" Value="White" />
        </Trigger>
        <!--I want to bind current page value in place of 1-->
        <DataTrigger Binding="{Binding}" Value="1">
            <Setter Property="Foreground" Value="Red"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 1

A Value Converter Solution

You cannot bind the Value of a DataTrigger to a property, because it is not a dependency property. You can work around this by creating a custom multi-value converter that checks pages for equality.

public class PageEqualityToBooleanConverter : IMultiValueConverter
{
   public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
   {
      return (int)values[0] == System.Convert.ToInt32(values[1]);
   }

   public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
   {
      throw new InvalidOperationException();
   }
}

The first value passed to the converter is the current page as int and the second value is the page on the Button as string . It is a bit odd that your current_page is of type int , but the PageList is a collection of type string , that is why we need to convert the second value.

Create an instance of the converter in your resources before your style, so you can reference it.

<local:PageEqualityToBooleanConverter x:Key="PageEqualityToBooleanConverter"/>

Finally, replace your DataTrigger with the one below. We are using a MultiBinding to be able to bind more than one value. The converter will convert both values to True , if the page values match, otherwise False .

<DataTrigger Value="True">
   <DataTrigger.Binding>
      <MultiBinding Converter="{StaticResource PageEqualityToBooleanConverter}">
         <Binding Path="DataContext.pagination.current_page" RelativeSource="{RelativeSource AncestorType={x:Type ItemsControl}}"/>
         <Binding/>
      </MultiBinding>
   </DataTrigger.Binding>
   <Setter Property="Foreground" Value="Red"/>
</DataTrigger>

The first binding will find the parent ItemsControl to access the view model that contains the current_page . The second binding will bind to the data context of the associated button, which is the page string. If you change the PageList item type to int this will still work.

Recommendations

I want to point out some observations on your code that might help you to improve it.

• As I already mentioned, it seems odd that your collection item type differs from your current item property type. Consider making it int or creating a separate page item view model if you plan on having other properties than the page number in it.
• You are defining an implicit style for Button , which gets applied to all Button controls in scope. If you use it in your pagination control only this might be ok, but if you intend to use it in other places, the DataTrigger should not be included in it, as it is specific to this data context only. Create separate style based on this one. Consider @BionicCode's comment about this.
• As @Andy pointed out in the comments, a ListBox could be a better fit for a paginator, because it has the notion of a SelectedItem (and IsSelected properties on its item containers that can be bound in a DataTrigger ), which is what you are trying to do here manually.

Answer 2

The Value property of a DataTrigger cannot be data-bound.

What you should do is to create a type that represents a Page , add a Number and IsCurrentPage property to it and change the type of PageList to be an ObservableCollection<Page> instead of an ObservableCollection<string> .

You could then simply look up the corresponding Page in the PageList and set its IsCurrentPage property from the view model whenever the current_page property is set.

You should also make sure that the getter of the PageList property doesn't create a new collection each time it's invoked.