CODEWITHSUNDEEP
c#wpf
bairog
bairog

Reputation: 3373

Change circle "start-stop" button background image on click in WPF

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.

Upvotes: 3

Views: 3652

Answers (2)

Sebastian
Sebastian

Reputation: 8005

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.

Upvotes: 0

J R B
J R B

Reputation: 2136

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

Upvotes: 1

Related Questions