2

Can anyone help me with a simple template to make a WPF ToggleButton show "yes" or "no" depending on it's toggle state?

I dont want it to look like a button though, just a piece of text that either shows as yes or no.

I'd like it as a template that I can just add as a style to all my existing Toggle controls.

I tried with Blend but I am new to templating and didn't know how to do it.

Paul
  • 815
  • 1
  • 13
  • 23

2 Answers2

11

Building up on @Batuu's reply, to be just left with the content as text just update the style to

Updated

<Style x:Key="OnOffToggleStyle" TargetType="ToggleButton">
  <Setter Property="Content" Value="Off"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <ContentPresenter />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
      <Trigger Property="IsChecked" Value="True">
          <Setter Property="Content" Value="On">
          </Setter>
      </Trigger>
  </Style.Triggers>
</Style>

Addition here compared to original reply is 

  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <ContentPresenter />
      </ControlTemplate>
    </Setter.Value>
  </Setter>

You basically set the template of the button to just be the content that it holds.

Viv
  • 17,170
  • 4
  • 51
  • 71
  • Perfect, many thanks! So easy to see, but how would one go about finding out which properties are available on controls like this. Could I have got to this style using Blend? – Paul Mar 10 '13 at 15:14
  • all ui controls are look-less in WPF and to edit any control's style via blend, Just right click on the control in your designer and choose "Edit Template" -> "Edit a Copy" and follow the dialog. (It will seem like quite a lot of info when you try editing a simple default control, Best way to learn in that is remove everything you wouldn't use and then try running the application and slowly add bits in to see whats actually corresponding to what) – Viv Mar 10 '13 at 18:49
  • Ah....I seem to have a problem. This Style works fine when there is only one control with this style on a windows. But...when there are several controls with the style they seem to interfere with each other. For example you toggle one of them on and off, then toggle another one on and off and the text disappears from the first one! Any ideas? – Paul Mar 11 '13 at 11:17
  • @Paul Updated the Style to prevent this issue. Have tested this to be fine with multiple controls on the same page. Let me know if it's fine for you now. The change I've made is to set a default Content and have the trigger only change the value on one state. – Viv Mar 11 '13 at 11:46
  • Thanks Viv, that's perfect! Why wouldn't the previous solution work? Just wondering how the controls would interfere with each other like that? (I like to understand what went wrong!) – Paul Mar 11 '13 at 20:27
  • Content in ToggleButton is null-able and guess thats what was causing the issue, since the only triggers we had was True/False, nothing for null which made content blank and in turn size of button as 0(hence looking invisible). Setting a default takes care of that and gives a bonus of having one less trigger. – Viv Mar 11 '13 at 20:59
  • TargetType="{x:Type ToggleButton}" isn't necessary these days; just use TargetType="ToggleButton" – Jim Balter Aug 17 '13 at 01:49
4

You can do this easily with a style:

    <Window x:Class="WpfTest.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="OnOffToggleStyle" TargetType="ToggleButton">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <TextBlock Text="Yes"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content">
                        <Setter.Value>
                            <TextBlock Text="No"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Style="{StaticResource OnOffToggleStyle}"/>
    </Grid>
</Window>
Batuu
  • 595
  • 1
  • 8
  • 22
  • Wow, easy when you see it done! It still looks like a button, is it easy to remove the rest of the button style so I'm just left with the label? – Paul Mar 09 '13 at 16:51