Question

I'm working on an application that requires a collection of togglebuttons to apply filters to data presented in a datagrid. The standard appearance of buttons and togglebuttons does little to inspire, so I have been attempting to build a style for the togglebuttons in XAML. This is what I have pieced together so far:

    <Style x:Key="VerticalToggle" TargetType="{x:Type ToggleButton}">
        <Setter Property="FontSize" Value="10" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="Width" Value="75" />
        <Setter Property="Height" Value="52" />
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <RotateTransform Angle="90" />
            </Setter.Value>
        </Setter> 

    <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border CornerRadius="0" Background="Gray" BorderBrush="Black" BorderThickness="0,1,1,0">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <!-- Here, I have no idea...  -->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

When I apply this style, it works as intended, although when hovered or selected, the colour does not change. So, I thought ... Triggers! But, I have no idea where to proceed. I have tried Setter Property="background" Value="White" as a child of Trigger with no success.

Thank you,

Was it helpful?

Solution

To change the background when "IsChecked" you can use this:

 <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Border Name="Border" Background="Gray" CornerRadius="0" BorderBrush="Black" BorderThickness="0,1,1,0">
          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="True" >
            <Setter Property="Background" Value="Black" TargetName="Border"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>

I just gave a name to the Border and referenced it in the setter by "TargetName"

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top