Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Walter Williams
1385
Switch ToggleButtonTool image depending on IsChecked
posted

I would like to make the ToggleButtonTool change it's image when the button is checked.  This is what I have which is not working:

<igRibbon:ToggleButtonTool Caption="Individual Results"
SmallImage="{StaticResource UserIcon}"
LargeImage="{StaticResource UserIcon}"
igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge"
IsChecked="{Binding SelectedScenario.SaveIndividualResults}">
<igRibbon:ToggleButtonTool.Style>
<Style TargetType="{x:Type igRibbon:ToggleButtonTool}">
<Style.Triggers>
<Trigger Property="IsChecked"
Value="true">
<Setter Property="SmallImage"
Value="{StaticResource UserIcon2}" />
<Setter Property="LargeImage"
Value="{StaticResource UserIcon2}" />
</Trigger>
</Style.Triggers>
</Style>
</igRibbon:ToggleButtonTool.Style>
</igRibbon:ToggleButtonTool>

  • 29105
    Verified Answer
    Offline posted

    Hello Walter,

    I've attached a sample demonstrating your requirement. Note, your style is setup correctly, however you aren't actually toggling any properties. Tools can only show either a small or large image based on the size available for the tool. Therefore you would need to explicitly reset the small or large image properties when the IsChecked property is toggled.

    eg. In my sample the large image is never going to show based on the toolsize. So you must toggle the small button when the IsChecked property is toggled.

    [code]

    <igRibbon:ToggleButtonTool   x:Name="boldTool"  igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge">
    <ToggleButton.Style>
     <Style  TargetType="{x:Type igRibbon:ToggleButtonTool}">
      <Style.Triggers>
       <Trigger Property="IsChecked" Value="True">
        <Setter Property="SmallImage" Value="/IMG/YouTube-Background-Pop-4.jpg"  />
        <Setter Property="LargeImage" Value="/IMG/YouTube-Background-Pop-2.jpg"  />
       </Trigger>
       <Trigger Property="IsChecked" Value="False">
        <Setter Property="SmallImage" Value="/IMG/YouTube-Background-Pop-2.jpg"  />
        <Setter Property="LargeImage" Value="/IMG/YouTube-Background-Pop-4.jpg"  />
       </Trigger>
      </Style.Triggers>
     </Style>
    </ToggleButton.Style>  
    </igRibbon:ToggleButtonTool>                            
                                           

    [\code]

    Please review my sample for more details and let me know if you have any quesitons.

    WpfApplication1.zip