Click here to Skip to main content
15,887,683 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This is my first REAL app that I am doing completely on my own. I want to be able to use ONE button for ONE shape. Want to change the color on first click, then change it back on 2nd click. I am using Visual Studio 2010.

This is the XAML - The button of Focus is "BlueGreenBoxColorChangeBtn" the coincides with "BlueGreenBox". The box starts out blue, I want to click the button to change it to green, then click it again to change it back to blue. Is this possible?

HTML
<DockPanel>
        <Border Height="25"
                removed="SkyBlue"
                BorderBrush="Black"
                BorderThickness="1"
                DockPanel.Dock="top">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
              
                <Button x:Name="redBtn"
                    Width="100"
                    Grid.Column="0"
                    Content="RED"
                    Foreground="red"
                    Click="BoxClickHandler"/>

                    <Button x:Name="blueBtn"
                            Grid.Column="1"
                            Width="100"
                            Content="Blue"
                            Foreground="blue"
                            Click="BoxClickHandler"/>
   </Grid>
        </Border>       
        <Border Height="75"
                removed="SkyBlue"
                BorderBrush="Black"
                BorderThickness="1"
                DockPanel.Dock="top">
            <Rectangle x:Name="blueRedBox"
                           Margin="10,10,10,10"
                           Stroke="Red"
                           Width="60"
                           Height="60">
                <Rectangle.Fill>
                    <SolidColorBrush Color="Blue" />
                </Rectangle.Fill>
            </Rectangle>
        </Border> 
        <Border Height="25"
                removed="LemonChiffon"
                BorderBrush="Black"
                BorderThickness="1"
                DockPanel.Dock="Bottom">
            
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="115" />
                    <ColumnDefinition Width="150" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>              
                <Button x:Name="BlueGreenBoxColorChangeBtn"
                    HorizontalAlignment="Left"
                    Content="Change Color of Box"
                    Click="BlueGreenBoxColorChangeBtn_OnClick"/>

                <Button x:Name="CircleColorChange"
                    Grid.Column="1"
                    Content="Circle Color Change"
                    Click="BoxClickHandler" />

                <Button x:Name="ResetBtn"
                    Grid.Column="2"
                    Content="Reset"
                    Click="BoxClickHandler" />
            </Grid>
        </Border>     
        <Border removed="White"
                BorderBrush="Black"
                BorderThickness="1">
        </Border>
        <Canvas>
        <Rectangle x:Name="BlueGreenBox"
                   Width="145"
                   Height="126"
                   Canvas.Left="100"
                   Canvas.Top="25">
            <Rectangle.Fill>
                <SolidColorBrush Color="blue" />
            </Rectangle.Fill>
            <Rectangle.Stroke>
                <SolidColorBrush Color="Blue" />
            </Rectangle.Stroke>
        </Rectangle>
        <Ellipse x:Name="Circle" 
                 StrokeThickness="3"
                 Width="121"
                 Height="100"
                 Panel.ZIndex="1"
                 Canvas.Left="195"
                 Canvas.Top="30">
            <Ellipse.Fill>
                <SolidColorBrush Color="Green" />
            </Ellipse.Fill>
            <Ellipse.Stroke>
                <SolidColorBrush Color="Blue"/>
            </Ellipse.Stroke>
        </Ellipse>
        </Canvas>
    </DockPanel>
</Window>



This is the code behind. Am I on the right track? How can I make this work IF I can even make this work?

C#
using System.Windows;
using System.Windows.Media;

namespace DockPanels
{

    public partial class MainWindow : Window
    {
        SolidColorBrush greenBrush = new SolidColorBrush(Colors.Green);
        SolidColorBrush redBrush = new SolidColorBrush(Colors.Red);
        SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);
 
      
        public MainWindow()
        {
            InitializeComponent();
        }

        private void BoxClickHandler(object sender, RoutedEventArgs e)
        {
            FrameworkElement feSource = e.Source as FrameworkElement;
            switch (feSource.Name)
            {

                case "blueBtn":
                    blueRedBox.Fill = blueBrush;
                    blueRedBox.Stroke = blueBrush;                   
                    break;

                case "redBtn":
                    blueRedBox.Fill = redBrush;
                    blueRedBox.Stroke = redBrush;
                    break;

                //case "BlueGreenBoxColorChangeBtn":
                //    BlueGreenBoxColorChangeBtn.Click += new RoutedEventHandler(BlueGreenBoxColorChangeBtn1);
                //    BlueGreenBoxColorChangeBtn.Click += new RoutedEventHandler(BlueGreenBoxColorChangeBtn2);
                //    break;

                case "CircleColorChange":
                    Circle.Fill = blueBrush;
                    Circle.Stroke = blueBrush;
                    break;

                case "ResetBtn":
                    Circle.Fill = greenBrush;
                    Circle.Stroke = blueBrush;
                    break;

            }
            e.Handled = true;
        }

        private void BlueGreenBoxColorChangeBtn_OnClick(object sender, RoutedEventArgs e)
        {
            BlueGreenBoxColorChangeBtn1();
            BlueGreenBoxColorChangeBtn2();

        }

        private void BlueGreenBoxColorChangeBtn1()
        {
            BlueGreenBox.Fill = greenBrush;
            BlueGreenBox.Stroke = greenBrush;
        }

        private void BlueGreenBoxColorChangeBtn2()
        {
            BlueGreenBox.Fill = blueBrush;
            BlueGreenBox.Stroke = blueBrush;
        }

        //public static readonly RoutedEvent BlueGreenBoxColorChangeBtn_OnClick = EventManager.RegisterRoutedEvent("BlueGreenBox", RoutingStrategy.Direct, typeof(DependencyPropertyChangedEventHandler), typeof(SolidColorBrush));

        //public event RoutedEventHandler BlueGreenBox
        //{
        //    add { AddHandler(BlueGreenBox, value); }
        //    remove { RemoveHandler(BlueGreenBox, value); }
        //}
    }
}
Posted
Comments
TRK3 14-Feb-12 14:42pm    
Did you compile and run it? One of the best ways to learn is to compile your code and then run it. Use the debugger and set a break point on the code you care about and then step through and see what happens.

I'm not familiar with changing button color in WPF, but assuming that you can do that by changing .Fill and .Stroke, you have problem with your BlueGreenBoxColorChangeBtn_OnClick event handler.

Each time it's clicked it is calling both the Btn1 and Btn2 functions, so that when it's done, it's always blue. (And I'm pretty sure the button doesn't actually get repainted until after you return from your event handler.)

What you want to do is set a member variable to remember what color the button is, and then call only one of the two functions. If the button is currently blue, then call the function that changes it to green (and change your member variable to green), etc.

Yes, you can. See this part of your Switch:


case "redBtn":
if (blueRedBox.Fill == redBrush)
{
blueRedBox.Fill = blueBrush;
blueRedBox.Stroke = blueBrush;
}
else
{
blueRedBox.Fill = redBrush;
blueRedBox.Stroke = redBrush;
}
break;

Now you first button does what you want.
 
Share this answer
 
v2
Thank you your solution fixed my problem and helped solve some others. :)
 
Share this answer
 
Comments
Nestor Arturo 15-Feb-12 8:24am    
Good to know :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900