“自定義”按鈕中的WPF綁定邊框顏色

Question

我有一個應用程序，其中在WrapPanel中動態生成了許多自定義按鈕。 一切正常，我可以在代碼中生成按鈕時指定邊框的粗細，ImageSource，Content等。 現在，客戶要求允許他們為單個按鈕選擇邊框顏色，然后嘗試嘗試，因為我可能找不到正確的綁定方案。 我這里的WPF學習曲線很陡，所以我的最初設計可能有點困難。

在我的Generic.XAML中，我指定了以下按鈕：

<Style TargetType="{x:Type local:LauncherButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:LauncherButton}">
                        <Border Name="LauncherButtonBorder" BorderThickness="{TemplateBinding BThickness}"
                                CornerRadius="10" Background="White" >

                            <Border.Style>
                                <Style TargetType="{x:Type Border}">
                                    <Setter Property="BorderBrush" Value="SteelBlue" />

                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" Value="PaleGoldenrod" />
                                        </Trigger>
                                    </Style.Triggers>

                                </Style>
                            </Border.Style>
                            <DockPanel LastChildFill="True" Background="White" Margin="3">
                                <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"
                                           Foreground="{DynamicResource TaskButtonTextBrush}" FontWeight="Bold"
                                           Margin="5,0,0,0" VerticalAlignment="Center" FontSize="10"
                                           Background="Transparent" DockPanel.Dock="Bottom" TextWrapping="Wrap" />
                                <Image Source="{TemplateBinding ImageSource}" Stretch="Uniform" />
                            </DockPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我想在C＃中動態更改當前設置為靜態SteelBlue和PaleGoldenrod的邊框顏色。

因此定義了按鈕類：

public class LauncherButton : ButtonBase
    {
        static LauncherButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(LauncherButton), new FrameworkPropertyMetadata(typeof(LauncherButton)));
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }

        }

        public Thickness BThickness
        {
            get { return (Thickness) GetValue(BThicknessProperty); }
            set { SetValue(BThicknessProperty,value);}
        }



                public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(LauncherButton), new UIPropertyMetadata(null));

        public static readonly DependencyProperty BThicknessProperty =
             DependencyProperty.Register("BThickness", typeof(Thickness), typeof(LauncherButton), new UIPropertyMetadata(null));


    }

我將某些屬性綁定到以下類的實例：

public class CustomButton:INotifyPropertyChanged
{
    private string _type;
    private string _buttonId;
    private string _name;
    private string _image;
    private string _link;
    private string _parent;
    private List<CustomButton> _children;
    private bool _isExpanded;
    private bool _isSelected;


    public string ButtonId
    {
        get { return _buttonId; }
        set
        {
            if (value == _buttonId) return;
            _buttonId = value;
            OnPropertyChanged("ButtonId");
        }
    }

    public string Type
    {
        get { return _type; }
        set
        {
            if (value == _type) return;
            _type = value;
            OnPropertyChanged("Type");
        }
    }

    public string Name
    {
        get { return _name; }
        set
        {
            if (value == _name) return;
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    public string Image
    {
        get { return _image; }
        set
        {
            if (value == _image) return;
            _image = value;
            OnPropertyChanged("Image");
        }
    }

    public string Link
    {
        get { return _link; }
        set
        {
            if (value == _link) return;
            _link = value;
            OnPropertyChanged("Link");
        }
    }

    public string Parent
    {
        get { return _parent; }
        set
        {
            if (value == _parent) return;
            _parent = value;
            OnPropertyChanged("Parent");
        }
    }

    public List<CustomButton> Children
    {
        get { return _children; }
        set
        {
            if (Equals(value, _children)) return;
            _children = value;
            OnPropertyChanged("Children");
        }
    }

    public bool IsExpanded
    {
        get { return _isExpanded; }
        set
        {
            if (value.Equals(_isExpanded)) return;
            _isExpanded = value;
            OnPropertyChanged("IsExpanded");
        }
    }

    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            if (value.Equals(_isSelected)) return;
            _isSelected = value;
            OnPropertyChanged("IsSelected");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Answer 1

您是否要使用於Border.BorderBrush的兩個畫筆動態化？

如果是這樣，您可以通過幾種方式解決。

• 向LauncherButton添加兩個依賴項屬性，例如NormalBorderBrush和MouseOverBorderBrush ，然后在使用Button時根據需要進行設置。 現在要使用Border ，在設置SteelBlue或PaleGoldenRod的Style內，應用AncestorType作為local:LauncherButton的RelativeSource FindAncestor綁定，並將其指向相應的Brush（ NormalBorderBrush或MouseOverBorderBrush ）

例：

public class LauncherButton : ButtonBase {
  ...

  public static readonly DependencyProperty NormalBorderBrushProperty =
    DependencyProperty.Register("NormalBorderBrush", typeof(Brush), typeof(LauncherButton),
      new UIPropertyMetadata(Brushes.Blue));

  public static readonly DependencyProperty MouseOverBorderBrushProperty =
    DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(LauncherButton),
      new UIPropertyMetadata(Brushes.Red));

  public Brush NormalBorderBrush
  {
    get { return (Brush)GetValue(NormalBorderBrushProperty); }
    set { SetValue(NormalBorderBrushProperty, value); }
  }

  public Brush MouseOverBorderBrush
  {
    get { return (Brush)GetValue(MouseOverBorderBrushProperty); }
    set { SetValue(MouseOverBorderBrushProperty, value); }
  }
}

在xaml中：

<Border.Style>
  <Style TargetType="{x:Type Border}">
    <Setter Property="BorderBrush"
            Value="{Binding RelativeSource={RelativeSource FindAncestor,
                                                            AncestorType={x:Type local:LauncherButton}},
                            Path=NormalBorderBrush}" />
    <Style.Triggers>
      <Trigger Property="IsMouseOver"
                Value="True">
        <Setter Property="BorderBrush"
                Value="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                AncestorType={x:Type local:LauncherButton}},
                                Path=MouseOverBorderBrush}" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Border.Style>

和用法：

<local:LauncherButton BThickness="5"
                      Content="Hellooooo"
                      MouseOverBorderBrush="Green"
                      NormalBorderBrush="Aqua" />

樣本下載 -不包含用於畫筆的轉換器，應該很容易實現。

• 或您可以將兩個畫筆定義為動態資源，並在需要時從代碼中覆蓋它們的顏色。
• 或可以使用Button的BorderBrush屬性，並使用TemplateBinding BorderBrush將其應用於Border。 現在，這意味着您需要在IsMouseOver狀態更改發生時相應地切換BorderBrush 。
• 或者，您甚至可以檢索按鈕的Style並通過在其名稱上找到它然后在運行時對其進行調整來獲取對Border元素的引用。

我個人會選擇選項1。最后，使用轉換器或在Binding中同樣使它對MVVM友好。