WPF: Individual Style for elements

C#

public class MyButton : Button
{
    public Color MyColor { get; set; }
}

WPF:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication3">
    <Window.Resources>
        <Style TargetType="my:MyButton">
            <Setter Property="Background" Value="SkyBlue"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <CheckBox Content="Individual Mode" x:Name="开发者_如何转开发ModeCheckBox" Grid.Row="0" />
        <my:MyButton Content="B1" x:Name="myB1" Grid.Row="1" MyColor="Aqua"/>
        <my:MyButton Content="B2" x:Name="myB2" Grid.Row="2"/>
        <my:MyButton Content="B3" x:Name="myB3" Grid.Row="3" MyColor="Green"/>
    </Grid>
</Window>

Now. I want all my buttons be blue (this is normal mode), and specific individual "MyColor" for each button (this is individual mode).

Is it possible?

Once I try to set a style element (the Background in my case) by code, I broke the style logic and it does not switch back anymore.

You need to define a default style for the MyButton control; which will be stored in the Themes/Generic.xaml file.

    <Style TargetType="{x:Type local:MyButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="MyColor" Value="Blue"/>
    </Style>

That button now by default will have the MyColor property set to Blue unless explicitly specified otherwise on each control instance.

    <Grid>
        <local:MyButton Height="30" VerticalAlignment="Top">MyButtonDefault</local:MyButton>
        <local:MyButton Height="30" VerticalAlignment="Bottom" MyColor="Red">MyButtonRed</local:MyButton>
    </Grid>

Below is the MyButton source where I am changing the Background property for this example based on the MyColor property.

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

        public Color MyColor
        {
            get { return (Color)GetValue(MyColorProperty); }
            set { SetValue(MyColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyColorProperty =
            DependencyProperty.Register("MyColor", typeof(Color), typeof(MyButton), new PropertyMetadata(new PropertyChangedCallback(Change)));

         private static void Change(DependencyObject target, DependencyPropertyChangedEventArgs e)
        {
            MyButton element = target as MyButton;
            element.Background = new SolidColorBrush((Color)e.NewValue);
        }
    }

UPDATE:

To reset the color back to the default value simply call ClearValue(DependencyProperty) on the MyButton instance.

    private void MyButton_Click(object sender, RoutedEventArgs e)
    {
        MyButton myButton = sender as MyButton;
        myButton.ClearValue(MyButton.MyColorProperty);
    }

How about this:

<Window x:Class="WpfApplication3.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication3"
Title="Window2" Height="300" Width="300">
<Window.Resources>

    <Style TargetType="my:MyButton">
        <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=ModeCheckBox, Path=IsChecked}" Value="true">
                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=ModeCheckBox, Path=IsChecked}" Value="false">
                <Setter Property="Background" Value="SkyBlue" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <CheckBox Content="Individual Mode" x:Name="ModeCheckBox" Grid.Row="0" />
    <my:MyButton Content="B1" x:Name="myB1" Grid.Row="1" MyColor="Red"/>
    <my:MyButton Content="B2" x:Name="myB2" Grid.Row="2"/>
    <my:MyButton Content="B3" x:Name="myB3" Grid.Row="3" MyColor="Green"/>

</Grid>

</Window>

I also changed the MyButton class:

public class MyButton : Button
{
    public Brush MyColor { get; set; }
}