WPF 做一個指示燈

XAML:

 <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"  Orientation="Horizontal">

    <Ellipse Width="40" Height="40"  VerticalAlignment="Center">
        <Ellipse.Style>
            <Style TargetType="Ellipse">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding PresentColor}" Value="True">
                        <Setter Property="Shape.Fill" Value="Red"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding PresentColor}" Value="False">
                        <Setter Property="Shape.Fill" Value="Gray"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <local:HButton Content="更改顏色" Height="30" Width="80" Margin="10 0 0 0" x:Name="clk" Command="{Binding ChangeColorCommand}"/>

</StackPanel>

注意：不要再在<Ellipse/> 里面設定 Fill 屬性，因為這樣會把樣式中的 Fill 屬性覆蓋掉。

ViewModel:

private bool _presentColor = false;
public bool PresentColor
{
    get { return _presentColor; }
    set { _presentColor = value; RaisePropertyChanged(nameof(PresentColor)); }
}

private RelayCommand _changeCommand = null;
public RelayCommand ChangeColorCommand
{
    get
    {
        if (_changeCommand == null)
        {
            _changeCommand = new RelayCommand(ChangeColor);
        }
        return _changeCommand;
    }
    set
    {
        _changeCommand = value;
    }
}

private void ChangeColor()
{
    PresentColor = !PresentColor;
}

點擊按鈕，圓型顏色在灰色和紅色切換：

如何讓按鈕顏色一起更改呢？

XAML 中按鈕背景顏色綁定 ViewModel 中的一個顏色值。

XAML 中更改：

<local:HButton Content="更改顏色" Background="{Binding ColorForBtn}" Height="30" Width="80" Margin="10 0 0 0" x:Name="clk" Command="{Binding ChangeColorCommand}"/>

ViewModel 中增加/更改：

private SolidColorBrush _colorForBtn = new SolidColorBrush(Colors.Gray);
public SolidColorBrush ColorForBtn
{
    get { return _colorForBtn; }
    set { _colorForBtn = value; RaisePropertyChanged(nameof(ColorForBtn)); }
}

private void ChangeColor()
{
    PresentColor = !PresentColor;

    if (PresentColor)
    {
        ColorForBtn = new SolidColorBrush(Colors.Red);
    }
    else
    {
        ColorForBtn = new SolidColorBrush(Colors.Gray);
    }
}

其實，也可以用 DataTrigger 觸發器做，像上面的 Ellipse 一樣，綁定到 PresentColor 這個屬性上去。這樣轉換的邏輯在界面完成，不用單獨多寫后台代碼邏輯。