3

Inspired by this question I'll complicate that issue.

My goal is a circle button (with background image like that enter image description here) whick performs like "start-stop" button:

1) first time clicking changes button image to "stop" image and starts some calculating function (Process, Task, etc.)

2) enother click changes button image to the original "start" image and stops that function.

Button code is like:

<Button  x:Name="btnStartStop" Width="72" Height="72" Content="" Margin="180,0,372,94" VerticalAlignment="Bottom" d:LayoutOverrides="VerticalAlignment">
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Ellipse>
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Images/Start.jpg"/>
                        </Ellipse.Fill>
                    </Ellipse>
                </Grid>
            </ControlTemplate>
        </Button.Template>
</Button>

Thank you.

P.S. @Sheridan asked to mention his name, maybe he can help me.

UPDATE My button looks EXACTLY like my background image - it is round with no border and clickable area matches image (it is round). Everything outside that round image is transparent and doesn't fire click event. That's why I have to use Ellipse.

Community
  • 1
  • 1
bairog
  • 3,143
  • 6
  • 36
  • 54

2 Answers2

1

You can use DataTrigger for change background image of button. below is the link may help.

WPF Change button background image when clicked

and below is solution for the same. working proper my end as per your need.

enter image description here

enter image description here

Community
  • 1
  • 1
J R B
  • 2,069
  • 4
  • 17
  • 32
  • Approach of setting it programmatically (without DataTriggers) from your [**first link**](http://stackoverflow.com/questions/5971300/programmatically-changing-button-icon-in-wpf/5973592#5973592) is most suitable for me. But I can't use `btnStartStop.Content = FindResource("Stop")` because as you can see I need to set image source for ImageBrush inside Ellipse inside Button. How can I do that? – bairog Feb 14 '14 at 07:16
  • Thx for help, but you didn't understand correctly how my button looks like (clickable area should be EXACT as the picture - a circle). I've updated my original post. – bairog Feb 14 '14 at 08:24
  • you can make round button using control template. may help below link --http://www.codeproject.com/Articles/32257/A-Style-for-Round-Glassy-WPF-Buttons – J R B Feb 17 '14 at 04:55
  • Thx. I've tested combination of that control template and code in your answer. It's working for me. – bairog Feb 27 '14 at 12:31
0

This actually sounds like a perfect use-case for a ToggleButton or maybe even a custom CheckBox.

You can provide your own control template that uses the two different images/graphics for the two different toggle states. Using VisualStateManager you can declare what to do during the transitions.

Sebastian
  • 7,729
  • 2
  • 37
  • 69