WPF ToggleButton, Button styling

Question

I have two buttons that work perfectly. I control the visibility: 1. One Button disappears and is replaced by the other Button. 2. The image is an arrow that points left or right. 2. The Color border changes as it should.

This works, but it feels kludgy. I believe this should be done with a ToggleButton, but I can't get a ToggleButton to work correctly.

Working Buttons:

            <Button Name="ActiveJobGridButtonRight" Grid.Row="1" Grid.Column="2"  
                    Command="{Binding JobGridListViewVisibility}" 
                    Style="{DynamicResource GraphicIconStyle}" IsEnabled="True"
                    Visibility="{Binding JobViewGridVisible, Converter={StaticResource ReverseBooleanToVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}"
                    ToolTip="Expand Jobs List">
                <Image Source="/Graphics/arrow_right24.png"  Width="24" Height="24" Margin="0"></Image>
            </Button>


            <Button Name="ActiveJobGridButtonLeft" Grid.Row="1" Grid.Column="2"  
                    Command="{Binding JobGridListViewVisibility}" 
                    Style="{DynamicResource GraphicIconStyle}" IsEnabled="True"
                    Visibility="{Binding JobViewGridVisible, Converter={StaticResource booleanToVisibility}, UpdateSourceTrigger=PropertyChanged}"
                    ToolTip="Collapse Jobs List">
                <Border BorderBrush="{Binding Path=JobViewGridVisible, Converter={StaticResource SecurityAccessBrushColorConverter}}"
                        BorderThickness="2" CornerRadius="4">
                    <Image Source="/Graphics/arrow_left24.png"  Width="24" Height="24" Margin="0"></Image>
                </Border>

            </Button>

My ToggleButton Attempt:

           <ToggleButton x:Name="EmployeeListViewExpansionToggleButton" Grid.Row="1" Grid.Column="2" Width="28" Height="28"
                          Background="Transparent" BorderThickness="0">

                    <Border BorderBrush="{Binding ElementName=EmployeeListViewExpansionToggleButton, Path=IsChecked, Converter={StaticResource SecurityAccessBrushColorConverter}}"
                            BorderThickness="2" CornerRadius="4" Background="Transparent">

                        <Image Source="/Graphics/arrow_right24.png" Width="24" Height="24"  Margin="0" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <ScaleTransform ScaleX="{Binding ElementName=EmployeeListViewExpansionToggleButton, Path=IsChecked, Converter={StaticResource BooleanToRotationConverter}}"/>
                            </Image.RenderTransform>
                        </Image>
                    </Border>

            </ToggleButton>

Converter:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var b = (bool)value;
        if (b)
        {
            return -1;
        }
        else
        {
            return 1;
        }
    }

Jeff R. · Accepted Answer · 2018-08-16 16:39:20Z

The ToggleButton could be styled with a template that contains both arrows and makes them visible or not visible depending on toggle state.

<Style x:Key="ArrowToggleStyle" TargetType="ToggleButton">
    <Setter Property="Background" Value="Gray"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Background="{TemplateBinding Background}">
                    <Grid>
                        <Image x:Name="leftArrowImg" Source="/Graphics/arrow_left24.png" Width="24" Height="24"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Image x:Name="rightArrowImg" Source="/Graphics/arrow_right24.png" Width="24" Height="24"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="content1" Content="not selected" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="content2" Content="SELECTED" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="DimGray"/>
                        <Setter TargetName="leftArrowImg" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="rightArrowImg" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="content1" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="content2" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="leftArrowImg" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="rightArrowImg" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="content1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="content2" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thanks. This is more flexible than what I was thinking, and I now have a better understanding of how TemplateBinding works. The Hidden/Visible logic is not correct for the images, but was easy to fix. I added the dynamic Border that I needed now that I understand what TemplateBinding is for... thanks!
You're welcome. I fixed the image visibility logic... copy & paste error.

mm8 · Accepted Answer · 2018-08-16 13:50:50Z

You could use two RadioButton elements and define a Style that changes the template of RadioButton based on whether it's currently checked, e.g.:

<RadioButton x:Name="left" GroupName="g1" Style="{StaticResource ToggleButtonStyle}" />
<RadioButton x:Name="right" GroupName="g1" Style="{StaticResource ToggleButtonStyle}" />

Style:

<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Background="Red">
                    <!-- define your not selected template here...-->
                    <TextBlock Text="Not selected" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Background="Green">
                            <!-- define your selected template here...-->
                            <TextBlock Text="Selected" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Collectives™ on Stack Overflow

WPF ToggleButton, Button styling

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related