ToggleButtons in WPF

Question

I have two ToggleButtons. I want only one of them to be in the Pressed state at any time. So let's say Model ToggleButton is pressed:

I want to achieve the below concepts:

If I press Drawing ToggleButton, the Model ToggleButton will be unpressed and Drawing ToggleButton will go to pressed state.
If press the Model Button which is in the pressed state nothing will happen.

By the way here is all I have done so far :(

<ToggleButton Width="50" Height="23"  Margin="0 0 0 0">Model</ToggleButton>
<ToggleButton Width="50" Height="23"  Margin="0 0 7 0">Drawing</ToggleButton>

Update:

Using the provided link under the comments, I came up with this:

<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Model" IsChecked="True" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Drawing" />

Now the above code gives me two buttons, but how can I style these? I know how to style. But I don't know what to style here? I mean I have already filled the style property here how can I style the ToggleButton itself?

enter image description here

Looks like what you need is 2 radio buttons, if you don't like their apprearance, just change their templates. — King King, Jul 21 '14 at 18:04
http://stackoverflow.com/questions/2362641/how-to-get-a-group-of-toggle-buttons-to-act-like-radio-buttons-in-wpf — DLeh, Jul 21 '14 at 18:18
@Vahid - Answer with most upvotes in the link provided by DLeh will work for you. — Rohit Vats, Jul 21 '14 at 18:26
@RohitVats Thanks, I was actually checking that answer, I updated the question. — Vahid, Jul 21 '14 at 18:30
What properties you want to set in Style? Are those properties common with RadioButton? — Rohit Vats, Jul 21 '14 at 18:33
@RohitVats I want to change the shape/background of the `Button` in Normal and Pressed/Checked states. — Vahid, Jul 21 '14 at 18:34
@Vahid Background is easy, but Shape would mean creating a whole new Template for the button. — Rachel, Jul 21 '14 at 18:40
@Rachel Yeah I know how to style it I just didn't know where to start. — Vahid, Jul 21 '14 at 18:47

score 3 · Accepted Answer · answered Jul 21 '14 at 18:38

Since RadioButton inherits from ToggleButton, you can set ToggleButton style to it and use BasedOn to inherit default style of ToggleButton like this:

<RadioButton GroupName="Test" Width="50" Height="23" Margin="0 0 7 0"
                Content="Model">
    <RadioButton.Style>
        <Style TargetType="ToggleButton"
               BasedOn="{StaticResource {x:Type ToggleButton}}">
            <Setter Property="Background" Value="Red"/>
            <!-- Set other properties here-->
        </Style>
    </RadioButton.Style>
</RadioButton>

Thanks Rohit. This is exactly what I needed to get started. – Vahid Jul 21 '14 at 18:48 — Vahid, Jul 21 '14 at 18:48

score 2 · Answer 2 · edited May 23 '17 at 12:13

According to this answer that DLeh linked in comments, you can do this by styling a RadioButton to use the ToggleButton styles.

<RadioButton Style="{StaticResource {x:Type ToggleButton}}" />

To answer your second question on how to customize the style property for this, you can create another style that inherits from the base ToggleButton style, and use it instead. Like this:

<Style x:Key="CustomToggleButtonStyle" 
       TargetType="{x:Type RadioButton}" 
       BasedOn="{StaticResource {x:Type ToggleButton}}">
    // Custom Style setters here
</Style>

<RadioButton Style="{StaticResource CustomToggleButtonStyle}" />

And of course there's always the option of completely rewriting the entire template yourself from scratch. MSDN has a good examples of a custom ToggleButton Template you could use to start with.

@Vahid Np, I use that link a lot when creating my own templates, because there's actually a lot more than goes into a good template than just basic appearances :) — Rachel, Jul 21 '14 at 20:12

ToggleButtons in WPF

2 Answers2